Using JS, how can I detect adblockers?

Question

With some simple javascript, how can I detect if the client user is using an Adblocker?

While [self-answering](https://stackoverflow.com/help/self-answer) is encouraged on SO, there are already [several similar questions](https://www.google.com/search?q=detect+ad+blockers+javascript+site:stackoverflow.com). You might want to add your answer there, than creating a new duplicate. — adiga, May 06 '19 at 05:31

score 4 · Answer 1 · answered May 06 '19 at 05:27

Adblockers detect scripts called ads.js or scripts with similar names and then block them so that they don't run. They also detect id's and classes that have suspicious names and simply remove them from the DOM. So here is one simple trick (explanation below) that can help you detect if your user is using an adblocker or not:

<div id="randomDiv">
  <div class="adBanner">
  </div>
</div>

This HTML simply places a random div on your page with only one child, an empty div that has a class of adBanner. Now an adblocker would think of the child div as an advertisement, and it would remove it.

Using CSS, we can give the .adBanner class a fixed height and a fixed width, so that it renders something on the screen.

.adBanner {
  height: 2px;
  width: 2px;
  visibility: hidden;
}

This CSS simply gives our fake "adBanner" element a fixed width and height that we can check for later, and hides it from the user.

Now using jQuery, we can check for the height or the width of the element. We do this because if the adblocker were to remove this element from the DOM, then the height would not exist.

if ($("#randomDiv").height() > 1) {
  console.log("No Adblocker!!");
}
else {
  console.log("An adblocker was detected!!");
}

I'm sure there are other ways to do this, but this is just one of the ways.

Hope this helps!!!

Using JS, how can I detect adblockers?

1 Answers1