Для поиска блокировщика рекламы мы создадим два блока верстки, для посетителя будет показываться только один из них, в зависимости от того, обнаружен 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>