Боремся с AdBlock

27
Дек
2015

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

Для начала, нужно создать в папке сайта скрипт script.js со следующим содержанием:

var ads = "adb";
var msg = '<div class="adb-style">Пожалуйста, отключите AdBlock,<br>чтобы поддержать проект!</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;
}
}
}

Подключаем скрипт: в вашем шаблоне перед тегом </head> добавляем строку:

<script src="/script.js"></script>

Рекламу, которую нужно «защитить» от AdBlock, оборачиваем в div с классом adb:

<div class="adb">
Рекламный код, который защищаем
</div>

Отображение блока настраивается в переменной msg.

Принцип работы скрипта в следующем: скрипт проверяет высоту рекламного блока. Если высота блока равна нулю, значит он заблокирован, а значит нужно выводить сообщение msg.

Чтобы настроить красивое отображение предупреждения, нужно изменить стили .adb-style, например так:

.adb-style {
width: 100px;
height: 100px;
margin: 5px 0;
padding: 10px;
font-size: 26px;
text-align: center;
background: #f9c7c7;
}