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?

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

 

 

TABLE OF CONTENTS

 

 

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

 

 

 

TUTORIAL VIDEO

 

METHOD 1) LOAD AN ADVERTISEMENT LIBRARY

// 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

<!-- 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

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

<!-- 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>

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) DISPLAY A MESSAGE

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

• How To: Detect Ad Blockers – JonathanMH
• Detect AdBlock using HTML CSS & JavaScript – CodingNepal on DEV
• How to detect Adblock on my website – StackOverflow