- 11 Фев 2015г
- 5841
- 22
- Рубрика: Разное
Вывод сообщения если посетитель использует 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
Использую ваш вариант кода. конфликтует с яндекс картой (убивает iframe) . Голову сломал не могу понять почему пропадает карта. Помогите разобраться. Спасибо.
Комментариев: 513
Хотел попробовать добавить карту, но ифреймов не нашел в упор, яндекс карты предлагают только код с использованием АПИ это обычный - script type=text/javascript итд. Добавил его и все работает на 5+. Скопируйте ссылку и посмотрите
http://prntscr.com/75kfm5
Возможно у Вас еще старый код карт, обновите его и все будет работать. Ну или пришлите мне на почту свой и я тогда попробую у себя.
Комментариев: 1
Не плохой скрипт, но хотелось бы узнать вот что, у меня сайт с большим количеством скриншотов, можно ли сделать так, заключив определенный скриншот в блок
//Сюда не код рекламмы а картинку img и т.д
пробую сделать так как есть не получается, картинка отображается
Комментариев: 513
adblock блокирует скрипты рекламы и картинки которые имеют названия типа banner, bn и тд. Также картинки, которые имеют определённые размеры. Если у Вас адблок блокирует часть контента, то просто измените размеры картинок их названия и все. Данный скрипт предназначен для обработки рекламных скриптов, а не картинок.
Комментариев: 6
Не знаю в чем проблема. Часть сайта Adblock Plus блокирует. Думаю этот контент поместить в Ваш скрипт, а то посетители не видят нужной инфы, думая что там реклама.
Комментариев: 1
Спасибо огромное, классно получилось.
Комментариев: 513
Рад, что смог помочь!
Комментариев: 1
Спасибо! Всё получилось) Отлично и очень подробно всё объяснил. Респект!
Комментариев: 6
Что-то не выходит ничего. Может данный метод уже не актуален?
Комментариев: 513
Здравствуйте. Еще как актуален. У меня он работает, а вот недавно я его еще и улучшил. Добавил всплывающее окно. Метод работает на настоящей рекламе, если вы туда поместили просто картинку, адблок ее не заблокирует 🙂 Подробнее в этой статье http://gnatkovsky.com.ua/vsplyvayushhee-okno-s-prosboj-otklyuchit-adblock.html
Комментариев: 6
Подскажите пожалуйста, как подключить вывод данного скрипта из файла? То есть не размещать код скрипта в хедере, а лишь подключить его вывод из папки скриптов?
Комментариев: 6
Извините, это я криво*оп, все заработало! Спасибо!
Комментариев: 513
В одной из своих статей я описал это, там есть пример http://gnatkovsky.com.ua/kak-podklyuchit-skripty-i-gde-luchshe-eto-sdelat.html
Комментариев: 6
Не совсем ясно, какой именно код писать в начале документа скрипта подключая ваш пример выше. Я так понял, просто вставить код в отдельный файл с расширением js, назвать его как полагается и подключить описанным способов в вашей стать, на которую вы дали линк, не достаточно?
Комментариев: 513
Там же все четко описано 🙂 В отдельный файл можно поместить js код. НЕ ШТМЛ, не стили, атолько ЯВАКОД - он же javascript. В этой статье у нас один единственный js код и он вначале статьи. наш код заключен в теги ЯВАКОДА.
<script type="text/javascript">
...
тут код
...
</script>
В статье что я указал описано. Что в файл переносится код без этих тегов. Файл сохраняется и к нему указывается пусть Этот путь
<script type="text/javascript" src="сайт/папка/script.js"></script>
Добавляется в то место где был скрипт или должен быть, то есть в подвал или шапку.
Прочитайте еще раз внимательно и разберитесь в этом вопросе, это поможет в будущем сэкономить много времени и не забивать файлы лишним кодом.
Комментариев: 6
Спасибо, разобрался!
Комментариев: 6
При реализации вашего способа, только через внешнее подключение скрипта, столкнулся с такой проблемой: сообщение о выключении adblock то появляется на странице то блокируется тем самым adblock. То есть из 10 обновлений страницы 2-3 раза сообщение появляется, в остальных случаях блокируется. Не подскажете в чему тут дело?
Комментариев: 1
АФТАР КРИВОРУКИЙ АЛЕНЬ
Комментариев: 513
Ну если учесть, что скрипт рабочий и у всех все получилось, лишь у вас проблемы, то вывод кто " КРИВОРУКИЙ АЛЕНЬ", напрашивается сам 🙂
Комментариев: 3
Спасибо за код.
У меня блокировщики блокируют iframe стороннего сайта.
Если Adblock, блокирует iframe, код срабатывает отлично.
Но если блокировка происходит встроенным блокировщиком в Опере, тогда код не срабатывает и уведомления не выводится от блокировке. Думаю, что это связано с тем, что Опера не блокирует весь iframe, а блокирует только то, что находится внутри в iframe. В этом случаи заметно, что размер на странице от iframe есть, но он пустой. Может уведомление нет из-за того, что iframe пустой, но он отобразился.
Если есть возможность, не могли бы попробовать сделать вывод уведомления на пусты iframe.
Заранее спасибо!
Комментариев: 513
Данный код работает на высоту блока и все. То есть если блок имеет высоту, в нем реклама, картинка и тд все ок. Но как только блокировщик убирает это и естественно высота становится 0 пикселей, тогда и срабатывает скрипт - выводя сообщение. Так что если после блокировки того что вас в iframe, высота его больше 0 пикселей, то скрипт может и не сработать. Анализируйте, что у вас после блокировки. какая высота, возможно укажите ее в скрипте. Это строка
if (ad_nodes[i].offsetHeight == 0){
Как понимаете тут задан ноль == 0, меняйте на свое и все.
Комментариев: 1
Здравствуйте, Виталий! Можно ли вместо текста: "Вы используете расширение AdBlock или подобное. Вы можете добавить этот сайт в белый список, и тем самым внесете свой вклад в его развитие." вставить картинку? Или - сформатированный текст, типа стихов? Я попробовал делать в тексте перевод строки, - скрипт не работает, - что, кажется, естественно: в скриптах не должна прерываться строка. (Я абсолютно не занимался скриптами!). Подскажите что-нибудь!