Как попросить посетителей своего сайта отключить AdBlock

Как попросить посетителей своего сайта отключить AdBlock
Javascript & jQuery 0    1850 0

Сегодня мы узнаем, как распознать факт того, что у человека присутствует включенный AdBlock или AdGuard и соответственно запретить ему просмотр web-сайта или какое-либо другое действие, например, скачивание файла. Не секрет, что сегодня почти у всех установлены в браузере фильтры интернет-рекламы. В некоторых браузерах, таких как Яндекс AdBlock идет уже в комплекте. Такие расширения блокируют рекламу в YouTube или на ваших сайтах, соответственно доход с рекламы уже не идет…

Нужно определиться, что вы будете делать в том случае, если у человека включен AdBlock.

Давайте попробуем вывести на всю страницу огромный overlay (перекрытие) на котором будет написано «Выключите, пожалуйста, блокировщик рекламы AdBlock». Таким образом, доступ к web-сайта будет полностью закрыт.

красная пунктирная линия

Создаем DIV с идентификатором, например, #spoof-overlay. Ни в коем случае не создавайте DIV-ы с классами или идентификаторами, в которых присутствует слово ad или advertising, потому что AdGuard даже этот блок заблокирует. Внутри нашего DIV-а напишем: выключите, пожалуйста, AdBlock или AdGuard, чтобы получить доступ к сайту.

создание div

	
Выключите, пожалуйста, AdBlock или AdGuard, чтобы получить доступ к сайту

Какой-то ценный контент...

красная пунктирная линия

Теперь добавим немного стилей нашему DIV-у.

#spoof-overlay{
    display: none;
    background-color: rgba(0,0,0,0.9);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-top: 17%;
    z-index: 99999;
}

По стандарту пропишем display: none; и будем менять это свойство в JavaScript, если вдруг у посетителя есть AdBlock. Проверить это очень просто.

красная пунктирная линия

Для этого создадим два JS файла. Первый назовем custom.js. Второй advert.js. Дайте своим файлам точно такие же имена. Advert это название популярной рекламной сети. Adblock блокирует все их рекламные баннеры и тизеры, соответственно он примет скрипт advert.js за оригинальный. Adblock подумает, что это реклама и не выполнит его. А мы будем проверять факт выполнения этого JavaScript файла и его подгрузки. Если он подгрузил, то всё хорошо, а если нет, то мы будем выводить информацию о том, что это реклама.

красная пунктирная линия

Создадим простую функцию в файле advert.js и назовем её spoof:

function spoof()
{
	window.spoof_jdsfoodsfnsofnkwjspnf = true;
}

spoof();
красная пунктирная линия

Проверяем наличие свойства spoof_jdsfoodsfnsofnkwjspnf в объекте window. Если свойство есть, то это будет говорить о том, что Adblok-а нет. Открываем файл custom.js и добавляем следующий код:

jQuery(document).ready(function() {

	if( typeof window.spoof_jdsfoodsfnsofnkwjspnf == 'undefined' )
	{
	  //AdBlock или AdGuard активен!
	  //Делаем всё, что нашей деше угодно
	  //Например, покажем наше окно с сообщением
	  jQuery('#spoof-overlay').fadeIn('slow');
	}
});

Далее подключаем получившиеся скрипты. Первым подключаем advert.js, потому что он не использует jQuery.

красная пунктирная линия

Скачать готовый скрипт (4 KB)

красная пунктирная линия

Смотреть видео версию урока от «Хауди Хо»


Рекомендую отличный хостинг
Просят от 5 рублей в день
  • PHP 4/5/7, Perl 5, Python, Zend, phpMyAdmin;
  • SSH, sFTP/FTP доступ;
  • Возможность заказа дополнительных IP-адресов;
  • POP3, IMAP, SMTP для работы с почтой;
  • Неограниченное количество доменов и поддоменов;
  • Неограниченный трафик;
  • Автоматическая установка CMS;
  • Управление DNS-записями;
  • И еще много разных ништяков 😉
Протестировать (30 дней бесплатно)

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?


Похожие статьи:

Анимация с линиями для текста
Анимация с огнем для текста
Анимация с сердечками для текста
Анимация с конфетти для текста
Анимация с пузырьками для текста
CSS файлы для браузеров EDGE и IE
Обратный таймер на JavaScript
Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Как создать div блок с прокруткой на JS?
Скролинг страницы вверх и вниз по клику на кнопку

Комментарии ()

  1. Alexander Larin 14 января 2019, 12:31 # 0
    Не работает с Adblock Plus.

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte