Главная
Разное
Вывод сообщения если посетитель использует Adblock

Вывод сообщения если посетитель использует Adblock

Блокировка рекламы

Доброго времени суток 🙂
Тема этой статьи - это вывод сообщения если посетитель использует Adblock. Многие вебмастера на своих сайтах используют рекламу на своих сайтах, а для некоторых это единственный доход от сайта и я не являюсь исключением. Сейчас очень много рекламы в интернете. Есть реклама безобидная как у Google и Yandex, а есть разные всплывающие блоки, которые не закроешь и не избавится от них. Некоторые имеют звук, особенно это радует когда у тебя стоит акустика 5.1 и перед этим ты слушал громко(так что стены дрожали) любимую песню. Открываешь себе вкладки и внезапно на всю квартиру у тебя начинается стрельба с танка или штурмовики идут в боевой заход. Многие это испытали на себе и это заставило их искать решение этой проблемы. Решение простое - это не малоизвестное расширение для всех браузеров Adblock. Посетители счастливы - рекламы нет, но вот вебмастера у которых маленькая парочка рекламы приносящая минимальную копейку - попадает под блокировку. И так по копейке Ваша прибыль уменьшается с каждым посетителем использующим такое расширение.

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

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

1. Скрипт вывода сообщения

В подвале перед закрывающимся body или в шапке перед закрывающимся head Вам нужно добаить следующий скрипт.

<script type="text/javascript">
var ads = "no-adb"
var msg = '<div class="no-adb-1">Вы используете расширение AdBlock или подобное. Вы можете добавить этот сайт в белый список, и тем самым внесете свой вклад в его развитие.</div>';
   
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;
ad_nodes[i].innerHTML = msg;  
}
}
}
</script>

Во второй строке присваиваем класс no-adb блоку, который будет содержать внутри себя рекламный код. В 3 строке пишем само сообщение, которое увидят пользователи, использующие расширение. Как вы заметили сообщение заключено в блок с классом no-adb-1. Это очень Важно. Само сообщение меняйте как Вам угодно, но класс желательно не трогать, если не хотите потом запутаться 🙂

2. HTML разметка

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

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

3. CSS стили

Теперь осталось дело за малым. Добавляем стили блоку который выводит сообщение, а именно no-adb-1. Если Вам надо добавить стили блоку с рекламой то тогда вы должны сами прописать стили для класса no-adb. Не перепутайте их!

.no-adb-1 {
border:1px dotted #eee;
font-size: 16px;
line-height:1.38em;
text-align:center;
color:#444;
background:#ffffd3;
}

