How to Block Adblock

Demo Download

If you are a website owner, there is a pretty good chance that you rely on some form of advertising to pay for your hosting bills. And if you are lucky enough to have more than a few people visiting your site, you might even be able to pay yourself a supplement to your salary as a compensation for your hard work.

On the other side there are the people that browse the web. They are tired of being bombarded with intrusive advertising, flashy banners and announcements that ruin their browsing experience. They don't need to be congratulated on being the millionth visitor of your website, they don't want to shoot five iphones, their only wish is to read what you have to say.

As it is much easier for users to hide ads than for the entire industry to develop advertising ethics, a simple solution quickly emerged.

Then Came Adblockers

The idea of an adblocker is simple - it is a browser extension that blocks or removes advertising on the page. A "solution" is hardly the proper term, however, as it only serves one side - the users. There frankly couldn't be a better deal for them. These extensions strip everything except the main content of the page, bringing a whole new dimension to the word free - it not only means that they don't pay; it now means that you don't get paid too!

adblocker-detected.jpg
Adblocker detected!

This didn't use to be a big of a problem for website owners - people using ad blockers weren't that many, and it did make users enjoy browsing your site more. But as the idea for browser extensions exploded in recent years, so did the proliferation of ad blockers. A quick look at the addon directories reveals that ad blockers are the most popular category.

Small sites are most at risk, as they can't attract the same interest from advertisers and experiment with different formats. With more than 20% of pageviews eaten away by adblockers (these are the number for Tutorialzine), it becomes evident that something has to change.

Miraculously, in the past few weeks there were news that the most popular ad blocker - AdBlock Plus will start allowing acceptable advertising by default. Judging by the uproar this decision brought, a large percentage of people will still opt in for complete blocking of ads or move to a different extension. This means that we as publishers will still have to maneuver around this problem for some time to come. One solution would be to detect the presence of an ad blocker.

How To Detect AdBlock

Update: The code presented here does not work any more, and any fix would be circumvented by ad blockers shortly after it is published. The issue of detecting ad blockers and in turn "blocking" them is controversial, as is proven from the comments below this article. This is why no updates will be made to this technique; I will leave it only for educational purposes.

It is simple - we will use ad blockers' overzealous interference against it. To block ads such an extension must look for files it believes contain code that shows adverts and prevent them from loading. So the idea is to have a JS file named advertisement.js, which will trigger adblock's filters, and after this, check whether the file has been loaded.

Here is the file itself:

assets/blockBlock/advertisement.js

jQuery.adblock = false;

That's all, one line. It creates a new property on the global jQuery object, which we will later look for. If it is undefined, it would mean that this file has been blocked from loading.

assets/blockBlock/blockBlock.jquery.js

(function($){

    if ($.adblock === undefined){
        $.adblock = true;
    }

    $.fn.showOnAdBlock = function(){

        if($.adblock){
            this.show();
        }

        return this;
    };

})(jQuery);

To find out if an ad blocker is present, simply do a conditional check for the $.adblock variable. In the same file, we also define a helper method that will conditionally show an element depending if such an extension is active.

Update: This plugin is also available on Github.

When including the plugin in your site, remember to include the files above after the jQuery library. For the demo page I am also using the confirm dialog replacement from last year to show a pretty dialog box informing the users they should disable adblock to view the page. Here is the code for that:

assets/js/script.js

$(function(){

    if($.adblock){
        $.confirm({
            'title'     : 'Adblocker active!',
            'message'   : 'You are running an ..',
            'buttons'   : {
                'I will!'   : {
                    'class' : 'blue',
                    'action': function(){
                        // Do nothing
                        return;
                    }
                },
                'Never!'    : {
                    'class' : 'gray',
                    'action': function(){
                        // Redirect to some page
                        window.location = 'https://tutorialzine.com/';
                    }
                }
            }
        });
    }
});

Bang! Now you can tell who is using an ad blocker. This simple method works with most of the popular ad cleaning plugins used at the moment.

What to use it for?

Okay, so you have a snippet of code that would tell you if a person is using an ad blocker or not. What to do now? Some ideas follow. I would not personally use any of the bad or evil ones, but I am obliged to share.

Good ideas

  • Track how many people are blocking ads on your website. If the percentage is high, you can try different (non-banner) types of advertisement;
  • Replace the areas of your website where ads usually go with some useful content;
  • Inform visitors how adblock harms small websites with a heartbreaking personal appeal ala Jimmy Wales.

Bad ideas

  • Show a big message that adblocked users are not welcome (like in the demo);
  • Beg for donations;
  • Replace with ads for affiliate programs that are not blocked by the extension.

Outright evil ideas

  • Set up a paywall for adblocked users;
  • Require a sign-in with facebook or a registration;
  • Redirect to a daily deal website with your affiliate link.

A bright future?

Hopefully the initiative behind AdBlock Plus' decision to show non-intrusive ads resonates in the community and we will enjoy advertising that is accepted and useful for both publishers and visitors.

What are your thoughts about AdBlock?

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles