Jak wykryć AdBlocka?
Opublikowany: 14.11.2011 15:41:43 | Komentarzy 4
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?
Komentarze
if($('.adsbox:visible').length == 0) {
//AdBlock wyłączył widoczność elementu o klasie .adsbox
}
Dodaj komentarz