How to Detect AdBlocker in the Browser and Show a Message to Whitelist

Do you know? According to a study over 42% of internet users are using adblocker extension in their browser which is badly impacting the advertisement revenue of online content creators.

The only way to tackle ad blocker in the browser is, to request the visitor to whitelist your website by showing a message.

In this article, we have shared the useful HTML and JavaScript code snippet to detect Adblocker in the browser and show a message to whitelist the website from the adblocker.

Detect AdBlocker and Show a Popup Message to Whitelist Website

The following code snippet to detect Adblocker extension can be used in HTML and WordPress websites, in fact, you can add this code snippet in any platform where you are allowed to add the custom HTML and JavaScript code.

We have created a demo page for detecting AdBlocker and showing whitelist message to visitors where you can see the working demo of the following code. Check out the demo here.

In this article, we have shared the step-by-step guide on adding AdBlock detection code snippet to your HTML and WordPress websites.

How to Add Ad Blocker Detection Code for Basic HTML Website

Open your HTML page in any code editor, copy the following HTML markup and paste it before the closing body tag (i.e. before </body>)

<div class="adbn-wrap">
<div>
<p>We have detected an adblocker in your browser, <br/>please consider supporting us by disabling your ad blocker.</p>
<button id="adbnrb" type="button" name="button">I've disabled AdBlocker</button>
</div>
</div>

<style>
.adbn-wrap{
    display: none;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(217 217 217 / 88%);
    backdrop-filter: blur(3px);
    z-index: 999;
}
.adbn-wrap div{
    align-self: center;
    width: 30vw;
    background: #010a26;
    padding: 30px 20px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 35px 20px -20px #ababab;
    color: #fff;
    border-top: 2px solid #ff8d00;
    animation: popupanim ease-out 0.5s;
    animation-iteration-count: 1;
}
.adbn-wrap div p{
    line-height: 1.8;
    margin-bottom: 0;
    font-size: 16px;
}
.adbn-wrap div button{
    margin-top: 14px;
    background: #ffffff;
    color: #000;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    padding: 3px 12px;
}
@keyframes popupanim{
    from{
        opacity:0.3;
        transform:translate(0px,40px);
    }
    to{
        opacity:1;
        transform:translate(0px,0px)  ;
    }
}
@media screen and (max-width: 1200px) {
  .adbn-wrap div{
      width: 70vw;
  }
}
</style>

<script>
      try {
        var request = new Request(
          "http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
          { method: "HEAD", mode: "no-cors" }
        );
        fetch(request)
          .then(function (request) {
          })
          .catch(function (request) {
	     let adbnwrap = document.querySelector(".adbn-wrap");
             adbnwrap.style.display = "flex";
          });
      } catch (err) {
      }
      let adbnrefresh = document.querySelector("#adbnrb");
      adbnrefresh.addEventListener("click", function () {
        location.reload();
      });
</script>

Here is the output of the code shared above, you can customize the CSS to match the popup with your website color scheme.

How to Add AdBlocker Detection Code for WordPress

Adding the above mentioned AdBlocker detection code into the WordPress is simple, just go through the steps below, you can also try our WordPress plugin Simple Adblock Notice which does the same job.

1. Login to your WordPress admin area
2. Go to Plugins -> Add New and search for “Insert Headers and Footers by WPBeginner” plugin and install it, activate the plugin once installation is done
3. Now go to “Settings -> Insert Headers and Footers”
4. Copy all the above mentioned HTML, CSS and JavaScript and paste into “Scripts in Footer” input box

That’s it, now if someone visits your website with AdBlocker on, a popup will be shown to them to whitelist your website from the Adblocker. The popup will be shown repeatedly until the visitor whitelists your website.

Like us on Facebook and follow us on Twitter for more tech stuff.

• Adblock Detect
• Adblock Extension Detect
• Adblock Plus
• Adblocker
• Anti Adblock