1 февраля 2016  /  Фронтенд

Проверка на блокировку рекламы, или «Пожалуйста, отключите AdBlock»

Cравнить блокировщики можно на сайте с рекламой.

На рекламе зарабатывают популярные интернет ресурсы, такие как Хабрахабр, Лайфхакер и множество других. Делается это для того, чтобы покрыть расходы на хостинг, зарплату авторам статей, поддержку и развитие ресурса.

С появлением AdBlock зарабатывать на рекламе немного стало сложнее. Я сам пользуюсь блокировщиком рекламы и ставлю его первым делом на компьютеры родителей и родственников. Это сильно уменьшает вероятность «подхватить» вирус.

Отключить AdBlock у пользователя разработчики не могут, поэтому остается три варианта:

1. Ничего не делать.
2. Определить включен ли блокировщик у пользователя и показать ему сообщение с просьбой отключить его на сайте.
3. Определить включен ли блокировщик у пользователя, заблокировать доступ к сайту и показать требование отключить блокировку, чтобы просмотреть содержимое.

Чаще всего сайты показывают сообщение с просьбой выключить блокировщик. Чтобы это сделать, нужно определить включен ли он у пользователя. У меня есть 3 решения этой проблемы.

Способ 1

Использовать популярный скрипт FuckAdBlock.

function adBlockNotDetected() {
    alert('AdBlock не активен');
}
function adBlockDetected() {
    alert('AdBlock активен');
}

Из плюсов — решение популярное и рабочее, есть поддержка сообщества.
Из минусов — нужно загружать дополнительно 6.75 KB.

Способ 2

Этот вариант крайне простой и рассчитан на то, что AdBlock блокирует любую загрузку внешних скриптов с названием ads.js. Поэтому нам надо создать такой файл и написать в нем:

window.noAdBlock = true;

А в HTML:

<script src="ads.js"></script>
<script>if (!noAdBlock) { alert('AdBlock включен!') }</script>

Этот способ не такой надежный как первый, но зато файл пустой. Но пользователю все равно нужно загружать пусть и пустой файл, а это лишнее соединение. Хотя если у вас http2, то это не проблема.

Способ 3

Третий способ основан на отлавливании события ошибки при загрузке рекламного скрипта:

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

Из плюсов — ничего не нужно грузить и все работает.
Из минусов — если у пользователя были проблемы с соединением, и файл по какой-то другой причине скрипт не загрузился, то он увидит сообщение о каком-то AdBlock, про который, возможно, даже не знает.

Что выбрать

Я отдаю свое предпочтение второму способу. Он очень простой и если есть поддержка http2 то совершенно незатратный. Возможно он не отловит все блокировшики, но большинство из них точно. А это именно то, что нужно в таких случаях.

⌘ ⌘ ⌘

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.