• Всплывающее окно с просьбой отключить AdBlock

    Блог

    Персональный блог

Всплывающее окно с просьбой отключить AdBlock

Всплывающее окно с просьбой отключить AdBlock

На сайте автора уже есть подобная статья – Вывод сообщения если посетитель использует Adblock. Данный материал мы будем применять и здесь, но немного усовершенствуем и доработаем его. Там сообщение выводилось вместо рекламного блока при включенном блокировщке рекламы, а здесь будет появляться модальное окно. Пример такого окошка можно увидеть и на моем сайте, если использовать блокировщик типа AdBlock.

Для начала предлагаю сделать просто окошко, как сделал я себе. Это не агрессивное окно, которое не препятствует просмотру сайта и не запрещает доступ к нему, если включена блокировка рекламы. И так, приступим.

Первым делом, вы будете должны заключить все рекламные блоки в спецблок с классом – no-adb. Это нужно сделать со всеми блоками. Если у Вас есть рекламный блок, который показывается на всех страницах сайта, то можно заключить только его.

“Под кодом рекламы, я я имею ввиду код от Google, Яндекса и других рекламных площадок. Если вы добавите в блок ссылку на картинку, на сайт или вообще внутреннюю ссылку – магии не будет. AdBlock не блокирует простые ссылки и картинки, просто подумайте немного. Если бы это было так, то вы бы вообще ничего не видели в интернете с включенным AdBlock.”

Далее нужно добавить код самого окна. Забегая на перед, скажу, что код у обычного окошка и у агрессивного будет немного отличаться. Дело в том, что простое окошко по сути простой фиксированный блок, а агрессивное – перекроет весь контент сайта и не пустит посетителя далее пока тот не совершит определенного действия, но об этом немного дальше. А сейчас простое окошко. В любом месте шапки или подвала, добавляете код самого окошка.

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

Далее добавляем окну стили. Их нужно добавить в Ваш файл стилей.

Расписывать все построчно не буду. Статья рассчитана на людей, которые хоть немного, но знакомы с версткой и элементарными знаниями CSS. Важными являются тут первые 4 строки параметров основного блока:

  • display:none; – не показывать изначально
  • position:fixed; – фиксированное положение
  • bottom:10px; – отступ от низу окна браузера
  • left:10px; – отступ от левого края окна браузера

Так же в самом конце стилей добавлена анимация – fadeIn. Время анимации – 0.4 секунды. Если хотите можете его менять. В общим менять можете все как Вам угодно, я даю просто заготовку.

Теперь очередь самого главного пункта – скрипта, который выведет модальное окно. Он будет реагировать на блокировку рекламы и если блок с рекламой скрыт, появится окно. Это обычный javascript код. Добавлять его тоже нужно или в шапку или в подвал сайта. Можно рядом с кодом окна, можно поместить в отдельный файл и уже его подключить.

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

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

Для начала измениться немного HTML код. То есть код самого окна. Нам нужно заключить его в контейнер, еще в один блок. Даю сразу готовый код, чтобы Вы ничего не напутали, а потом не писали – НЕ РАБОТАЕТ!!!!

Как видите код тот же самый, просто он лежит внутри div с айди – mdl_ctnr. Естественно немного поменяются и стили. Как и с кодом, выкладываю сразу новые, чтобы вы не напутали.

Так как у нас теперь главным считается не блок окна, а контейнер, который перекроет весь сайт и в примере он полупрозрачный черный, то в скрипте вывод окна, тоже нужно сменить на новый айди.

В нашем javascript в последней строке – document.getElementById(‘mdl_adb’), нужно mdl_adbпоменять на mdl_ctnr. Готовый код будет таким:

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

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

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

На этом все, спасибо за внимание. !

Свяжитесь со мной

Используйте эту форму, чтобы рассказать мне о целях и потребностях вашего проекта.

[contact-form-7 404 "Not Found"]