Detect adblocker using javascript

Siva Kishore G

Posted : 27 Jan 2022
Modified : 06 Jun 2022

Intermediate Developers

Detect adblocker banner and show them a message

Introduction

Bloggers and content makers earn their revenue predominantly using the ads they place on the website. Sometimes, these ads are so intrusive that the reader will want to opt in for an adblocker. I'm not an exception either! Having seen it first hand, I am proposing a few ways to gracefully ask the readers to turn off the adblocker.

There are some blogs, News websites particularly restrict the users to read the content unless they turn off the adblocker. In my opinion it is denial of service and borderline offensive. Instead, respect their decision and think of ways to encourage them to turn off the adblocker.

Methods of action

Humor

Internet users are primary consumers, they consume content, purchase things, write reviews and spend a lot of time online. You don't know the mindset of the user and how to encourage them to take the steps you wanted. So, Introducing humor

Did you know? A laughing cop is very less likely to give you a ticket?

Humor is the best way to make friends online or offline. People love to laugh and if you can make them laugh, then they will feel the need to reciprocate in some fashion. Bingo! Apply the same here. Show the user a message with a funny cartoon or something that makes' em laugh, you are halfway there.

View code

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="p-4" id="modalContent">
          <div class="row align-items-center">
            <div class="col-md-6 col-xs-12">
              <img src="/static_files/images/html/viking.png" alt="General on tank" class="imgResponsive" style="max-height:420px">
            </div>
            <div class="col-md-6 col-xs-12">
              <div class="p-2 my-3">
                <h2>Adblocker Alert</h2>
                <p class="mt-3">
                  Your adblocker is too strong for me to get past. My ego is at stake here. Help me will ya?
                </p>
                <button class="mt-2 w-100 btn btn-success" data-bs-dismiss="modal">Absolutely!</button>
                <div class="mt-2">
                  <a href="#" data-bs-dismiss="modal">No! Thanks</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Authority

Sometimes, authority works but it's not my favorite though. For example, you are much more likely to obey when a uniform official asks for something. Apply this concept here but don't cheat because KARMA IS A BI***H.

View code

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="p-4" id="modalContent">
          <div class="row align-items-center">
            <div class="col-md-6 col-xs-12">
              <img src="/static_files/images/html/generalOnTank.png" alt="General on tank" class="imgResponsive">
            </div>
            <div class="col-md-6 col-xs-12">
              <div class="p-2 my-3">
                <h2>Adblocker Installed</h2>
                <p class="mt-3">
                  My general is really short tempered. Please soothe him down by turning off your adblocker.
                </p>
                <button class="mt-2 w-100 btn btn-success" data-bs-dismiss="modal">Ok. I got ya!</button>
                <div class="mt-2">
                  <a href="#" data-bs-dismiss="modal">No. I don't care!</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Show them the reason

Have the user read the purpose of having the ads on your site and how it can help you cover the server, hosting costs. As per psychology, users obey when there is a reason behind it. Let's go though an example, or maybe you can do this in real life and be shocked by the response.

Wherever you are in a queue at a gas station, say out loud "Can you please let me go first because I'm in a hurry". Whatever the reason you provide, your chance of getting ahead in line is substantially higher than not providing a reason.

View code

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="p-4" id="modalContent">
          <div style="margin-top:-120px">
            <img style="max-height:240px" src="/static_files/images/html/spartan.png" />
          </div>
          <h2 class="mt-4">Please disable your AdBlocker</h2>
          <p>
            I respect your decision to keep the adblocker but as it happens, it took a lot of effort and time to put forward this article and ads are the only way I can recuperate the website maintenance costs. So I humbly ask you to disabled it and reload the page?
          </p>
          <button class="btn btn-success mt-3">Absolutely</button>
          <div class="mt-2">
            <a href="#" data-bs-dismiss="modal">No! Thanks</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Restrict (not recommended)

This is what I absolutely hate, denying the content while asking the user to disable the adblock. According to popular statistics, the number of users installing adblock has increased to 615 million in 2019 from 145 million in 2018. That's a whopping 424% increase.

If the site owner has no other option but to restrict completely because ads are the only way to cover the server and hosting costs, then maybe it's ok to have such a restriction! But keep in mind that the bounce rate will be high for such websites and your google ranking will suffer.

View Code

#adBlockOverlay {
  z-index:999999999
}
.imgResponsive {
  width:100%;
  max-width:240px;
}
#adBlockContent {
  transform : translateY(-15%)
}

<div class="position-fixed top-0 left-0 w-100 vh-100 d-flex align-items-center" id="adBlockOverlay">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-8 col-xs-12 mx-auto">
        <div class="p-4 text-center" id="adBlockContent">
          <div><img class="imgResponsive" alt="adblock installed image" src="/static_files/images/html/adblockerDetected.jpg"/></div>
          <div class="mt-4 text-uppercase"><h1 class="h3">AdBlocker Installed</h1></div>
          <p>
            Please disable the adblocker and reload the page again
          </p>
          <button onclick="window.location.reload()" class="btn btn-outline-danger mt-2">Reload the page</button>
        </div>
      </div>
    </div>
  </div>
</div>

Implementation

There are quite a few ways to detect if the ad blocker is active or not.

Adding an onerror method to the ad script tag
Placing a mock ad and monitoring it
Place the ad inside an element and check the height of it after window loads

Today we will concentrate on #3

View code

<div id="myAd"></div>
<!-- Add one of the above html codes here -->

var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop'))
window.onload = function(){
  var adHeight = document.getElementById('myAd').offsetHeight
  if(adHeight === 0){
     // show popup
     showMessage()
     // Wrap the site content around a div and give it an id site-content
     // Make sure the popup code is outside of this div
     // Use this to restrict the user to see the content
     document.getElementById('site-content').innerHTML = ""
  }
}
function showMessage(){
  var html = `CUSTOM CODE`
  $('#modalContent').html(html)
  myModal.show()
}

Conclusion

Ad blockers are really growing in popularity. There is always a constant battle between the both ends where one is trying to be a step ahead of the other. Please let us know what you think of this article and which technique you liked the most in the comment section below.