Стили, как обычно можем менять под себя и как я говорил раньше можете сделать всплывающее модальное (поп-ап) окошко, которое выведет данное сообщение. Как это сделать? Очень просто, но это уже совсем другой урок...
На этом все, спасибо за внимание 🙂




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


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

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

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

    Использую ваш вариант кода. конфликтует с яндекс картой (убивает iframe) . Голову сломал не могу понять почему пропадает карта. Помогите разобраться. Спасибо.

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

      Хотел попробовать добавить карту, но ифреймов не нашел в упор, яндекс карты предлагают только код с использованием АПИ это обычный - script type=text/javascript итд. Добавил его и все работает на 5+. Скопируйте ссылку и посмотрите
      http://prntscr.com/75kfm5

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

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

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

    //Сюда не код рекламмы а картинку img и т.д

    пробую сделать так как есть не получается, картинка отображается

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

      adblock блокирует скрипты рекламы и картинки которые имеют названия типа banner, bn и тд. Также картинки, которые имеют определённые размеры. Если у Вас адблок блокирует часть контента, то просто измените размеры картинок их названия и все. Данный скрипт предназначен для обработки рекламных скриптов, а не картинок.

  • Костя
    Комментариев: 6

    Не знаю в чем проблема. Часть сайта Adblock Plus блокирует. Думаю этот контент поместить в Ваш скрипт, а то посетители не видят нужной инфы, думая что там реклама.

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

    Спасибо огромное, классно получилось.

  • Илья
    Комментариев: 1

    Спасибо! Всё получилось) Отлично и очень подробно всё объяснил. Респект!

  • Роман
    Комментариев: 6

    Что-то не выходит ничего. Может данный метод уже не актуален?

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

      Здравствуйте. Еще как актуален. У меня он работает, а вот недавно я его еще и улучшил. Добавил всплывающее окно. Метод работает на настоящей рекламе, если вы туда поместили просто картинку, адблок ее не заблокирует 🙂 Подробнее в этой статье http://gnatkovsky.com.ua/vsplyvayushhee-okno-s-prosboj-otklyuchit-adblock.html

      • Роман
        Комментариев: 6

        Подскажите пожалуйста, как подключить вывод данного скрипта из файла? То есть не размещать код скрипта в хедере, а лишь подключить его вывод из папки скриптов?

    • Роман
      Комментариев: 6

      Извините, это я криво*оп, все заработало! Спасибо!

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

        В одной из своих статей я описал это, там есть пример http://gnatkovsky.com.ua/kak-podklyuchit-skripty-i-gde-luchshe-eto-sdelat.html

        • Роман
          Комментариев: 6

          Не совсем ясно, какой именно код писать в начале документа скрипта подключая ваш пример выше. Я так понял, просто вставить код в отдельный файл с расширением js, назвать его как полагается и подключить описанным способов в вашей стать, на которую вы дали линк, не достаточно?

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

            Там же все четко описано 🙂 В отдельный файл можно поместить js код. НЕ ШТМЛ, не стили, атолько ЯВАКОД - он же javascript. В этой статье у нас один единственный js код и он вначале статьи. наш код заключен в теги ЯВАКОДА.
            <script type="text/javascript">
            ...
            тут код
            ...
            </script>
            В статье что я указал описано. Что в файл переносится код без этих тегов. Файл сохраняется и к нему указывается пусть Этот путь
            <script type="text/javascript" src="сайт/папка/script.js"></script>
            Добавляется в то место где был скрипт или должен быть, то есть в подвал или шапку.
            Прочитайте еще раз внимательно и разберитесь в этом вопросе, это поможет в будущем сэкономить много времени и не забивать файлы лишним кодом.

            • Роман
              Комментариев: 6

              Спасибо, разобрался!

            • Роман
              Комментариев: 6

              При реализации вашего способа, только через внешнее подключение скрипта, столкнулся с такой проблемой: сообщение о выключении adblock то появляется на странице то блокируется тем самым adblock. То есть из 10 обновлений страницы 2-3 раза сообщение появляется, в остальных случаях блокируется. Не подскажете в чему тут дело?

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

    АФТАР КРИВОРУКИЙ АЛЕНЬ

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

      Ну если учесть, что скрипт рабочий и у всех все получилось, лишь у вас проблемы, то вывод кто " КРИВОРУКИЙ АЛЕНЬ", напрашивается сам 🙂

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

    Спасибо за код.
    У меня блокировщики блокируют iframe стороннего сайта.
    Если Adblock, блокирует iframe, код срабатывает отлично.
    Но если блокировка происходит встроенным блокировщиком в Опере, тогда код не срабатывает и уведомления не выводится от блокировке. Думаю, что это связано с тем, что Опера не блокирует весь iframe, а блокирует только то, что находится внутри в iframe. В этом случаи заметно, что размер на странице от iframe есть, но он пустой. Может уведомление нет из-за того, что iframe пустой, но он отобразился.
    Если есть возможность, не могли бы попробовать сделать вывод уведомления на пусты iframe.
    Заранее спасибо!

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

      Данный код работает на высоту блока и все. То есть если блок имеет высоту, в нем реклама, картинка и тд все ок. Но как только блокировщик убирает это и естественно высота становится 0 пикселей, тогда и срабатывает скрипт - выводя сообщение. Так что если после блокировки того что вас в iframe, высота его больше 0 пикселей, то скрипт может и не сработать. Анализируйте, что у вас после блокировки. какая высота, возможно укажите ее в скрипте. Это строка
      if (ad_nodes[i].offsetHeight == 0){
      Как понимаете тут задан ноль == 0, меняйте на свое и все.

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

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

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

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

Это не спам *

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

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

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