Интернет магазин шабонов
Форма входа

Статьи сайта

Обнаружение Adblock при помощи JQuery

Для многих сайтов, которые публикуют контент бесплатно, реклама (или объявления) являются одним из их основных источников зароботка на сайте. Доход возможно будет потрачен на оплату расходов, например на то чтобы запустить веб-сайт, на веб-сервер, сеть доставки контента (CDN), подключение к интернету и - самое главное - писателей, которые публикуют и пишут содержание.

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

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

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

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

Прежде всего, давайте посмотрим, как работает один из рекламных блоков программного обеспечения чтобы удалить объявления. В качестве примера в данном описании, мы добавили несколько рекламных изображений, завернутые внутрь div с class="ads"; этот класс используется для оформления, а также определяет область как объявление.  
Код
   <div class="ads">  
        <img src="images/ads.jpg" height="250" width="300" alt="">  
    </div>
   
Технически, изображение должно появиться в браузере, но это не так - как вы можете видеть ниже. Программное обеспечение которое блокирует рекламу, заблокировало изображение. Чтобы проверить это, вы можете увидеть в журнале ошибок в обозревателе консоли.



Кроме того, блокировщик рекламы скрывает рекламный образ путем добавления display:none, следующим образом.



Теперь мы узнали принцип, как мы представляем объявления на сайте и как блокирует объявления AdBlocker, теперь мы в состоянии определить, как должен быть написан сценарий для отображения альтернативного сообщения, которое будет отображаться, когда AdBlocker активен.


Написание сценария

Есть несколько способов, которые мы можем сделать. Один из которых проверяет, если изображение все еще содержит 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) и добавит его в body документа.

Тогда мы создадим условный оператор JavaScript, который говорит: если изображение устанавливается с display:none, то мы будем работать с функцией appendMessage().    
Код
   setTimeout(function(){  
        if($('img').css('display') == "none") {  
            appendMessage();  
        }  
    }, 500);
   
Добавив setTimeout в timeframe, мы устанавливаем для того, чтобы позволить выводить объявление блочных устройств свою функцию - скрывать объявления - до запуска нашей. Это позволит нам точно проверить, если 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);  
    });

Важные замечания

Этот код предполагает, что объявление является изображением. Стоит отметить, что каждое объявление является уникальным. Проверьте, как отображается ваше объявление(я), и найдите, какой элемент будет скрыт.



Источник: http://www.hongkiat.com
Добавлять комментарии могут только зарегистрированные пользователи.