г. Ананьев, Одесская область
Компьютерный ликбез → javascript загрузка рекламных блоков и напоминание об отключении AdBlock
23
нбр 2020

javascript загрузка рекламных блоков и напоминание об отключении AdBlock

Одним из способов заработка в интернете есть размещение на сайтах рекламных блоков. На сайтах с хорошей посещаемостью это приносит неплохую прибыль. Но в то же время размещение такой рекламы несколько замедляет сами сайты, что не есть good. Средствами javascript можно организовать отложенную загрузку рекламных блоков Google и напоминание об анти блокировке AdBlock в случае применения расширений блокировки рекламы.
Прежде чем производить описанные ниже манипуляции на своем сайте изначально нужно определиться с тем, что для вас важнее: реагирование посетителя на содержимое контента или рекламы? Если в первую очередь важно восприятие поситетилем рекламы, далее можно не читать.
Занимаясь оптимизацией и продвижением сайтов следует обращаеть внимание на скорость загрузки страниц сайта. Безусловно скорость загрузки складывается со можества факторов, влияющих на формирование контента и выдачи страницы в формате HTML клиенту, но мы остановимся на одном, а именно, на способе подключения рекламных блоков Google.
Проанализировав скорость загрузки сайта, можно отметить, что несмотря на оптимизацию загрузки нужного содержимого относительно много времени занимает подгрузка рекламных блоков и счетчиков. Если отложить загрузку счетчиков не представляется возможным, то это можно сделать с рекламными блоками. 
Если реального посетителя действительно заинтересовало содержимое страницы, то первым его действием будет прокрутка этой страницы. Соответственно после этого действия мы можем начать подгрузку и отображение рекламных блоков Google. Для этого нам нужно будет создать три функции. Этим мы и займемся.

Исходим из того, что у нас может быть несколько реклмных блоков разнх типов. Первоначально на страницах где будут размещаться рекламные блоки необходимо прописать пустые DIV-ы с иднтификаторами ad_block0, ad_block1, ad_block2 и т.д. Поэтому для подготовки рекламных блоков можно использовать массивы.
stylead - массив с перечислением стилей css для рекламных блоков, размещаемых на сайте. Указываем стили для максимально возможных размеров блоков (благо средства Google позволяют адаптировать размешаемые блоки под нужный размер).
adslot - массив с перечислением идентификаторов 
так же объявляем массивы рекламных блоков и скриптов подгружающих их.

    var stylead = ['display:inline-block;width:728px;height:90px', 'display:inline-block; width:100%; height:600px', 'display:block; height: 50px; text-align:center'],
    adslot = ['1234567890', '9781234567', '5612345678'],
    ns = [], ds = [], jbs = [];
    var kad = adslot.length, iad=0, sks;
    var ads = "no-adb"
    var dc = document.getElementById('ad_block0');
    ...

 

После скролинга страницы и выполнения условия на страницу желательно после открывающего тэга <body> нужно установить скрипт google, который будет задействоваться после прокрутки сраницы посетителем

   ...
    if (scrollTop > 102 && !sks) {
    sks = document.createElement('script');
    sks.setAttribute('async', '');
    sks.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    document.body.appendChild(sks);
   ...

 

Далее с помощью цикла создать блоки и расположить их в заранее подготовленных для них местах.  В результате мы получаем готовую функцию.

window.onscroll = function() {
        
        var scrollTop = window.pageYOffset;
       if (scrollTop > 102 && !sks) {
        sks = document.createElement('script');
        sks.setAttribute('async', '');
        sks.src = '//pagead2.googlesyndication.com/pagead/js/_adsbygoogle.js';
        document.body.appendChild(sks);
      
        while ( iad < kad ) {
        ds[iad] = document.createElement('div');
        ds[iad].id = 'ad'+iad;
        ns[iad] = document.createElement('ins');
        ns[iad].setAttribute('style', stylead[iad]);
        ns[iad].classList.add('adsbygoogle');
        ns[iad].setAttribute('data-ad-client', 'ca-pub-0763005312345678');
            if ( iad == 2 ) { // в моем случае для данного блока нужны дополнительные параметры
            ns[iad].setAttribute('data-ad-layout', 'in-article');
            ns[iad].setAttribute('data-ad-format', 'fluid');
            }
        ns[iad].setAttribute('data-ad-slot', adslot[iad]);
        jbs[iad] = document.createElement('script');
        jbs[iad].innerHTML = ('(adsbygoogle = window.adsbygoogle || []).push({});');
        ds[iad].appendChild(ns[iad]);
        ds[iad].appendChild(jbs[iad]);
        if (document.getElementById('ad_block'+iad) != null) {
        if (document.getElementById('ad_block'+iad).firstChild == null) {
        document.getElementById('ad_block'+iad).appendChild(ds[iad]).classList.add('no-adb');
        }}
        iad++;
        }    
       }
    out_ads();
    }

 

Кроме того, на случай исользования расширений блокировки рекламы типа AdBlock (AdGuard, AdBlock Plus) задействуем механизм, который будет сообщать посетителю о необходимости отключения блокировки рекламы AdBlock. Для браузеров, не поддерживающих функцию getElementsByClassName, нужна заглушка.

        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;}}
        }

 

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

        function out_ads(){
        blocked = 0;
        var ad_nodes = document.getElementsByClassName(ads);
        for(i in ad_nodes){
        if (( ad_nodes[i].offsetHeight == 0 )&&( ad_nodes[i].getElementsByTagName('iframe').length == 0 )&& !dc.classList.contains('adblock_top') ){
        blocked = 1;
            dc.className = 'adblock_top';
            dc.innerHTML = '<h3>Привет, дорогой друг!</h3>У тебя установлено расширение, блокирующее рекламу.<br />Сайт "Новости Ананьева" выживает за счет показа рекламы. Добавь ananiev.net.ua в белый список, тем самым ты поможешь сайту и внесешь свой вклад в его развитие.<br /><b>Нажми здесь, чтобы узнать как отключить блокировку рекламы</b>';
        }}}

Стиль для блока, выводящего сообщение с просьюой об отключении блокировщика рекламы можно прописать в таблице стилей

    .adblock_top {background-color: red;padding: 0 15px 15px;color: #fff;text-align: center;cursor: pointer;}

либо добавить стиль непосредственно в функции

        dc.setAttribute('style', stylead['background-color: red;padding: 0 15px 15px;color: #fff;text-align: center;']);

 

То как работает данный механиз Вы можете увидеть на данном сайте.