3 Ways to Detect AdBlockers in Javascript (Simple Examples)

Welcome to a tutorial on how to detect AdBlockers with Javascript. Having trouble with AdBlockers and want to recover some of those lost revenue?

The common ways to detect adblockers in Javascript are:

  • Attempt to load the headers of an ad library, check if the request is blocked.
  • Load a dummy Javascript ad library, check if the request is blocked or removed.
  • Insert a dummy ad, check if it is removed when the page loads.

Just how are these done exactly? Read on for the actual examples!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist | Example on CodePen

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

JAVASCRIPT ADBLOCK DETECTION

Alright, let us now get into the various ways and examples of AdBlock detection in Javascript.

 

TUTORIAL VIDEO

 

METHOD 1) LOAD AN ADVERTISEMENT LIBRARY

1-load-lib.html
// CREDITS: https://jonathanmh.com/how-to-detect-ad-blockers-adblock-ublock-etc/
window.addEventListener("load", () => {
  fetch(
    "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
    // "https://www3.doubleclick.net",
    // "https://static.ads-twitter.com/uwt.js"
    { method: "HEAD", mode: "no-cors", cache: "no-store" }
  )
  .then(res => alert("ADS ALLOWED"))
  .catch(err => alert("ADBLOCK DETECTED"));
});
  • The idea behind this first method is simple – We try to load an actual ad library and check if the request is blocked.
  • Of course, we are not going to load the entire library, but just to request the headers – { method: "HEAD", mode: "no-cors", cache: "no-store" }.

 

 

METHOD 2) INSERT DUMMY AD

2A) HTML & CSS

2-dummy-ad.html
<!-- CREDITS : https://dev.to/codingnepal/detect-adblock-using-html-css-javascript-dkh -->
<!-- (A) DUMMY AD -->
<div id="adTest"
     class="ad ads adsbox doubleclick ad-placement ad-placeholder adbadge BannerAd"
     style="position:fixed;bottom:0;left:0;width:100%;height:1px;"></div>

What do adblockers do? They block everything that looks like an ad. In this method, we insert an “invisible” dummy ad into the HTML page and check if it is blocked.

  • Add a dummy <div id="adTest"> and give it a whole load list of “this is an ad” CSS classes.
  • To make this dummy ad “invisible”, we will give it a height of 1px and fix it at the bottom of the screen.
  • Take note, do not use display: none or visibility: hidden. The dummy ad must be visible and present on the page, just make it unnoticeable to the human eye.

 

2B) THE JAVASCRIPT

2-dummy-ad.html
<!-- (B) CHECK DUMMY AD -->
<script>
window.addEventListener("load", () => setTimeout(() => {
  let test = document.getElementById("adTest");
  if (window.getComputedStyle(test).getPropertyValue("display")=="none") {
    alert("ADBLOCK DETECTED");
  } else {
    alert("ADS ALLOWED");
  }
  test.remove();
}, 2000));
</script>

This is where the detection magic happens. After the page is fully loaded, we check if the dummy ad is still around by checking the display. Yep, if it is removed by adblockers, then it will have display: none.

 

 

METHOD 3) LOAD DUMMY AD LIBRARY

3-load-dummy.html
<!-- CREDIT : https://stackoverflow.com/questions/4869154/how-to-detect-adblock-on-my-website -->
<!-- (A) WILL SET VAR ADALLOW IF ALLOWED TO LOAD -->
<script src="ads-prebid-wp-banners.js"></script>
 
<!-- (B) RESULT -->
<script>
window.addEventListener("load", async () => {
  if (window.adallow===undefined) {
    alert("ADBLOCK DETECTED!");
  } else {
    alert("ADS ALLOWED!");
  }
});
</script>
ads-prebid-wp-banners.js
var adallow = true;

This is a follow-up from the previous methods, but we try to load a dummy ad script instead.

  • In ads-prebid-wp-banners.js we set a very simple flag – adallow = true.
  • If adallow === undefined after the page loads, we know the dummy ad script has been blocked.

 

 

EXTRA BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

EXTRA) DISPLAY A MESSAGE

4-message.html
window.addEventListener("load", () => {
  fetch(
    "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
    { method: "HEAD", mode: "no-cors", cache: "no-store" }
  )
  .catch(err => {
    let msg = document.createElement("div");
    msg.id = "nag";
    msg.style.cssText = "position:fixed;top:0;left:0;z-index:999;box-sizing:border-box;width:100vw;height:100vh;padding:10px;background:#00f;color:#fff;font-size:24px";
    msg.onclick = () => document.getElementById("nag").remove();
    msg.innerHTML = `YOUR MESSAGE HERE.`;
    document.body.appendChild(msg);
  });
});

One last bit for the beginners – Here’s a simple example of how to display a message on detecting an Adblock.

  • If you are unfriendly, remove msg.onclick… The message covers the entire screen and cannot be dismissed.
  • If you are very unfriendly, add document.body.innerHTML = "" before appending the message. This literally wipes the entire page and shows the message only.

 

WHICH IS THE BEST METHOD?

Personally, “load an actual ad library” seems to be the most reliable. But of course, nobody is stopping you from implementing multiple checks.

 

 

WIN THE AUDIENCE, NOT BY USING FORCE.

  • Try not to “hard lock” the entire page on detecting an AdBlocker.
  • Ads are annoying, it is even more annoying when someone locks the content – People just lose interest and go to the next search result instantly.
  • Just serve a non-intrusive reminder to whitelist your website. That’s all. Let your audience have their information. Win them sincerely, and they will help you back in return.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

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