• 11 Фев 2015г
• 7976
• 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;
}

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