Detect AdBlock using HTML CSS & JavaScript

22

AdBlock Detector JavaScript

Hey friends, today in this blog you’ll learn how to Detect AdBlock using JavaScript. In the earlier blog, I shared how to Detect Internet Connection Status using JavaScript and now it’s time to create a popup box using JavaScript that detects AdBlocker.

AdBlocker is a content filtering or web browser extension that blocks different online ads from interrupting your browsing experience. It helps the user prevent unintended pop-ups, flashing banners, and online advertisements from being displayed.

I don’t recommend you use AdBlocker on a free site like ours, where the main income source is displaying ads and giving you helpful content, because the website needs money to stay free, and that’s only possible if you view or click on their ads.

In our program [Detect AdBlock using JavaScript], as you can see in the preview image, there is a popup box with some text and a button to dismiss the popup. If the user has enabled AdBlocker, then this popup will be displayed; if not, then this popup will not be displayed.

Video Tutorial of Detect AdBlock using JavaScript

 
In the video, you’ve seen what this Adblock Detector looks like and how I created it using only HTML, CSS, and JavaScript. The codes and concepts behind creating this detector are so simple that even a beginner can easily understand them. When AdBlocker is enabled, it prevents some classes, ids, and scripts from being rendered on the user’s browser.

Here are some classes ad, ads, ad-banner, ad-box, ad-badge that AdBlocker adds display: none; property to hide from the visitors. So we’ve created an element and added these classes to it and checked what this element is returning.

If AdBlocker is enabled, then obviously it’ll return “display: none,” because adblocker will add a “none” value to hide it, and if adblocker is not enabled, then it returns “display: block.”

You might like this:

Detect AdBlock using JavaScript [Source Codes]

To create this program [Detect AdBlock using JavaScript]. First, you need to create two files: one HTML and another CSS file. After creating these files, just paste the following codes into your file. You can also download the source code files of this adblock detector from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Detect AdBlock using JavaScript | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div id="detect"></div>
  <div class="wrapper">
    <div class="content">
      <div class="warn-icon">
        <span class="icon"><i class="fas fa-exclamation"></i></span>
      </div>
      <h2>AdBlock Detected!</h2>
      <p>Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.</p>
      <div class="btn">
        <div class="bg-layer"></div>
        <button>Okay, I'll Whitelist</button>
      </div>
    </div>
  </div>

  <script>
    const detect = document.querySelector("#detect");
    const wrapper = document.querySelector(".wrapper");
    const button = wrapper.querySelector("button");

    let adClasses = ["ad", "ads", "adsbox", "doubleclick", "ad-placement", "ad-placeholder", "adbadge", "BannerAd"];
    for(let item of adClasses){
      detect.classList.add(item);
    }
    let getProperty = window.getComputedStyle(detect).getPropertyValue("display");
    if(!wrapper.classList.contains("show")){
      getProperty == "none" ? wrapper.classList.add("show") : wrapper.classList.remove("show");
    }
    button.addEventListener("click", ()=>{
      wrapper.classList.remove("show");
    });
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
}
::selection{
  color: #fff;
  background: #9b27ca;
}
.wrapper{
  position: absolute;
  max-width: 480px;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 40px 30px;
  background: #fff;
  border-radius: 15px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 10px 10px 15px rgba(0,0,0,0.06);
  transition: opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
}
.wrapper.show{
  opacity: 1;
  pointer-events: auto;
  transform:translate(-50%, -50%) scale(1);
}
.wrapper .content,
.content .warn-icon,
.warn-icon .icon{
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .content{
  flex-direction: column;
}
.content .warn-icon{
  height: 115px;
  width: 115px;
  border-radius: 50%;
  background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
}
.warn-icon .icon{
  height: 100px;
  width: 100px;
  background: #fff;
  border-radius: inherit;
}
.warn-icon .icon i{
  background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 50px;
}
.content h2{
  margin-top: 35px;
  font-size: 32px;
}
.content p{
  font-size: 19px;
  text-align: center;
  margin-top: 20px;
}
.btn{
  height: 57px;
  width: 223px;
  margin-top: 30px;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
}
.btn .bg-layer{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(135deg, #9b27ca, #d33639, #9b27ca, #d33639);
  transition: all 0.4s ease;
}
.btn:hover .bg-layer{
  left: 0;
}
.content button{
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: none;
  font-size: 18px;
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
}

That’s all, now you’ve successfully created an AdBlock Detector using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

Previous articleAnimated Pricing Card Design using HTML & CSS
Next articleResponsive Drop Down Menu with Sub Menu in HTML & CSS | Free Source Code

22 COMMENTS

  1. i need your help

    i bought a blogger template but locked to only on domain name if i upload to another domain it’s redirect to blank page

  4. Thanks.

    I been wondering how to make blocker a bit different. Lets say instead of annoy visitors with huge poping banner i can put image instead of blocked ads?

    Any solutions?

  8. I love your blog!
    I have a question, how to make beautiful post images like yours?
    What kind of software you used to make images, it is Photoshop, Canva or what?
    Please explain to me, I’d like to learn your lesson. Thanks. Much respect from Indonesia.

  9. Hai Bro!!!
    Thanks for sharing this wonderful code which work like charming!!
    when I used this with my wordpress I can detect the uBlock or Adblock in desktop version!

    But when try to detect using mobile FIREFOX browser which not detect the uBlock add-on so kindly please help me bro!!!

    And mostly all the adblock detect scripts are not working!
    After did a reaseach ur code only working but thats also not working with mobile !
    So kindly make a fix and help us!

    for reference please look into decode the DEblocker wordpress plugin which is the only script presently work with uBlock!
    But for non wordpress user like me its difficult!
    So kindly please help us bro!!!

    • Hello, this is just a small Adblock detector and made for only learning purposes. Different AdBlock extensions used different techniques to detect ads and block them and this Adblock detector has only one way to detect an adblocker extension and that I already explained in this blog.

      When I was making this AdBlock Detector I didn’t think that mobile visitors have also enabled the AdBlocker add-on. So I didn’t give priority to this AdBlocker for the mobile version and also didn’t code for it. At that time, I thought this detector can detect on the mobile version too but it didn’t. In the future, maybe I’ll make another AdBlock Detector that will detect on mobile devices also. Hope you understand!

  11. Hello, just had a problem that when I put the same code, the main container did not show, I don’t want to detect AdBlock, just liked the look of this, so just wanted the normal html *EXLUDING THE ADBLOCK DETECT CODE (Java, other…), HOPE YOU HAVE SOME SOLUTION*

    • I’ve added code to hide this popup in case AdBlocker is disabled. You need to open this html file using the live server to check this AdBlock Detector is properly working or not but if you don’t want to detect AdBlock then you’ve to modified some JS codes. Due to some reason, I can’t comment codes here so please contact me through the contact page.

LEAVE A REPLY

Please enter your comment!
Please enter your name here