Главная
Разное
Вывод сообщения если посетитель использует 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;
}

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




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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это не спам *

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