Detecting AdBlock Users

Because the usage of AdBlock is rising, many webmasters have found that their earnings have continued to decline over the past couple of years.

To fight back and lessen the impact of this, developers can do one of the following things.

  1. Find another revenue stream. Unfortunately, this is not always possible, as it depends on the nature of the website in question.
  2. Block AdBlock users in the hope that they whitelist your website.
  3. Display a message to AdBlock users, asking them not to run AdBlock on your domain.

Detecting AdBlock

To detect AdBlock, you will need to fool the plugin into thinking that a resource on your server is serving advertisements. i.e. You want it to block a particular resource on your server. For this example, I will be creating a JavaScript file called ads.js

In this JavaScript file, I will create a variable like so:

//my ads.js file
var canRunAds = true;

That’s it. Just one variable.

I will then include the JS file in my HTML:

<!--include ads.js-->
<script src="js/ads.js"></script>

If AdBlock is enabled, my ads.js file will be blocked and the variable canRunAds will not exist. This can be detected pretty easily:

$(document).ready(function(){
    if( window.canRunAds === undefined ){
        //AdBlock is enabled.
        //variable canRunAds doesn't exist.
    }
});

As you can see, I’ve checked see if the variable from ads.js is undefined. If the variable canRunAds is undefined, I can make the assumption that ads.js was blocked and that AdBlock is the culprit.

Once we’ve successfully detected the plugin, we can go about blocking the user. This can be done in three ways:

  • Display an overlay that hides the content they are looking for.
  • Redirect them to a special page.
  • Remove / hide important elements on the page.

Personally, if I was looking to implement an all-out block, I would display a transparent overlay. This can be done using the z-index CSS attribute, as well as the usage of absolute positioning. There are plenty of tutorials and plugins that will allow you to do this. Initialize them inside the IF statement above and you’re good to go.

Displaying a message

In most cases – Blocking visitors might be a little too harsh. Instead, we can take the polite route and remind them to whitelist our domain.

If we want a particular message to be shown to the user when ad-blocking software has been detected, we can do something like this:

$(document).ready(function(){
    if( window.canRunAds === undefined ){
        $('#special-message').fadeIn();
    }
});

In our HTML, we create a hidden DIV with the ID special-message:

<div id="special-message">
    <p>Please disable AdBlock for our website as we rely 
       on advertisements to pay for our hosting.
    </p>
</div>

If AdBlock is enabled, our JavaScript will detect its presence and display the hidden message above.