4 Ways to Detect AdBlockers in Javascript (Simple Examples)

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

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

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

METHOD 1) LOAD AN ADVERTISEMENT LIBRARY

window.addEventListener("load", () => {
  // (A) TEST FETCH HEADER REQUEST TO GOOGLE ADSENSE
  let test = new Request(
    "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
    // "https://static.ads-twitter.com/uwt.js",
    { method: "HEAD", mode: "no-cors" }
  );
 
  // (B) FIRE THE REQEST
  fetch(test)
  .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 new Request("AD LIBARARY") 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" }.

Credits to JonathanMH for this wicked smart method.

 

 

METHOD 2) INSERT DUMMY AD

2A) HTML & CSS

<!-- (A) YOUR CONTENTS -->
<div>Hello World!</div>
 
<!-- (B) DUMMY AD TESTER AT THE BOTTOM -->
<div id="adTester" style="background-color: transparent; height: 1px; width: 1px;"></div>

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

• Add a dummy <div id="adTester"> at the bottom of the page.
• To make this dummy ad “invisible”, we will give it a width and height of 1px and background-color: transparent.
• Take note, it is not advised to 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

window.addEventListener("load", () => {
  if (document.getElementById("adTester").clientHeight == 0) { alert("ADBLOCK DETECTED!"); }
  else { alert("ADS ALLOWED!"); }
});

This is where the detection magic happens. After the page is fully loaded, we will check if the dummy ad is still around by reading the height. Yep, if it is indeed removed by any adblockers, then it will have a clientHeight of 0.

 

 

METHOD 3) LOAD DUMMY AD LIBRARY

<!-- (A) SET "BLOCKED" STATUS -->
<script>var blocked = true;</script>
 
<!-- (B) THIS WILL SET TO "UNBLOCKED" IF ALLOWED TO LOAD -->
<script src="3b-ads.js"></script>
 
<!-- (C) RESULT -->
<script>
if (blocked) { alert("ADBLOCK DETECTED!"); }
else { alert("ADS ALLOWED!"); }
</script>

blocked = false;

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

• We start with a var blocked = true.
• So if <script src="3b-ads.js"> is allowed to load, this will be set to false.

P.S. You can call your dummy library anything you want, so long as it contains “ad” – my-ad.js bid-ads.js pre-ads.js.

 

 

4) USE BLOCKADBLOCK LIBRARY

<!-- (A) LOAD BLOCKADBLOCK -->
<!-- https://github.com/sitexw/BlockAdBlock?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/blockadblock/3.2.1/blockadblock.js"></script>
  
<script>
// (B) LOADING OF THE BLOCKADBLOCK IS DISRUPTED. WE TAKE IT THAT AS "ADBLOCKED".
if (typeof blockAdBlock === "undefined") { alert("ADBLOCK DETECTED!"); }
 
else {
  // (C) USE THE LIBRARY TO CHECK FOR BLOCKERS
  blockAdBlock.onDetected(() => alert("ADBLOCK DETECTED!"));
 
  // (D) OPTIONAL - OK, NOT BLOCKED
  blockAdBlock.onNotDetected(() => alert("ADS ALLOWED!"));
}
</script>

Finally, there is a detection library called BlockAdblock… Funky name, but simply load the library and use it to check for AdBlockers.

 

 

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.

If you use an AdBlocker you should have noticed by now – I am not using any detection, nor do I lock the page by force. Some people think that locking the page and asking to allow ads can recover some lost ad revenue, but I don’t think that is a good idea at all. Most people will just lose interest and go to the next search result instantly. Myself included.

When search engines see an increase in the number of users bouncing away in a few seconds… That is not a good signal for SEO in the long run. So my recommendation is to show 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 CHEAT SHEET