Adi.js — jQuery плагин для обнаружения Adblock

Здравствуйте, уважаемые читатели XoZbloga! Расширение для браузера Adblock и ему подобные прочно вошли в нашу жизнь. Многие просто не представляют как раньше могли без них обходиться и число таких пользователей постоянно растет. Однако для владельцев сайтов, которые зарабатывают на размещении рекламы на своих ресурсах, это серьезный удар по кошельку. В связи с этим выросло число сайтов с определителями расширения Adblock. С одним из которых мы и познакомимся в этой статье. Плагин называется Adi.js, и работает он с использованием jQuery. Страница автора на GitHub.

Установка

Итак, для того чтобы все заработало нужно:

  • Подключить библиотеку jQuery
  • Подключить файл advertisement.js и убедиться, что внутри файла есть jQuery.adblock = False;
  • Подключить файл плагина jquery.adi.js
  • Подключить стили для всплывающего окна jquery.adi.css

И собственно выполнить вызов:

1
$.adi({ /* здесь параметры */ })

Параметры и методы

У плагина присутствуют параметры для настройки всплывающего модального окна и методы для обработки полученного результата. Параметра всего три:

  • title — тип string/html — заголовок модального окна;
  • content — тип string/html — текст в модальном окне;
  • theme — тип string — используемая тема оформления, возможны варианты: light, dark (по-умолчанию: light).

Далее приведена таблица с методами данного плагина:

Метод Описание
active() функция обратного вызова, срабатывает когда Adblock активен;
inactive() функция обратного вызова, срабатывает когда Adblock не активен;
onOpen() функция обратного вызова, срабатывает когда модальное окно добавлено на страницу и свойство display в значении block;
onClose() функция обратного вызова, срабатывает когда свойство модального окна display установлено none.

Использование

Оценить как работает плагин вы можете на демонстрационной странице, ссылка сверху. Вы также можете скачать исходники, чтобы уже более детально рассмотреть использование.
На демо странице находится подготовленный блок div в который в зависимости от результата включения/отключения Adblock помещается соответствующий контент.

1
<div class="container"></div>

В общем виде вызов плагина был выполнен следующим образом:

1
2
3
4
5
6
7
8
9
10
11
$.adi({
   title: 'Adblock обнаружен!',
   content: 'Мы заметили, что вы используете Adblock! Помните, наш сайт лучше c выключенным Adblock!',
   theme: 'dark',
   inactive: function() {
       $(".container").html("<p style='color:green;'>Спасибо, что не используете Adblock!</p><img src='good.png'>");
   },
   onClose: function() {
       $(".container").html("<p style='color:red;'>Отключите пожалуйста Adblock!</p><img src='bad.png'>");
   }
});

На этом все. Если вы знаете иные способы определения того использует пользователь Adblock или нет, поделитесь в комментариях.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!