Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

Определяем использование AdBlock на сайте

2 года назад
3553 просмотра
JavaScript Полезности

Зачем это нужно?

Изначально AdBlock создавался как блокировщик назойливой рекламы. Я это знаю, т.к. именно я когда-то давно запустил популярный ныне RuAdlist, список для блокировки рекламы. Затем я ушел в армию, доступ к аккаунту был утерян, но другие участники проекта (на тот момент я нашел аж двоих человек, помогавших мне за-просто-так) продолжили мое дело. Но сейчас не об этом.

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

Теперь AdBlock отбирает деньги у владельцев сайтов, которые зарабатывают на рекламе. Я не призываю всех и каждого блокировать пользователей AdBlock, это их дело, пусть блокируют. Но если у вас на сайте действительно нет назойливой рекламы, вы имеете полное право попросить пользователя отключить AdBlock для вашего сайта.

Как определить использует ли пользователь AdBlock

Все достаточно просто. Подключите к странице сайта JS файл с рекламным названием, например advertisement.js в котором устанавливайте некую глобальную переменную. И затем, уже в основном скрипте, проверяйте ее.

Например так:

// advertisement.js

window.noAdblock = true;
// Наш основной скрипт

if (window.noAdblock === undefined) {
    // Пользователь использует AdBlock либо другой блокировщик рекламы
}

Как можете видеть, все очень просто.

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

Мне нравится, например, вот этот: https://github.com/balajmarius/Adi.js

Его вы можете подключить прямо с GitHub (о том как использовать GitHub как CDN), включая даже файл-приманку, т.к. AdBlock будет блокировать его по вхождению в URL. Пример:

<script src="https://cdn.rawgit.com/balajmarius/Adi.js/master/advertisement.js"></script>
<script src="https://cdn.rawgit.com/balajmarius/Adi.js/master/jquery.adi.js"></script>
<link href="https://cdn.rawgit.com/balajmarius/Adi.js/master/jquery.adi.css" rel='stylesheet' type='text/css'/>

<script>
$(function() {
    $.adi({
        title: 'Вы используете AdBlock',
        content: 'Это просто пример работы скрипта :)',
        theme: 'dark'
    });
});
</script>
Что еще почитать