Web Scripts

Интересный способ обойти AdBlock

• 27-06-2018 •

Любой блогер начинает свой заработок с таких рекламодателей как adsense или яндекс РСЯ. А с каждым годом посетителей с adblock все больше.

К сожалению, на данный момент, полностью обойти блокиратор рекламы не получиться, такую рекламу как adsense или РСЯ, он заблокирует в любом случае и ничего с этим не поделаешь. Но если у вас есть прямой рекламодатель, у вас есть залитая на сервер картинка и ссылка. То вместо заблокированного блока, вы можете вывести картинку с ссылкой. AdBlock не будет считать что это реклама, при условии, что там не будет классов с названием : ad, advertise, ads и прочие связанные с рекламой.

See the Pen If adblock by Aleksandrs (@CoolS2) on CodePen.

Если же у вас нету такого рекламодателя, то можно выводить текст с просьбой отключить блок. Если включить Adblock, то вы увидите сообщение, которое я поготовил заранее, если блок отключить, то отобразиться реклама с adsense.

Как вывести сообщение, если реклама заблокирована?

Есть разные способы. К примеру, если вы используете adsense, то подойдет следующий способ:


  <div class="ads ad_block">  
   <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
    <ins class="adsbygoogle"  style="display:block; text-align:center;"  data-ad-format="fluid"  data-ad-layout="in-article"  data-ad-client="ca-pub-0123456789101112"  data-ad-slot="9876543210"></ins> <script>  (adsbygoogle = window.adsbygoogle || []).push({}); 
   </script> 
  </div>

Добавили рекламный код себе на сайт в подготовленный тег div с классом ads


setTimeout(function() { Подождем пару секунд, пока загрузится сайт
var ad = document.querySelector("ins.adsbygoogle"); // создаем переменную с блоком рекламы от гугл
var adblock = document.getElementsByClassName('ads'); // создаем переменную с нашим блоком ads
if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) { // Если рекламный блок пуст
ad.style.cssText = 'display:block !important'; // Делаем его видимым в любом случае
  for(var i = 0; i < adblock.length; i++) { // Если у нас много блоков с рекламой, проходимся по всем.
  (function(index) {
adblock[index].innerHTML = 'Здесь была бы реклама, если бы не adblock и я получил бы лишнию копейку, а так тут просто черный блок с текстом';
adblock[index].style.background = '#000';
adblock[index].style.color = '#fff';
adblock[index].style.padding = '15px';
adblock[index].style.fontSize = '20px';
adblock[index].style.minHeight = '90px';
adblock[index].style.maxWidth = '728px';
adblock[index].style.margin = '15px auto';
adblock[index].className = '';    
  })(i);
  }
} 
}, 2000); // 2 секунды, до срабатывания скрипта

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

Второй способ обойти adblock

Для этого потребуется создать файл ads.js, внутри него написать одну строчку кода.


var canRunAds = true;

Сам принцип проверки adblock очень прост, сверху мы загружаем созданный js файл, дальше мы проверяем, прогрузился он или нет, если прогрузился, то у пользователя не стоит adblock и дальше никаких действий не нужно, если же не прогрузился, то можно выставить текст с просьбой или что угодно.


   <html> 
   <head> 
     <script   src  =  "/js/ads.js"  ></script> 
   </head> 
   <body> 
     <script> 
       if  ( window.canRunAds === undefined ){ // Если файл не прогрузился (Стоит adblock)  
        // Какой-нибудь скрипт
       } 
     </script> 
   </body> 
 </html>

Рабочий код будет выглядить примерно следующим образом:


   <html> 
   <head> 
     <script   src  =  "/js/ads.js"  ></script> 
   </head> 
   <body> 
     <script> 
       if  ( window.canRunAds === undefined ){ // Если файл не прогрузился (Стоит adblock)  
        var adblock = document.getElementsByClassName('ads'); // создаем переменную с нашим блоком ads
		for(var i = 0; i < adblock.length; i++) { // Если у нас много блоков с рекламой, проходимся по всем.
		  (function(index) {
		adblock[index].innerHTML = 'Здесь была бы реклама, если бы не adblock и я получил бы лишнию копейку, а так тут просто черный блок с текстом';
		adblock[index].style.background = '#000';
		adblock[index].style.color = '#fff';
		adblock[index].style.padding = '15px';
		adblock[index].style.fontSize = '20px';
		adblock[index].style.minHeight = '90px';
		adblock[index].style.maxWidth = '728px';
		adblock[index].style.margin = '15px auto';
		adblock[index].className = '';    
		  })(i);
		  }
       } 
     </script> 
   </body> 
 </html>

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

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

Так же советю почитать, о том как поменять 2 блока местам

Добавить комментарий