Detecting Ads Blocker with jQuery

For many websites that publish content for free, advertisements (or ads) is one of their primary sources for getting revenue. The revenue from ads will be spent for paying the expenses to run the website such as the web server, Content Delivery Network (CDN), internet connection and — most importantly — the writers that produce the contents.

Poorly, ads could be real irritating for readers. Ads appear and popping up in every corner, which lead many Internet users to install ads blocker extensions in their browser to put the ads out of sight. For the publisher this is a very sad news. No ads display means less page view, and result in lesser revenue.

I believe there have to be a mutual relationship between the publisher, the readers, and the advertisers. Publisher should publish useful contents that the readers enjoy, while advertisers will support the publisher financially to publish more useful contents in return to get relevant and potential customers.

Many websites shows a message or an alternative way to kindly asking their support when the user is using an ads blocker software. In this post, we will show you how to apply it in your website. Let’s take a look.

Getting Started

First let’s see how one of the ads block software works to remove the ads. As example herein, we have added a few ads images wrapped inside a div with class="ads"; this class is used to style as well as defines the area as ads.

 <div class="ads"> <img src="images/ads.jpg" height="250" width="300" alt=""> </div>

Technically, the image should appear in the browser, but it does not — as you can see below. The ads blocker software block the image. To verify it, you can see the error log within the browser Console.

The ads image is not shown because the ads blocker extension blocks the image.

In addition, the ad blocker also hides the ads image by the addition of display:none, as follows.

display:none is set in the image.

Once we knew how we present the ads in the website and how the ads blocker block the ads, we are now able to determine how we should write the script to display the alternative message that will be displayed when the ads blocker is active.

Writing the Scripts

There are several ways we can do, one of which is by verfiying if the img still contains the display:none. Otherwise, we will display the alternative message. And, with jQuery, it’s very easy to do so. First, let’s create a new JavaScript function.

 function appendMessage() var div = $('<div>').attr('id', 'message').text('Ad block is active'); var add = $('body').append(div);

The function above will create a div element with the content of “Ad block is active” and append it into the document body.

Then, we will create a JavaScript conditional statement that says: if the image is set with display:none than we will run the appendMessage() function.

 setTimeout(function() if($('img').css('display') == "none") appendMessage(); , 500);

The addition of setTimeout is the timeframe that we set to allow the ad block extensions to run its function — hide the ads — before we run ours. This will allow us to accurately verify if the display:none has been added (or exist) on the image.

Below is the whole codes:

 $(document).ready(function() function appendMessage(argument) var div = $('<div>').attr('id', 'message').text('Ad block is installed and active. Please support us by disabling it.'); var add = $('body').append(div); setTimeout(function() if($("img").css('display') == "none") appendMessage(); , 500); );

Follow these links below how to see how this function works.

View Demo

Download Source

If you have Ad Block you should see the following message (otherwise, you should is the ads image).

Important Notes

This code assumes that the ads is an image. It is worth noting that each ads is unique. Check out how your ads is displayed the ads, and find which element is hidden.