DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to detect AdBlock in plain JavaScript with a few lines of code
Ondrej Sevcik
Ondrej Sevcik

Posted on • Originally published at ondrejsevcik.com

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

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:

  1. 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.
  2. Preferably also add aria-hidden="true" to not show this fake ad to users who use accessibility tools.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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 (7)

Collapse
 
ngnmtl profile image
Engin Mutlu • Edited on

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

it usually works

Collapse
 
fyodorio profile image
Fyodor

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

Collapse
 
decker67 profile image
decker

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

Collapse
 
ravavyr profile image
Ravavyr • Edited on

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.

Collapse
 
decker67 profile image
decker • Edited on

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.

Thread Thread
 
ravavyr profile image
Ravavyr

i believe that is correct, i was just answering your question :)

Collapse
 
ethand91 profile image
Ethan

Thanks! Definitely have to try this out. πŸ‘€

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.