Однако некоторые рекламные объявления могут сильно отвлекать и раздражать посетителей. Страница может быть в буквальном смысле захламлена всплывающими окнами, что зачастую приводит к тому, что посетители просто включают специальные приложения, блокирующие рекламу на сайтах. На держателях веб-сайтов это может сказаться очень отрицательно. Если посетители не видят рекламы, и не кликают по ней, это значит, что и прибыли ждать не стоит.
Нам кажется, что между издателем, читателем и рекламодателем должна существовать какая-то внутренняя связь. Издатели должны публиковать полезный контент, которым наслаждаются читатели, а рекламодатели должны поддерживать издателей финансово, чтобы читатели и дальше получали нужный и интересный контент, в ответ на что издатели помогут рекламодателям найти новых клиентов.
Многие веб-сайты сообщают своим посетителям о том, что если они используют блокираторы рекламы, то, если не сложно, пусть помогут проекту каким-нибудь еще способом, или просто отключат эту защиту. Сегодня мы хотим рассказать вам о том, как это можно сделать. Давайте приступим!
Приступаем к работе
Для начала, давайте рассмотрим принцип работы блокираторов рекламных объявлений. В качестве примера мы взяли несколько рекламных картинок, и поместили их в div с классом class="ads";. Этот класс используется для оформления области с рекламой.
<div class="ads">
<img src="images/ads.jpg" height="250" width="300" alt="">
</div>Технически, изображение должно появляться в браузере, однако его там нет, как вы можете видеть. Потому что ПО для блокировки рекламы просто не позволяет его загрузить. Чтобы убедиться в этом, вы можете просмотреть лог об ошибках в консоли браузера.
Рекламное изображение не показывается из-за наличия у пользователя блокирующего расширения.
Вдобавок, блокиратор также скрывает рекламное изображение при помощи display:none.
После того, как мы узнали, каким образом мы размещаем рекламные объявления, и как специальное ПО их блокирует, можно перейти к написанию специального скрипта, который позволит отобразить пользователям специальное сообщение.
Пишем скрипт
Это можно сделать несколькими способами, один из которых заключается в проверке, содержит ли img параметр display:none. Если да, то отображается сообщение. И при помощи jQuery это сделать довольно просто. Прежде всего, давайте создадим новую javascript-функцию.
function appendMessage() {
var div = $('<div>').attr('id', 'message').text('Ad block is active');
var add = $('body').append(div);
}Вышеприведенная функция создает div-элемент с контентом «Ad block is active» и прикрепляет его к телу документа.
Затем мы создаем условное выражение javascript, в котором говорится: если изображение выставлено с использованием display:none, то мы запускаем функцию appendMessage().
setTimeout(function(){
if($('img').css('display') == "none") {
appendMessage();
}
}, 500);Добавление setTimeout – это временная рамка, которую мы устанавливаем для того, чтобы позволить расширениям для блокировки объявлений запускать собственные функции – скрывать объявления, - перед тем, как мы запустим наши функции. Это позволит нам точно проверить, используется ли display:none с изображением.
Ниже приведен полный код:
$(document).ready(function() {
function appendMessage(argument) {
var div = $('<div>').attr('id', 'message').text('Ad block is installed and active. Please support us by disabling it.');
var add = $('body').append(div);
}
setTimeout(function(){
if($("img").css('display') == "none") {
appendMessage();
}
}, 500);
});Посмотрите нижеприведенные ссылки, если вам интересно, как это все работает.
Посмотреть демо | Скачать исходный код
Если у вас установлено расширение для блокировки объявлений, то вы должны увидеть сообщение (либо вы увидите само рекламное объявление).
Важные заметки
Данный код предполагает, что рекламный блок – это изображение. Важно отметить, что каждое объявление – уникально. Проверьте, как показывается ваше рекламное объявление, и попытайтесь выяснить, какой элемент скрыт.
