Как определить, установлен ли AdBlock на устройстве ваших посетителей с помощью JavaScript

AdBlockers — действительно сложная дискуссионная тема, потому что многие люди не поддерживают просмотр рекламы на веб-сайтах, однако, как администратор веб-сайта, вам понравится видеть рекламу на своем веб-сайте, потому что они приносят деньги. По оценкам Google, блокировка рекламы обходится Google в 887 миллионов долларов каждый год. Однако реклама неизбежное зло. Многие страницы, такие как Forbes, не позволят вам получить доступ (для разработчика, это не препятствие, поскольку мы можем просто проверить элемент и удалить наложение) на их веб-сайт, если вы не отключите AdBlock:

Это имеет некоторый смысл, так как большая часть контента в Интернете бесплатна, просто потому, что это реклама. У большинства из нас нет миллионов в банке, и мы пишем для развлечения, вы знаете? Если вы хотите реализовать такую ​​функцию на своем веб-сайте или просто показать моральное сообщение своему пользователю о том, что он должен посещать ваш сайт без блокировщика рекламы, вы можете реализовать его с помощью JavaScript довольно легко.

Важное сообщение

Мы настоятельно рекомендуем вам не блокировать доступ на вашем сайте для пользователей, которые используют AdBlock. Вместо этого вы должны просто отобразить сообщение, предупреждающее пользователя о том, что он не должен использовать AdBlocker, поскольку это ваш единственный доход.

Forbes начал с этой меры блокировки для пользователей, использующих adblock, затем показатель отказов Forbes вырос на 27% до 27,9 (хотя это по-прежнему очень хороший показатель), с ежедневным просмотром страниц снизился почти на 9% до 3,16, а ежедневное время на сайте на посетителя сократилось От 9% до трех минут (Узнайте больше о том, как страдают сайты, блокирующие рекламный блок в SEO.).

Если после прочтения предыдущего сообщения и последствий этого действия вы все еще хотите его реализовать, то в этой статье вы узнаете, как определить, установлен ли у вашего пользователя AdBlock с использованием JavaScript.

А. Используя простой трюк

Первый и самый простой способ проверить, установлен ли у вашего пользователя AdBlock в браузере или нет, — это создать в некоторой точке входа вашего основного скрипта (желательно до загрузки любого другого скрипта) переменную логического флага, обозначенную как adblockEnabled. Эта переменная будет установлена ​​в true:

window.adblockEnabled = true;
// Some other JS here ..

Как только переменная флага существует, приступайте к созданию нового простого файла сценария с именем adframe.js, Код скрипта следующий:

// adframe.js (an extra file with the following line of code)
window.adblockEnabled = false;

Очевидно, что важно создать новый файл (только с предыдущей строкой кода). Как видите, скрипт просто обновляет переменную логического флага в окне, обозначенном как adblockEnabled который изначально установлен в true. Однажды сценарий (adframe.js) загружается в документ с помощью тега сценария или с помощью AJAX, и на пользовательском компьютере устанавливается AdBlock, затем adframe.js файл действительно никогда не будет загружен (делая это window.adblockEnabled останется установленным в true) и, следовательно, позволит вам определить, установлен ли у вашего пользователя adblock в браузере.

Смотрите следующий пример реализации в одном файле:


window.adblockEnabled = true;

if(window.adblockEnabled) {
alert("Hey, you're using adblock :(");
}

Это довольно легко сделать и функционировать до даты.

Б. Использование BlockAdBlock (FuckAdBlock)

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

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

Если вы используете вместо этого менеджер пакетов, вы можете установить его через NPM:

npm install blockadblock

Или с Бауэром:

bower install blockadblock

Если вам нужна дополнительная информация об этом плагине, пожалуйста, посетите официальный репозиторий в Github здесь.

Чтобы определить, установлен ли у пользователя adblock на компьютере с BlockAdBlock, вам нужно всего лишь добавить скрипт в документ с помощью тега script. Затем проверьте, если переменная blockAdBlock существует, если нет, это означает, что blockadblock.js скрипт был заблокирован (установлен adblock). Затем добавьте 2 прослушивателя событий, которые будут срабатывать при обнаружении состояния AdBlock на компьютере:


/**
* Callback executed if adblock is installed
**/
function adblockDetected(){
alert("You're using adblock");
}
/**
* Callback executed if adblock is disabled
**/
function adblockDisabled(){
console.log("Everything in order, show ads");
}
/**
* Verify adblock
**/
if(typeof blockAdBlock === "undefined"){
adblockDetected();
}else{
blockAdBlock.onDetected(adblockDetected);
blockAdBlock.onNotDetected(adblockDisabled);
}

Оба метода работают довольно хорошо, это зависит от вас, что использовать и что делать, если ваш пользователь использует adblock.

Ссылка на основную публикацию
Adblock
detector