How to detect AdBlock in plain JavaScript with a few lines of code

#javascript #webdev #adblock #html

Using analytics tools to measure the impact of your application is part of every website these days.

But measuring how many of your users block your analytics is probably even more important.

And luckily, it’s not that difficult to figure it out.

How it works

In a nutshell - you need to add a fake advertisement div to your website and check if it is visible or not.

In practice:

Add an empty div that’s positioned in the top right corner of your website. That way, it won’t bother users who don’t use AdBlock.
Preferably also add aria-hidden="true" to not show this fake ad to users who use accessibility tools.
Once the page is loaded, check whether this fake advertisement div is visible or not.

<div class="ad-box" style="position:fixed;top:0;left:0;" aria-hidden="true">
  &nbsp;
</div>
<script>
  setTimeout(function () {
    var adBoxEl = document.querySelector(".ad-box")
    var hasAdBlock = window.getComputedStyle(adBoxEl)?.display === "none"
    // ... save to DB
  }, 2000)
</script>

The way most AdBlocks work these days is that they target specific CSS classes (like class="ad-box") and apply display: none on it. That way, the Ad disappears in your browser.

Always double-check that you don’t break the experience for users that do not use AdBlock.

You can see all the CSS classes that are used for blocking in EasyList blocklist.

Top comments (8)

Engin Mutlu • Sep 11 '22 • Edited

setTimeout(function() { fetch('https://www3.doubleclick.net', { method: "HEAD", mode: "no-cors", cache: "no-store", }).catch(()=>{ alert("detect AdBlock") }); }, 3500);
it usually works

undqurek • Nov 29 '23

I have tested different solution. Some old solutions stopped working - AD Blocks are able to go around detection.

I recommend this approach: dirask.com/posts/JavaScript-detect...

The solution works with:

uBlock Origin
AdBlock
AdBlock Plus
etc.

Fyodor • Sep 11 '22

Just don’t go to the dark side of the corresponding un-adBlocking popups using this power please

decker • Sep 10 '22

Why using computed style? Is it possible to set display none and it's visible?

Ravavyr • Sep 12 '22 • Edited

computed style is the "final" style applied. You could have 20 css rules targeting the same elements plus javascript modifying it after that too. Computed gives you the final applied styling.

decker • Sep 12 '22 • Edited

Yes I understand but if you requests the real node in the DOM itself, means the JavaScript object it should say the same or am I wrong? So no need to use getComputedStyle from window.

I did not want to know what style is applied, I want to no the actual style and that counts.