chevron-left chevron-right

[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.

  • Przypomniał mi się bardzo fajny artykuł na podobny temat http://christianheilmann.com/2014/02/02/why-just-use-adblock-should-never-be-a-professional-answer/ – trochę naświetla cały kontekst i konsekwencje tej sytuacji

  • Piotr

    Wyświetlenie krótkiego, niezbyt nachalnego info o blokowaniu reklam to moim zdaniem super rozwiązanie. Jak większość mam AdBlocka odpalonego na wszystkich stronach ale jeżeli jakąś cenię i wiem że reklamy faktycznie nie są nachalne to mogę go wyłączyć i dać zarobić autorowi.

    P.S +U Ciebie właśnie wyłączyłem 😉

  • Fajny tekst, aczkolwiek z tym blokowaniem dostępu do strony, czy ostrzeżeniami niestety trzeba uważać.
    Internauci wciąż bardzo często „obrażają się”, jeśli autor strony a nuż próbuje cokolwiek sobie dorobić…

    Wciąż pokutuje spore przekonanie o „darmowości” internetu, ale to już chyba raczej temat na zupełnie inny tekst…

  • Adrian Stolarski

    Piotrek, ale dzisiaj wyskakujące okienka to przeżytek. Patrząc na ustability stron internetowych, to bardzo zły sposób na zachęcanie ludzi do odwiedzania danej strony internetowej. Ja osobiście zwykle zamykam strony, gdzie cały czas mi coś tam lata 😉

  • Nie byłbym taki pewien czy to jest przeżytek. Poza tym, są jeszcze inne formy nachalnej reklamy, np. reklama video. W bardzo wielu miejscach w sieci internetowej usability nie zawsze idzie w parze z intencjami właściciela strony.

  • Maciej

    Przydatny tekst. Ale mam jedno pytanie: jak dodać tą informację z prośbą o wyłączenie adblocka? W której linijce to zmienić?

  • Na bazie przykładu, który zaprezentowałem powyżej, musisz w kodzie strony zamieścić jakikolwiek element HTML (np. div lub p) z klasą „no-ads-info” i w tym elemencie powinien pojawić się tekst z informacją dla użytkownika.
    Akurat ta część nie miała nic wspólnego z JS, dlatego nie było potrzeby go opisywać.

  • Maciej

    Jeszcze jedno pytanie. Przepraszam, ale jestem w tym zupełnie zielony. 🙂 Gdzie umieścić ten skrypt Java?

  • Po pierwsze, to nie jest skrypt Java tylko Javascript. Różnica jest znacząca. To są dwa osobne języki.
    Po drugie, skrypt należy wstawić w znaczniku HTML script przed tagiem końcowym body.

  • Czy nadal działa? bo art z 2014

  • Powinno działać. Jednakże wprowadziłbym kilka poprawek. Nie nazwałbym kontenera na reklamy żadnym słowem wiążącym się ze słowem ad lub reklama, bo może zostać usunięty przez AdBlocka. Generalnie skrypt się dalej powinien sprawdzać.