Главная
Web-дизайн
Всплывающее окно с просьбой отключить AdBlock

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

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

Доброго времени суток 🙂

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

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

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



Пример

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

<div class="no-adb">
//сюда код рекламы
</div>

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

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

<div id="mdl_adb" class="fadeIn">
<span class="msg_close" onclick="document.getElementById('mdl_adb').style.display='none'; return false;">X</span>
<h3>Привет дорогой друг</h3> 
У тебя установлено расширение <b>AdBlock</b> или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие.
<a target="_blank" title="Как отключить Adblock и добавить сайт в белый список" href="http://gnatkovsky.com.ua/kak-dobavit-sajt-v-belyj-spisok-adblock.html">Инструкция как отключить AdBlock</a>
</div>

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

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

 #mdl_adb{
display:none;
position:fixed;
bottom:10px;
left:10px;
text-align:center;
font-size:16px;
line-height:16px;
background:#E92C32;
z-index:99;
width:300px;
padding:40px 10px 10px;
color:#fff;}
 
#mdl_adb h3{
font-weight:bold;
font-size:20px;
margin-bottom:10px;
}

#mdl_adb a{
color:#fff;
text-decoration:underline;
display:block;
padding:5px 0;
margin:10px 0;
font-weight:bold;}

.msg_close{
display:block;
position:absolute;
background:#292C33;
top:0;left:140px;
line-height:25px;
font-weight:bold;
width:50px;
height:25px;
text-align:center;
color:#fff;
cursor:pointer;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;}
.msg_close:hover{
background:#fc0;
color:#000;}
.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
     animation-duration: 0.4s; 
    -webkit-animation-duration: 0.4s;
     animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
     visibility: visible !important; 
}
 
@keyframes fadeIn {
    0% {transform: scale(0.7);opacity: 0.5;}
    80% {transform: scale(1.1);}       
    100% {transform: scale(1);opacity: 1;}       
}
 
@-webkit-keyframes fadeIn {
    0% {-webkit-transform: scale(0.7);opacity: 0.5;}
    80% {-webkit-transform: scale(1.1);}       
    100% {-webkit-transform: scale(1);opacity: 1;}       
}
 

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

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

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

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

<script type="text/javascript">
var ads = "no-adb"
onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);}
return results;}}
blocked = 0;
var ad_nodes = document.getElementsByClassName(ads);
for(i in ad_nodes){
if (ad_nodes[i].offsetHeight == 0){
blocked = 1;
document.getElementById('mdl_adb').style.display='block';}}}
</script>  

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

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



Пример

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

<div id="mdl_ctnr">
<div id="mdl_adb" class="fadeIn">
<span class="msg_close" onclick="document.getElementById('mdl_ctnr').style.display='none'; return false;">X</span>
<h3>Привет дорогой друг</h3> У тебя установлено расширение <b>AdBlock</b> или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие.
<a target="_blank" title="Как отключить Adblock и добавить сайт в белый список" href="http://gnatkovsky.com.ua/kak-dobavit-sajt-v-belyj-spisok-adblock.html">Инструкция как отключить AdBlock</a>
</div>
</div>

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

#mdl_ctnr{
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
text-align: center}

#mdl_ctnr:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: '';}


#mdl_adb{
display: inline-block;
position: relative;
vertical-align: middle
text-align:center;
font-size:16px;
line-height:16px;
background:#E92C32;
z-index:9999;
width:300px;
padding:40px 10px 10px;
color:#fff;}
 
#mdl_adb h3{
font-weight:bold;
font-size:20px;
margin-bottom:10px;
}

#mdl_adb a{
color:#fff;
text-decoration:underline;
display:block;
padding:5px 0;
margin:10px 0;
font-weight:bold;}

.msg_close{
display:block;
position:absolute;
background:#292C33;
top:0;left:140px;
line-height:25px;
font-weight:bold;
width:50px;
height:25px;
text-align:center;
color:#fff;
cursor:pointer;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;}
.msg_close:hover{
background:#fc0;
color:#000;}
.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
     animation-duration: 0.4s; 
    -webkit-animation-duration: 0.4s;
     animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
     visibility: visible !important; 
}
 
@keyframes fadeIn {
    0% {transform: scale(0.7);opacity: 0.5;}
    80% {transform: scale(1.1);}       
    100% {transform: scale(1);opacity: 1;}       
}
 
@-webkit-keyframes fadeIn {
    0% {-webkit-transform: scale(0.7);opacity: 0.5;}
    80% {-webkit-transform: scale(1.1);}       
    100% {-webkit-transform: scale(1);opacity: 1;}       
}
 

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

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

<script type="text/javascript">
var ads = "no-adb"
onload=function(){
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\s)" + className + "(?:$|\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);}
return results;}}
blocked = 0;
var ad_nodes = document.getElementsByClassName(ads);
for(i in ad_nodes){
if (ad_nodes[i].offsetHeight == 0){
blocked = 1;
document.getElementById('mdl_ctnr').style.display='block';}}}
</script>  

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

