—»     —»   Обнаружение Ad Blocker при помощи jQuery
  Раздел: Реклама   Комментариев: 1  

Обнаружение Ad Blocker при помощи jQuery



Для многих сайтов, кто публикует бесплатный контент, рекламные объявления – это, пожалуй, единственный источник дохода. Прибыль от рекламы уходит на компенсацию всех издержек, вроде расходов на хостинг, трафик и, что более важно, на копирайтеров, которые создают контент.

Обнаружение Ad Blocker при помощи jQuery

Однако некоторые рекламные объявления могут сильно отвлекать и раздражать посетителей. Страница может быть в буквальном смысле захламлена всплывающими окнами, что зачастую приводит к тому, что посетители просто включают специальные приложения, блокирующие рекламу на сайтах. На держателях веб-сайтов это может сказаться очень отрицательно. Если посетители не видят рекламы, и не кликают по ней, это значит, что и прибыли ждать не стоит.

Нам кажется, что между издателем, читателем и рекламодателем должна существовать какая-то внутренняя связь. Издатели должны публиковать полезный контент, которым наслаждаются читатели, а рекламодатели должны поддерживать издателей финансово, чтобы читатели и дальше получали нужный и интересный контент, в ответ на что издатели помогут рекламодателям найти новых клиентов.

Многие веб-сайты сообщают своим посетителям о том, что если они используют блокираторы рекламы, то, если не сложно, пусть помогут проекту каким-нибудь еще способом, или просто отключат эту защиту. Сегодня мы хотим рассказать вам о том, как это можно сделать. Давайте приступим!

Приступаем к работе

Для начала, давайте рассмотрим принцип работы блокираторов рекламных объявлений. В качестве примера мы взяли несколько рекламных картинок, и поместили их в div с классом class="ads";. Этот класс используется для оформления области с рекламой.

<div class="ads">
<img src="images/ads.jpg" height="250" width="300" alt="">
</div>

Технически, изображение должно появляться в браузере, однако его там нет, как вы можете видеть. Потому что ПО для блокировки рекламы просто не позволяет его загрузить. Чтобы убедиться в этом, вы можете просмотреть лог об ошибках в консоли браузера.

Обнаружение Ad Blocker при помощи jQuery
Рекламное изображение не показывается из-за наличия у пользователя блокирующего расширения.

Вдобавок, блокиратор также скрывает рекламное изображение при помощи display:none.

Обнаружение Ad Blocker при помощи jQuery

После того, как мы узнали, каким образом мы размещаем рекламные объявления, и как специальное ПО их блокирует, можно перейти к написанию специального скрипта, который позволит отобразить пользователям специальное сообщение.

Пишем скрипт

Это можно сделать несколькими способами, один из которых заключается в проверке, содержит ли 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);
});

Посмотрите нижеприведенные ссылки, если вам интересно, как это все работает.

Посмотреть демо | Скачать исходный код

Если у вас установлено расширение для блокировки объявлений, то вы должны увидеть сообщение (либо вы увидите само рекламное объявление).

Обнаружение Ad Blocker при помощи jQuery

Важные заметки

Данный код предполагает, что рекламный блок – это изображение. Важно отметить, что каждое объявление – уникально. Проверьте, как показывается ваше рекламное объявление, и попытайтесь выяснить, какой элемент скрыт.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, реклама
Опубликовал Design FactoRy   Прочитано (раз): 2798   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 ноября 2014 @ 11:29
Написал: ИГорь — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я например сразу же закрываю такой сайт, который предлагает мне отключить адблок и напарить мегабайты трафика рекламы
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


торшеры Vaughan
masv.ru


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031