ADVERTISEMENT
Polite message to AdBlock Users

How to Detect AdBlock in Any Website Using JQuery


I always like to provide nice stuff and pecks that always work for me. There is nothing that will ever work for me in this life and I leave it behind.¬† I will always share it wholeheartedly. Today’s article is going to illustrate how to detect AdBlock on any website.

You actually have no idea how Adblock affects your revenue and probably we might start to argue on why this topic matters!

Ads are vital for a free-content website. Almost every website has to have some sort of income to support itself. Probably, without ads, there would be no free cool content available anywhere on the internet; we would all have to pay to access someone’s else sweat.

Although it’s too hard to measure, research has indicated that around 0.6billion¬† users are blocking ads today (Source, Havard Blog). Alas! This translates to a huge loss of revenue every year.

Adblock users also defend themselves by arguing that some websites are simply filled by ads and it’s had to find the content, even though, does it really matter to punish all website owners?

This article is going to demonstrate how to politely ask AdBlock users to whitelist your website by convincing them that, the website relies on ad revenue and that the content they are viewing is made possible by ads impression.

Polite message to AdBlock Users

Now, how could it be done programmatically? Up next is a full description and coding.



Also, See How to Install the Classic Windows PhotoViewer in Windows 10

How to Detect AdBlock Users using JQuery

You’ve probably noticed that this website is detecting Adblock users i.e. if you are using any version of AdBlock. I did not use any third-party plugin or code, I did the whole detection all alone programmatically.

My ideas have since caused a rise in revenue as all my AdBlock costumers are forced to either turn on the AdBlock or get out. Why? Even after displaying a polite message to Adblock users, I won’t let them in until the AdBlock is paused for my site.

The idea is to understand how AdBlock works. Adblock makes it possible to detect and block ads by blacklisting certain terms such as ad-banner, ad_banner, ad_unit and so on. The following screenshot indicates an array of some of the terms that Adblock tries to block.

How to detect adblock on any website

The above screenshot was taken from the chrome inspection tool. It illustrates the injected CSS from the AdBlock. All those terms are CSS classes and ids which will be set to display none by AdBlock (e.g. #ad-unit{display: none;}).

What I did to detect the AdBlock, I created an empty div with a class of any of these terms. For example, in my case, I used add-banner as shown in the code below.

<div class="ad-banner"></div>

Then I used jquery to check if my div is blocked or not if it is, then the AdBlock is running else the AdBlock is paused or not installed.

have a look at JQuery Code below.

<div class="ad-banner">
  </div>

   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>


  <script>
    $(function(){
      var time = 0; 
      function keepChecking(){
        var id = setTimeout(keepChecking, 1000);
        if(time == 2){
          if(!($(".ad-banner").is(":visible"))){
            $(".blocker-tester").fadeIn();
            time = 0;
          }
          clearTimeout(id);
          $("body").addClass("avoid-page-scroll");
        }
        time++;	
      }
      keepChecking();
      $(".blocker-tester-footer .blocker-btn").click(function(){
        $("body").removeClass("avoid-page-scroll");
        location.reload();
      });
    });
  </script>

Following is the full code that I use on my website. You don’t have to change anything just paste it in the footer part of your HTML just above the </body>.

<style type="text/css">
    .blocker-tester{
      background: rgba(255, 255, 255, 0.9);
      position: fixed;
      left: 0; 
      right: 0; 
      bottom: 0;
      top: 0;
      z-index: 9999999999999999;
      text-align: center;
      color: #1B2431;
      padding: 100px;
      display: none;
    }

    .blocker-tester-header{
      font-size: 38px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .blocker-tester-content{
      font-size: 20px;
      margin-bottom: 20px;
    }

    .blocker-btn{
      border: none;
      padding: 20px;
      font-size: 21px;
      cursor: pointer;
      border-radius: 3px;
      -webkit-box-shadow: 0 0 10px #000;
        	box-shadow: 0 0 10px #000;
    }

    .avoid-page-scroll{
      /*overflow: hidden !important;*/
    }
  </style>


  <div class="blocker-tester"> 
    <div class="blocker-tester-header"> 
      AdBlock Detected!
    </div>
    <div class="blocker-tester-content">
      This site depends on revenue from ad impressions to survive. If you find this site valuable, please consider disabling your ad blocker or pausing adblock for this website. 
    </div>

    <div class="blocker-tester-footer">
      <center><button class="blocker-btn">Oh Sorry, I have Paused ADB for This Site, Let Me In</button></center>
    </div>
  </div>
  <div class="ad-banner">
  </div>

   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>


  <script>
    $(function(){
      var time = 0; 
      function keepChecking(){
        var id = setTimeout(keepChecking, 1000);
        if(time == 2){
          if(!($(".ad-banner").is(":visible"))){
            $(".blocker-tester").fadeIn();
            time = 0;
          }
          clearTimeout(id);
          $("body").addClass("avoid-page-scroll");
        }
        time++;	
      }
      keepChecking();
      $(".blocker-tester-footer .blocker-btn").click(function(){
        $("body").removeClass("avoid-page-scroll");
        location.reload();
      });
    });
  </script>

Paste that code in the footer part of your website just above the closing tag of the body. Include it as it is even the CSS Part.

That’s how to detect AdBlock users on any website. If you have another approach please let us know in the commenting system below.





AdBlock Detected!
This site depends on revenue from ad impressions to survive. If you find this site valuable, please consider disabling your ad blocker or pausing adblock for this website.