<span class="msg_close" onclick="document.getElementById('mdl_adb').style.display='none'; return false;">X</span>

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

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

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




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 19, в среднем: 5 из 5

Опубликовано 19 комментариев

  • Vert
    Комментариев: 3

    На вашем сайте если отключить ADBlock табличка исчезает. Поставил на свой сайт и табличка видна все время. И пофиг что выключено или нет ))

  • Vert
    Комментариев: 3

    Если вставить между дивами ссылку и картинку вообще не работает.

    А если эту строку ставить так: табличка вылетает все время.

    • Виталий
      Комментариев: 459

      Извините, а с чего вы взяли, что адблок должен блокировать картинку? Боюсь вы не поняли саму суть блокировки. Скрипт работает в том случаи, если адблок скроет то что внутри дива. Адблок не скрывает простые картинки, если бы это было так, то вы бы не видели картинок в интернете вообще. Адблок скрывает рекламные скрипты. От гугл, от яндекса и других рекламных площадок. Вы вставили в блок все что угодно кроме рекламы и говорите что не работает.

  • aleksandr
    Комментариев: 1

    люди всё работает.

    • Виталий
      Комментариев: 459

      Спасибо, что все сделали правильно 🙂 Многие мне пишут о не работе этого скрипта, но забывают о главном добавить именно рекламу 🙂 Адблок не блокирует простые картинки или вообще внутренние ссылки, которые многие добавляют в блок no-adb.

  • aleksandr
    Комментариев: 1

    Виталий // и другие, вот смотрите,(немного убрал).
    http://kafgroup.ru/A.html
    Включите AdBlock.

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

  • Кировчанин
    Комментариев: 1

    А не нарушает ли такое всплывающее окно правила Adsense? В которых сказано что на сайте не должно быть ВСПЛЫВАЮЩИХ ОКОН ,,,

    • Виталий
      Комментариев: 459

      На сайте не должно быть окон мешающих пользователю добраться до основного контента. Это последний пример из статьи. Значит, если вы сидите на Adsense, то использовать этот метод не желательно. Окна появляющиеся в стороне и не препятствующие просмотру сайта не запрещены.

  • RomaamoR
    Комментариев: 2

    Спасибо за статью. Все описано на доступном языке. Не чего трудного. Получилось с первого раза.

  • Александр
    Комментариев: 1

    Здравствуйте, Виталий! Все получалось, все работает. Но возник вопрос касающийся отображения просьбы об отключении блокировщика рекламы даже когда AdBlock выключен. То есть просьбы отображается в определенном месте модульной позиции сайта даже если браузерный софт деактивирован. Как это можно исправить?

    • Виталий
      Комментариев: 459

      Нужно смотреть сайт, что и как сделано, так не скажу. Знаю одно, что если сайт использует КЭШ то даже после отключения окно появится. Ибо показывается кэшированная версия страницы. Такой глюк есть и на моем сайте. Исчезает когда закрыть браузер и потом заново его открыть. В общим, когда человек придет на сайт второй раз у него окна уже не будет, если он оставил отключенным адблок на этом сайте.

  • Сергей
    Комментариев: 1

    Здравствуйте, Виталий! Код рабочий, но при выключенном блокировщике рекламы всплывающее окошко остаётся, что на вашем сайте что на моём, перезапуск браузера не помогает, браузер использую в приватном режиме, в чём может быть проблема?

    • Виталий
      Комментариев: 459

      Здравствуйте. А вы заметили что на странице примера красным текстом написано, что окно будет появляться всегда? На моем сайте это сделано специально. Если вы брали код с моей статьи, то там написано. что внутрь
      <div class="no-adb">
      //сюда код рекламы
      </div>

      Нужно добавлять код от ГУГЛ,ЯНДЕКСА и тд. Если вы туда ничего не добавили - окно не пропадет.

      • Сергей
        Комментариев: 2

        <div class="no-adb"><script async type="text/javascript" src="//byzgoso.ru/1ado5bo6l41b7dcui3gs0wrmoffjux0v9zmmi4470vb2gohzbi0rae1e4kk1xuvdjk"></script></div>

  • Сергей
    Комментариев: 2

    Вставляю так но окно не пропадает, похоже с таким рекламным кодом не работает

    • Виталий
      Комментариев: 459

      Код устроен так, что определяет высоту блока, если высота блока no-adb равна 0 пикселей, то окно есть, если высота больше окно пропадает. Сут ьв том, что реклама растягивает блок, а когда ее блокирует адблок, то скрипт понимает что внутри no-adb пусто и его высота равна 0 пикселей, он выводит окно. Проверьте ваш код вне скрипта, выводит ли он рекламу?

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

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