Обнаружение AdBlock у посетителя

Хотя мой блог создан не для заработка на рекламе, захотелось поэксперементировать и добавить на него рекламу от Яндекса. Зарегистрировавшись в РСЯ и добавив код на сайте я задумался о том, как сделать чтобы у посетителей с установленными блокировщиками рекламы отображалось, например, какое-то сообщение с просьбой отключить блокировщик рекламы на моем блоге.

Хочу заметить, не всплывающее (и сильно раздражающее) окно с просьбой отключить блокировщик, а не навязчивое сообщение вместо рекламного блока.

Подготовительный этап

Для начала сделаем 2 блока, для посетителя будет показываться только один из них, в зависимости от того, обнаружен AdBlock или нет:

<div class="ads">
    <p>Блокировщик не обнаружен, показываем рекламу РСЯ или Google AdSense</p>
</div>
<div class="alt" style="display:none;">
    <p style="color:red;">Блокировщик обнаружен, показываем что-то еще.</p>
</div>

Определяем Adblock и другие блокировщики рекламы

Теперь нам нужно как то определить установлен ли в браузере посетителя блокировщик рекламы. В интернете много решений этой задачи, например можно создать файл ads.js с простым содержанием:

var reklama = 0;

Дальше подключаем его к странице и в конце странице проверяем определена ли переменная reklama:

if(typeof reklama == "undefined") {
    //  Если переменная не определена, значит стоит блокировщик, поэтому прячем рекламный блок и показываем альтернативный
    $('.alt').show();
    $('.ads').hide();
}

Так же есть способ использовать готовые решения типа FuckAdBlock. Еще можно отловить ошибки при загрузке рекламного скрипта:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"  onerror="alert('AdBlock включен!')"></script

Но у меня ни один из этих способов не работал и сайт никак не хотел определять что я использую блокировщик рекламы (я кстати использую uBlock Origin).

Решение

Можно имитировать рекламный баннер, а затем проверить не удален ли он, этим мы сможем определить работу блокировщика рекламы.

Вот итоговый скрипт, он скрывает или показывает один из блоков созданных в начале заметки:

<script>

    var adblockEnabled = false;

    // Добавляем "поддельное" объявление и получаем его стили
    document.body.innerHTML += '<div class="adsbygoogle" id="ad-detector"></div>';
    var adElement = document.getElementById('ad-detector');
    var adElementStyle = getComputedStyle(adElement, null);

    // Если блокировщик обнаружен
    if (adElementStyle.display === 'none') {
        document.getElementsByClassName('alt')[0].style.display = 'block';
    }

</script>

Готово! Надеюсь этот способ вам поможет 🙂

Если у вас есть еще варианты по обнаружения блокировщика рекламы у посетителей сайта, напишите о них в комментариях.

JS