Обнаружение AdBlock и других блокировщиков рекламы у посетителя

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

<div class="ads">
    <p>Блокировщик не обнаружен</p>
</div>
<div class="alt" style="display:none;">
    <p style="color:red;">Блокировщик обнаружен</p>
</div>

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

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

var ads = 0;

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

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

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

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

Однако эти способы не всегда корректно работают с разными блокировщиками.

Еще один способ обнаружения блокировщиков рекламы

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

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

<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>