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

Click here to download | Example on CodePen

The example code is released 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.

 

 

EXTRAS

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 wipes the entire page and shows the message only.

 

WHICH IS THE BEST METHOD?

  • AdBlockers are getting smarter, these methods will not work with 100% accuracy.
  • Personally, “load an actual ad library” seems to be the most reliable – An AdBlocker will seemingly always block an ad library.
  • Nobody is stopping you from implementing all of the above checks and getting a “pretty good hit rate”.

 

 

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.
  • 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.

 

INFOGRAPHIC CHEATSHEET

Detect Adblocker In JS (Click To Enlarge)

 

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!

2 thoughts on “3 Ways to Detect AdBlockers in Javascript (Simple Examples)”

  1. #TROLL #ENTERTAINMENT Ignore this thread if you want useful comments only.

    So where’s your LIVE example to prove that your code works before people waste their time downloading something that doesn’t?
    Tip: Don’t ask for coffee unless you do your job right.

    1. 1) AS ABOVE – There’s an example on CodePen and even a tutorial video???

      2) AS ABOVE – See the CREDIT in the snippets? This is a compilation of common methods all over the Internet. Just test and decide which is good for yourself?

      3) AS ABOVE – AdBlockers are getting better these days (thanks to YouTube). None of these methods will work 100%, you can always use all 3 together for better results.

      4) Next time you find a TUTORIAL WITHOUT DEMO on the Internet, remember that nobody owes you an explanation or need to “prove” anything – https://code-boxx.com/faq#nodemo

      TOP TIP) Please continue to not read, and don’t use your brains. It’s fun to see self-entitled pricks embarrass themselves. 😆

Comments are closed.