Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Jak wykryć AdBlocka?

Kwestia reklam w Internecie to dość śliski temat. Dla jednych reklamy to forma wynagrodzenia za tworzenie wartościowej treści dla drugich powód do frustracji za zbyt nachalne reklamy. Prawdziwa wojna zaczęła się w momencia pojawienia AdBlocka - rozszerzenia do FireFoxa, dzięki któremu można blokować większość reklam na stronach. Dzisiaj pokażę Wam, jak za pomocą kilku linijek kody JS można wykryć czy odwiedzający blokuje reklamy na naszej stronie (i nie tylko).

Nie będę się rozwodził czy warto blokować reklamy czy nie. Pokażę Wam natomiast w jaki sposób można wykryć osobę blokującą reklamy i np. pokazać stosowny komunikat. Wpis powstał pod wpływem wpisu na antywebie o tym jak to gametrade.pl zamierza utrudnić korzystanie ze swojego serwisu wszystkim tym, którzy blokują reklamy. Poszło o ten komunikat na wspomnianym serwisie:

Nie byłoby w tym nic dziwnego, gdyby nie to, że system pokazuje błędne informacje na temat blokowania reklam (jak na powyższym obrazku). Owy komunikat pojawiał się nawet osobom, które nie blokowały reklam.

Powstaje pytanie:

Czy można skutecznie wykryć czy ktoś używa np. AdBlocka?

Jest na to sposób.

Samo wykrycie jest w miarę proste i zrozumiałe. Z punktu widzenia programistycznego (w telegraficznym skrócie), AdBlock ukrywa każdy element, który zawiera w nazwie klasy (lub id) słowo kluczowe. W przykładzie rozwiązania, które przedstawię skupiam się właśnie na wykrywaniu ukrytych przez AdBlocka elementów.

Wystarczy prosty test. Tworzymy element div i w nazwie klasy (class) podajemy jedno z zastrzeżonych słów kluczowych np. adsbox.

Istotnym elementem jest nadanie mu konkretnej wysokości (np. takiej jaka będzie miała reklama). Dlaczego? Cała sztuczka polega na tym, że będziemy sprawdzać wysokość tego elementu.

Teraz za pomocą JS wystarczy sprawdzić czy naszemu elementowi nie zmieniła się wysokość.

var ads = document.getElementsByClassName('adsbox');
for(var i=0, ac=ads.length; i < ac; i++) {
   var el = ads[i];
   if(el.offsetHeight == 0) {
      alert('Blokujesz reklamy!');
   } else {
      alert('NIE blokujesz reklam!');
   }
}

Dlaczego wysokość elementu jest sprawdzana za pomocą offsetHeight a nie za pomocą style.height? Dlatego, że offsetHeight podaje wysokość zawierającą dodatkowo takie dodatkowe wielkości jak padding, border i margin (boxmodel).

Jak widać, wykrywanie blokujących reklamy nie jest takie trudne. Co więcej, taki kod można wykorzystać do różnego rodzaju analiz. Możemy sprawdzić jaki procent odwiedzających naszą stronę blokuje reklamy.

Można jeszcze inaczej

Można zablokować stronę w bardziej wyrafinowany sposób. Wystarczy dodać specjalną klasę do body :). Pytanie tylko czy warto?

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar TonY

16.11.2011 TonY

Ilu użytkowników neta tyle opinii TAK i tyle samo opnie NIE

Gavatar biggy

18.11.2011 biggy

Zastanawiało mnie właśnie jak takie coś zrobić. Sam kilka razy nadziałem się na bloga, którego autor prosił stosownym komunikatem o usunięcie blokowania reklam, lub jego blog wyświetlał się niepoprawnie. To dało mi trochę do myślenia :P

Gavatar asti

21.11.2011 asti

Świetny poradnik, przyda się do przygotowywanej właśnie stronki ;) Dzięki i pozdrawiam.

Gavatar Dami95

28.01.2012 Dami95

A gdyby za pomocą jQuery po prostu sprawdzić:
if($('.adsbox:visible').length == 0) {
//AdBlock wyłączył widoczność elementu o klasie .adsbox
}

Gavatar ket

07.06.2013 ket

Instalujemy dodatek do Firefoxa NoJavaScripts. I w ten sposób obchodzimy blokadę założoną w ten sposób. Nie ma aktualnie metody, który w 100% zablokuje dostęp osobom posiadającym AdBlock-a. Dlatego dodając ten kod na swojej stronie zastanów się drogi webmasterze, czy takie działanie ma sens?

Gavatar Damian

30.07.2013 Damian

Gdyby strony w szczególności portale nie były przeładowane reklamami podobnie jak telewizja to nie powstałyby taakie narzędzie jak adblock. Nie byłoby po prostu sensu.

Gavatar hej

12.08.2013 hej

a gdy wszyscy reklamowcy padną a internauci będą mieć ich nadal w dupie ?

Gavatar odp: hej

10.12.2013 odp: hej

reklamodawcy NIE PADNĄ, wierz mi. tak długo jak użytkownicy będą blokować, tak długo reklamodawcy (w tym również np.osoby emitujące reklamy) będą z tym walczyć

Gavatar duchu

05.03.2015 duchu

Problem polega niestety na tym, że mamy takie społeczeństwo jakie mamy. Nastawienie, że co w internecie to za darmo i nikt nie ma prawa cokolwiek zarobić na stworzonej stronie czy blogu. Ja u siebie mam uBlock i używam go tylko na stronach które według mnie przesadzają z ilością bądź agresywnością reklam. Na tą chwilę statystyki pokazją 54k zablokowanych reklam. Jedna i druga strona powinna zmienić swoje podejście, pytanie tylko czy to jest w ogóle możliwe :)

Gavatar gieniu

29.04.2015 gieniu

Zgadzam się z tym. Najlepszym motorem jest kawasaki

Dodaj komentarz