[JS] Jak wykryć wykorzystanie AdBlocka w przeglądarce użytkownika?

Dzisiejszy świat reklamą stoi. Od tego nie da się uciec, reklamy atakują nas z każdej strony: z TV, z gazet, ze skrzynek pocztowych czy też ze stron internetowych. Często czujemy się tym wszystkim zmęczeni. Dlatego też, wiele osób korzysta z AdBlocka, aby uciec od nachalnych reklam, które pojawiają się na różnych stronach.

To jest jedna strona medalu. Po drugiej stronie barykady bardzo często stoją osoby bądź firmy, które w zamian udostępnianie treści interesujących dla użytkownika oczekiwałyby jakiejkolwiek formy uznania, np. w formie wynagrodzenia za wyświetlenie reklamy na stronie. Dla takich osób fakt, że czytelnik strony korzysta z AdBlocka, może być demotywujący gdyż każdy pragnie być w jakiś sposób doceniony za trud włożony w wykonaną pracę.

Jak działa AdBlock?

Aby móc skutecznie wykryć wykorzystanie AdBlocka na stronie dobrze jest najpierw zrozumieć jak on działa. AdBlock działa filtrując adresy URL, które są umieszczone w kodzie strony. Poniżej możesz zobaczyć przykładowy kod HTML, który jest wykrywany przez AdBlocka:

<div class="ad-container">
  <ins data-ad-slot="1982208755" data-ad-client="ca-pub-1580776846000000" style="display:inline-block;width:234px;height:60px" class="adsbygoogle" data-adsbygoogle-status="done">
    <ins style="display:inline-table;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:234px;background-color:transparent">
      <ins style="display:block;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:234px;background-color:transparent" id="aswift_0_anchor">
        <iframe width="234" scrolling="no" height="60" frameborder="0" style="left:0;position:absolute;top:0;" name="aswift_0" id="aswift_0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe>
      </ins>
    </ins>
  </ins>
</div>

W przypadku, gdy użytkownik ma włączoną obsługę blokowania reklam, to AdBlock pozwoli wyświetlić tylko tyle:

<div class="ad-container">
  <ins data-ad-slot="1982208755" data-ad-client="ca-pub-1580776846000000" style="display:inline-block;width:234px;height:60px" class="adsbygoogle"></ins>
</div>

Jak można zauważyć, AdBlock po prostu usuwa kod zawarty w kontenerze reklamowym i tym samym reklama nie jest wyświetlana na stronie. Jak można poradzić sobie z blokowaniem reklam mając taką wiedzę?

Jak wykryć AdBlocka za pomocą JS?

Gdy już wiemy jak działa AdBlock, to możemy napisać bardzo prosty skrypt wykorzystujący bibliotekę jQuery (która zapewne już jest dołączona do Twojej strony).

(function () {
  window.setTimeout(function () {
    if ($('.ad-container').height() === 0 || $('.ad-container').filter(':visible') === 0) {
      $('.no-ads-info').show();
    }
  }, 1000);
})();

Pisząc tego typu kod zakładam, że wiesz w którym miejscu są umiejscowione zaimplementowane przez Ciebie reklamy. W powyższym przypadku, sprawdzamy wysokość kontenera o klasie ad-container albo czy kontener z tą klasą jet widoczny. Jeśli w którymś z tych przypadków wynik wynosi 0, to zakładamy że użytkownik wykorzystuje AdBlocka i pokazujemy informację z informacją dla takiego użytkownika. Obydwa te sprawdzenia mają miejsce 1 sekundę po załadowaniu strony.
Oczywiście, sam zdecydować kiedy chcesz wykonać sprawdzenie czy reklamy są widoczne na stronie.

Jak traktować użytkownika blokującego reklamy na stronie?

Gdy już wiemy, że użytkownik blokuje reklamy na stronie, to możemy podjąć odpowiednie kroki wobec niego w celu nakłonienia go do zmiany decyzji i odblokowania wyświetlania reklam na stronach.

Podejście 1: Nic nie robić

Pierwsze podejście właściciela strony może być takie, że nic z tym nie zrobi i będzie liczył na to, że jednak reklamy na jego stronie nie są blokowane przez odwiedzających. Tak do tej pory robiłem.

Podejście 2: Zasugerować wyłączenie blokowania reklam na stronie

Drugie podejście polega na wyświetleniu wiadomości użytkownikowi strony z prośbą o docenienie pracy jaką wykonał właściciel strony w przygotowanie treści na stornie i odblokowanie wyświetlania reklam na tej stronie, niejako w ramach podziękowania. Treść na stronie nie jest blokowana.
Tak od teraz się dzieje u mnie na blogu.

Podejście 3: Blokowanie wyświetlania strony

Kolejne podejście jest dość ekstremalne, ponieważ w momencie wykrycia blokowania reklam na stronie, autor może ukryć zawartość strony lub przekierować użytkownika na stronę z informacją dla niego, gdzie może zamieścić informację o tym, że treść na stronie będzie widoczna tylko wtedy, gdy będzie wyłączony AdBlock.

Podsumowanie

Mam nadzieję, że wiadomości przedstawione w treści tego wpisu okażą się przydatne. Tutaj na blogu zastosowałem podejście drugie, ponieważ rozumiem fakt, że ktoś może chcieć blokować reklamy, ale mam nadzieję, że jak ktoś przeczyta moją wiadomość, to zdecyduje się nie blokować ich na tym blogu. Tym bardziej, że nie są one nachalne i pojawiają się tylko w dwóch miejscach na stronie.