[JavaScript] Jak sprawdzić czy Adblock jest włączony?

Adblock działa na zasadzie filtrowania zawartości stron internetowych. Wykorzystuje listy filtrów, które zawierają reguły dotyczące elementów, które mają zostać zablokowane. Te reguły opierają się na różnych czynnikach, takich jak adresy URL, klasy CSS, identyfikatory, atrybuty elementów itp. Gdy użytkownik odwiedza stronę, Adblock analizuje kod i porównuje go z regułami z list filtrów. Jeśli element na stronie pasuje do reguł blokowania, Adblock usuwa go z widoku, co skutkuje brakiem wyświetlania reklam.

Jest kilka sposobów na sprawdzenie czy Adblock jest włączony. W tym wpisie zaprezentuje dwa rozwiązania. Należy jednak pamiętać, że działanie różnych Adblocków może się od siebie różnić i niekoniecznie sposoby tu przedstawione mogą zadziałać.

Metoda 1

Ta metoda to dynamiczne utworzenie jakiegoś elementu div z klasą np. "ad" i nadanie mu właściwości display: block. Jeśli Adblock będzie włączony taki div nie zostanie wyświetlony, a przeliczone style dlatego elementu będą miały ustawioną właściwość display na none. Następnie wystarczy tylko w warunku sprawdzić, czy element "ad" ma styl display: none. W celu pobrania przeliczonych stylów trzeba użyć funkcji getComputedStyle(). Zobacz poniższy przykład:

var adBlockEnabled = false;
var adDiv = document.createElement('div');
adDiv.innerHTML = ' ';
adDiv.className = 'ad';

document.body.appendChild(adDiv);

if(getComputedStyle(adDiv).display === 'none'){

  adBlockEnabled = true;
  
}

document.body.removeChild(adDiv);

alert('Zmienna adBlockEnabled = ' + adBlockEnabled);

Metoda 2

Kolejna metoda polega na sprawdzeniu, czy skrypt reklamowy został załadowany. Zobacz poniższy przykład:

var adBlockEnabled = false;
var adScript = document.createElement('script');
adScript.src = 'https://example.com/path/to/ads.js';

document.body.appendChild(adScript);

adScript.onerror = function() {
  adBlockEnabled = true;
  alert('Adblock jest włączony!');
};

document.body.removeChild(adScript);