Jak wykryć Adblocka? Wyświetlanie informacji w przypadku wykrycia
Użytkownik dodając do przeglądarki wtyczkę "Adblock" ukrywa reklamy na naszych stronach. Możemy wyświetlić wówczas mu jakiś komunikat.
Oczywiście zablokowanie części strony, czy wyświetlenie jakiejś informacji to tylko przykład wykorzystania takiego kodu. Sposobów na jego wykorzystanie jest na prawdę wiele.
Jak działa AdBlock?
Wtyczka do przeglądarek o nazwie "AdBlock" posiada swoje filtry. Jeśli na stronie znajdzie zakazany link (element związany z reklamą zdefiniowaną w filtrze jako zakazana) to zablokuje go. Również zablokuje diva, paragraf - jeżeli w klasie odnajdzie wartość zdefiniowaną w filtrze jako zakazaną, na przykład adsbox.
1. JavaScript
Ten sposób polega na zdefiniowaniu bloku div o klasie "adsbox" i nadaniu mu jakiejś wysokości. Jeżeli użytkownik posiada zainstalowaną wtyczkę "AdBlock" to element ten nie zostanie wyświetlony, a poniższy kod JS dokona określonej akcji.
if( document.getElementByClassName('adsbox').offsetHeight == 0 ){
document.write('Posiadasz zainstalowanego AdBlocka.');
} else {
document.write('Nie posiadasz zainstalowanego AdBlocka.');
}
}
2. Wykorzystanie bilbioteki jQuery
Tutaj wykorzystamy bibliotekę jQuery. Trzeba ją mieć załączoną do strony. Poniższy kod, podobnie jak w pierwszym przykładzie, wymaga utworzenia bloku div o klasie "adsbox" i nadania mu jakiejś wysokości. Później sprawdza jego wysokość, jeśli wynosi 0 (czyli AdBlock go zablokował) to pokazuje blok div o klasie "reklama-info".
(function () {
window.setTimeout(function () {
if ($('.adsbox').height() === 0 || $('.adsbox').filter(':visible') === 0) {
$('.reklama-info').show();
}
}, 1000);
})();
Kod HTML:
<div class="adsbox">Miejsce na reklamę</div>
<div class="reklama-info" style="visibility:hidden;">Informacja</div>
Kategorie: HTML + CSS. Tagi: #przeglądarki internetowe, #adblock, #jquery, #javascript. Źródło obrazków: Pixabay, Font awesome.
