Здравствуйте, уважаемые читатели 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 или нет, поделитесь в комментариях.
Источник статьи/урока: https://xozblog.ru