Detect AdBlocker using JavaScript

by

Hello Developers, If you need to integrate the adblocker detector into your website, then you are at the right place. here you will learn to detect adblocker using javascript with complete source code & step by step explanation. Also, you will know everything about the working & usages of an adblocker extension.

Most of the users enable adblocker extensions in their web browsers to block ads. If you run ads/advertisements on your website, then you must protect ads from adblocker. Otherwise, you will not be able to generate high revenue.

So, You have the best solution to use my adblocker detector script that can detect the adblocker and display a notice with a popup. After that, the users will have to disable the adblocker. otherwise, they will not be able to read your website content. In this way, you will not lose your expected earnings from the advertisement company.

detect adblocker using javascript

JavaScript AdBlocker Detector

Now, Let’s start to Create an adblocker detector with javascript from the next steps. You can use the given code directly in your project. before it, you should understand its working, usage & concept. After learning it, you can also customize this code according to you.

Learn more –

Detect Internet Connection Using JavaScript

JavaScript Password Strength Checker

Create Cookie Consent Popup in JavaScript

1. Create AdBlocker Popup using HTML

You can add this HTML code within the <body> tag of your web page. But before it, you have to understand its some basic points –

  • A div with id=”adBlockerClasses” is created to add some adblocker classes
  • A div with id=”adBlockerPopup” is created to create a popup for displaying a notice to disable the ad blocker
  • you can write some information about disabling adblocker within the heading & paragraph tag
  • button with id=”okAdBlockerBtn” is created for hiding popup if users agree to disable adblocker
<div id="adBlockerClasses"></div>
<div id="adBlockerPopup">
  <h3>AdBlock Detected!</h3>
  <p>Our website needs to display ads to our users. Please, support us by disabling adBlocker from your Browser</p>
  <button id="okAdBlockerBtn">Okay, I'll Disable</button>
</div>

2. Design AdBlocker Popup using CSS

I have written this CSS code to design a simple & user-friendly adblocker popup. So, you can use it otherwise you can also add more CSS code.

  <style type="text/css">
    #adBlockerPopup{
      opacity: 0;
    }
    #adBlockerPopup.show{
      opacity: 1;
    }
  #adBlockerPopup{
    position: fixed;
    left: 30%;
    top: 30%;
    background: #dcdcdc;
    color: #584f4f;
    text-align: center;
    padding: 20px;
    width: 27%;
    font-size: 16px;
    box-shadow: 0px 0px 15px #151414b5;
  }
  #okAdBlockerBtn{
    background-color: #dc0202;
    color: white;
    padding: 10px;
    border: 0px;
    cursor: pointer;
  }
  h3{
    color: #dc0202;
    font-size: 25px;
    margin: 0px;

  }
  </style>

3. Detect AdBlocker Using JavaScript

You must use this code as it is given. But before using it, you have to understand it through the following points –

Access HTML elements –

  • I have assigned a div to a variable the adBlockerClasses by “adBlockerClasses”
  • I have assigned another div to a variable the adBlockerPopup by “adBlockerPopup”
  • Even I have assigned a button to a variable the okAdBlockerBtn by “okAdBlockerBtn”

Write a script to execute on loading the web page –

Call the addClasses() and detectAdBlocker() function within window.addEventListener() to execute on load event.

Write a script to hide the adblocker on clicking a button –

When a web page is fully loaded then the class show will be added to the parent div (that id is adBlockerPopup). So, we have applied click event with window.addEventListener and ad a single line code to remove show class.

Define addClasses() and detectAdBlocker() function –

addClasses() – this function will ad some adblocker classes to the div (that id is adBlockerClasses) while the page will be loaded successfully

detectAdBlocker() – This function will show detect an adblocker and show a notice with popup if the adblocker is ebabled in the user’s web browser.

<script>
let adBlockerClasses = document.getElementById("adBlockerClasses");
let adBlockerPopup = document.getElementById("adBlockerPopup");
let okAdBlockerBtn= document.getElementById("okAdBlockerBtn");

window.addEventListener('load', function(event){
    addClasses();
    detectAdBlocker();
});

window.addEventListener('click', function(event){
  adBlockerPopup.classList.remove('show');
});

function addClasses(){

  let adsClasses = ['ad', 'ads', 'adbadge', 'doubleclick', 'BannerAd', 'adsbox', 'ad-placeholder', 'ad-placement'];
adsClasses.forEach(function(className){
       adBlockerClasses.classList.add(className);
})
}

function detectAdBlocker(){
if(!adBlockerPopup.classList.contains('show')){
   let getPropertyValue = window.getComputedStyle(adBlockerClasses).getPropertyValue('display');
        getPropertyValue== "none" ? adBlockerPopup.classList.add("show") : adBlockerPopup.classList.remove("show");
}
}
  </script>

4. Run AdBlocker Script on Web Browser

After implementing previous steps, open your page in the web browser and test yourself its working by enabling & disabling your adblocker extension