How to detect Adblocker using JavaScript ?

Last Updated : 05 Mar, 2021

In this article, we will be developing an adblocker detector using JavaScript. Adblocker is an extension that is used to block the ads which are served by the website. Adblocker blocks the DOM and the script which has the code to show ads. The adblockers have massive data of blocklist file names and the adblockers detect if the website is using any files from them, It restricts that file from downloading, so the ad script does not load. easylist.text is a huge list of blocklists that contains most of the adblocking file names.

According to a survey, 10% of people use adblocker for browsing with any ads. It means 10% less revenue by the website. This is sad for the websites that solely rely on ads, some of them use adblocker detecting script and restrict the user to enter the website without disabling the adblocker (But this is a bad idea from an SEO point of view).

Detect adblocker using bait script: In this method, you have to create a div with the class name ad-zone. Make the div 1px height. Now write a script that checks if the offset height of parent div becomes zero, then the user is using an adblocker. The adblocker blocked that div from rendering, so the offset height becomes zero. If the offset height of the div remains unchanged then there is no adblocker present in the browser. The reason is the class name ad-zone, the adblocker used to inspect which element has the class name that looks like an ad.

The easylist.text has a huge list of such class names. Every adblocker has its own set of class names which will be blocked that’s why we should not rely on only one class name. Some common class names are textads, banner-ads, banner_ads, ad-unit, ad-zone, ad-space which are detected by the adblocker for an ad.

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
     
  <style> 
    .ad-zone{ 
      height: 10px; 
    } 
  </style> 
    
</head> 
<body> 
  <h1> 
    <center>GeeksforGeeks</center> 
  </h1> 
  <center> 
    <p id="msg">checking for adblocker...</p> 
  
  </center> 
    
  <div 
     class="ad-zone ad-space ad-unit textads banner-ads banner_ads"> 
  </div> 
    
</body> 
</html>

Javascript

let x = document.querySelector(".ad-zone"); 
   let x_height = x.offsetHeight; 
   let msg = document.getElementById("msg") 
     
   if(x_height){ 
     msg.innerText = "No Adblocker detected"
   } else{ 
     msg.innerText = "Adblocker detected"
}

Output :

We are running our code on jsbin.com and using the extension AdBlock. When the adblocker is running, the following output can be seen.
When the adblocker is turned off for jsbin.com, the following output can be seen.

Example 2: The following code can be used in any webpage under the <script> tag.

Javascript

let fakeAd = document.createElement("div"); 
  fakeAd.className =  
  "textads banner-ads banner_ads ad-unit ad-zone ad-space adsbox"
      
  fakeAd.style.height = "1px"
    
  document.body.appendChild(fakeAd) 
    
  let x_width = fakeAd.offsetHeight; 
  let msg = document.getElementById("msg") 
    
      
    if(x_width){ 
      console.log("No AdBlocker Detected") 
    }else{ 
      console.log("AdBlocker detected") 
    } 