нбр 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;']);
То как работает данный механиз Вы можете увидеть на данном сайте.