В этой записи я покажу вам скрипт, который будет проверять включен ли блокировщик рекламы у пользователя. Скрипт будет запрещать доступ и выводить сообщение, если блокировка включена.
AddBlock, AddGuard и подобные им системы блокируют рекламу на сайтах. Многие пользователи используют подобные блокировщики. Из-за этого администраторы сайтов теряют много денег, так как вся реклама на их сайтах заблокирована.
Логика
Мы создадим окно которое будет изначально скрыто.
Так же мы создадим 2 JavaScript файла. В первом мы запишем код нашей рекламы, на которую мы будем ловить блокировщик. Во втором файле пропишем код проверки, заблокировалась ли наша реклама из первого сайта.
Если реклама заблокировалась, то делаем наше окно видимым.
Окно с сообщением
Для начала давайте напишем код нашего окна, которое должно появляться если реклама заблокирована.
Окно нужно разместить на всех страница с рекламой, в самом верху. Здесь простой HTML украшенный CSS)))
!!!Внимание! Название класса не должно упоминать о рекламе так как, часто блокировщики удаляют куски кода с определенными классами или идентификаторами.!!!
<div id="stupid_blocker">
<h2>Этот сайт существует и продвигается только благодаря рекламе!</h2>
<p>Рекламные блоки которые находятся на сайте, не мешают прочтению статей.</p>
<p>Администрация сайта просит вас выключить блокировщик рекламы!</p>
</div>
Теперь все это немного приукрасим.
#stupid_blocker{
display:none;//изначально блок будет скрыт
background: #000;//задает цвет фона (черный)
opacity:0.9;//задает прозрачность фона
position: fixed;//блок фиксированный и прокручивается вместе с контентом
left: 0;//отступ слева
top: 0; //отступ сверху
width: 100%; //ширина
height: 100%; //высота
color: #fff; //цвет текста
text-align: center;//расположение текста (по центру)
padding-top: 17%;//внутренний отступ сверху
z-index: 9999;//расположение относительно других объектов по оси z(выше всех)
}
Наша реклама
Многие блокировщики блочат файлы с определенным названием, исходя из этого мы создадим файл с названием advert.jsи пропишем в него следующий код.
function spoof() {
window.spoof_stupid_bloker = true;
}
spoof();
Логика проста. В файле есть функция в которой есть переменная с любым значением. И есть вызов функции в этом же файле. Когда блокировщик видит что в файле advert.js есть скрипт, он его блокирует, так как файлы с таким название занесены в базы блокировщика.
Проверяем подгрузку файла advert.js
Теперь давайте создадим файл с названием custom.js. У второго файла может быть произвольное название.
В него пропишем.
//скрипт запускаем после подгрузки файла
$(document).ready(function() {
//если нашей переменной, из файла с рекламой, не существует выводим наше окно
if (typeof window.spoof_stupid_blocker == 'undefined')
{
$('#spoof-overlay').fadeIn('slow');
}
});
Теперь нам нужно подключить наши скрипты к основному файлу. Скрипты нужно подключить в конце, после основного кода. По мимо скриптов, нужно подключить библиотеку jQuery.
Путь для подключения библиотеки оставляем как у меня, путь к файлам с рекламой и к проверочному файлу изменяем на свой.
//это прописываем внутри тега head. Это скрипт подключения библиотеки JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//это прописываем в самом конце
<script src="/wp-content/themes/dublin/advert.js" defer></script>
<script src="/wp-content/themes/dublin/custom.js" asunc></script>
