How To Create AdBlock Detector using HTML & JavaScript

Hey Everyone, today in this tutorial you’ll learn How to Detect AdBlock using HTML & JavaScript. In the earlier blog, I have shared How to Build Weather App using HTML CSS & JavaScript and now it’s time to create a popup box using JavaScript that detects AdBlocker. If you’re new to this blog and it’s the first blog you’re viewing then click here to view playlists of our all JavaScript Projects on Codegyan.

AdBlocker is a content filtering or web browser extension that blocks different online ads that interrupt your browsing experience. It helps the user to prevent unintended pop-ups, flashing banners, online advertisements from being displayed. I don’t recommend you to use AdBlocker on a free site like ours which has the main income source is displaying ads and giving you helpful content because the website needs money to stay free and it’s only possible if you view or click on their ads.

In our AdBlock Detector 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 and if not then this popup will not be displayed.

You might like this:

Detect AdBlock using JavaScript [Source Codes]

To create AdBlock detector using JavaScript. Firstly, you need to create two Files one HTML and another one is CSS File. After creating these files just copy paste the following codes into your file. You can also download the source code files of this AdBlock Detector from the given download button.

HTML

Firstly, You have to create an HTML file with the name of index.html and copy paste the given codes into your HTML file.


<!DOCTYPE html>
<!-- Coding By Codegyan - codegyan.in -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Detect AdBlock using JavaScript | Codegyan</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>

Lastly,You have to 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;
}

Also Read : How to Create Text To Speech Converter in HTML & JavaScript

If you wann to check the demo of this code, then you can check using below demo button.

Click on the following download button to download all source code files of  Adblock Detector using JavaScript directly  on your computer.

Final Word

In this way, we can create adblock detector using HTML & JavaScript.  I hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below.

How To Create AdBlock Detector using HTML & JavaScript

Published on 11-Jan-2022 12:39:39

You may also like this!