Как вывести баннеры и обойти adBlock. Скрипт для вывода своих баннеров

В новой записи я вам покажу скрипт который будет выводить замену рекламных блоков при включенной блокировки AdBlock Plus. Этот скрипт будет выводить ваш код заместо рекламы, так же если реклама не смогла подобраться для пользователя и вывелась пустота.

Данная решение я использую на своём сайте, работу данного скрипта вы можете наблюдать если включите adBlock в свойм браузере.

Функционал скрипта позволяет вам выводить любой HTML код в качестве замены для рекламы. По мимо этого функция getRandomInt() выдаёт рандомное число, что позволяет при создание нескольких баннеров выводить их в случайном порядке при каждой перезагрузки страницы.

После прогрузки страницы, запускается setTimeout который через 5 секунд проверяет области с рекламой на высоту. Если реклама выводится, то область будет заполнена и иметь какую то высоту, если реклама не прогрузилась, то высота будет маленькая или ровна нулю. Для каждой области вы можете указать свой предел минимальной высоты.

Скрипт работает следующим образом:

1. В массив arrAdsenseBlock записывается информация о баннерах
   • ключ массива (например sidebarCategoryAdsBlock) это идентификатор области в которой выводятся баннеры
   • параметр heightCheck указывает минимальную высоту области, после которой срабатывает вывод баннера
   • в параметр listBanner записываются массивы с рекламными банерами, каждый массив это отдельный баннер с мобильной и ПК версией
   • desctopVersion — это ПК версия баннера, запускается с шириной экрана более 768px
   • mobilVersion— это мобильная версия баннера, запускается с шириной экрана менее 768px
2. Внутри скрипта имеются следующие переменные
   • conteiner — контейнер для вывода баннера
   • countBanners — записывает количество баннеров из условия количество элементов массива
   • randomNum — рандомное число
   • widthWind — ширина экрана

/* =================================== */
/* ФУНКЦИЯ ДЛЯ ЗАМЕНЫ РЕКЛАМНОГО БЛОКА */
/* =================================== */
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function createNewAdsense(typeAdsense, addConteiner) {
  
  /* массив с информацией баннеров */
  let arrAdsenseBlock = {   
    /* баннер в боковой панели */ 
    "sidebarCategoryAdsBlock" : {
      "heightCheck" : 50,
      "listBanner" : {
        0 : {
          "desctopVersion" : '<a href=""><img src=""/></a>',
          "mobilVersion" : '<a href="" class="mobil"><img src=""/></a>',
        }
      }
    },
    /* баннер в шапке страницы */
    "adsUnderSidebarCategory" : {
      "heightCheck" : 180,
      "listBanner" : {
        0 : {
          "desctopVersion" : '',
          "mobilVersion" : '',
        },
        1 : {
          "desctopVersion" : '',
          "mobilVersion" : '',
        }
      }
      
    },
  };

  /* запускаем проверку через 5 сек */
  setTimeout(() => {
    let conteiner = $(addConteiner)
    let heightAdsenseBlock = conteiner.height()

    if(heightAdsenseBlock <= arrAdsenseBlock[typeAdsense]["heightCheck"]) {

      let objectBanner = arrAdsenseBlock[typeAdsense]["listBanner"]
      let countBanners = Object.keys(objectBanner).length

      if(countBanners > 0) {
        let randomNum = getRandomInt(countBanners)
        var widthWind = $(this).width();
        if (widthWind <= 768) {
          conteiner.append(objectBanner[randomNum]["mobilVersion"])
        } else {
          conteiner.append(objectBanner[randomNum]["desctopVersion"])
        }
      }

    }

  }, 5000);
}


$(document).ready(function() {
  createNewAdsense("sidebarCategoryAdsBlock", "#sidebarCategoryAdsBlock")
  createNewAdsense("adsUnderSidebarCategory", "#adsUnderSidebarCategory")
})

/* =================================== */
/* =================================== */