Adblock Detection – Detect visitors with Adblocker

Adblock Detection – Detect visitors with Adblocker

You advertise on your website but don’t generate any revenue? With this Adblock Detection script you (or your administrator) can recognize an adblocker and react accordingly.

Adblockers are browser extensions that block banner ads and pop-ups. For the visitor this is very pleasant, but for website operators the revenue is very annoying. Many sites therefore block their content completely for users of adblockers. A German example is bild.de.

Here I provide you with a script that you can use to see if a visitor is using an adblocker. Whether you give the user access completely or just give him a nice hint is up to you.

See the Pen Pure JavaScript Adblock Detection by WebDEasy (@WebDEasy) on CodePen.

The principle

The script is structured in such a way that we simulate an ad banner to the browser and then check whether our fake ad banner has been removed or is still visible.

Furthermore a timeout is built in, so that the page is loaded ready. Alternatively you can use the JavaScript DOMContentLoaded Event.

setTimeout(function() {

  var adblockEnabled = false;
    
  // add test element and get its styles
  document.body.innerHTML += '<div class="adBanner"></div>';
  var adElement = document.getElementsByClassName('adBanner')[0];
  var adElementStyle = getComputedStyle(adElement, null);


  if(adElementStyle.display === 'none') {	// Adblock enabled
    document.getElementsByClassName('message')[0].innerHTML = 'Adblock detected!';
    document.getElementsByClassName('message')[0].classList.add('ab');
  } else {	// Adblock disabled
    document.getElementsByClassName('message')[0].innerHTML = 'Adblock disabled! :)';
    document.getElementsByClassName('message')[0].classList.add('no-ab');
  }

}, 1500);

You can use the marked lines in my demo version to perform your own actions. Complete hiding of the content or a nice hint are common possibilities here.

Conclusion

When using this script, you should consider whether you want to hide the content directly or just give the user a nice hint. In any case, it makes sense to include instructions or at least a link to temporarily deactivate the adblocker.

I hope the contribution has helped you and I would be happy about a repeated visit on this side! 🙂

NEW 🚀
NEW 🚀
NEW 🚀

Leave a comment

Your email address will not be published. Required fields are marked *