Detecting Ads Blocker with jQuery

For many websites that publish content for free, advertisements (or ads) are 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 content.

However, ads could be really irritating for readers. Ads appear and pop up at every corner, which leads to many Internet users installing ad blocker extensions in their browser to put the ads out of sight.

For the publisher this is very sad news. No ads displayed means less page views, which will result in less revenue.

I believe there has to be a mutual relationship between the publisher, the readers, and the advertisers. Publishers should publish useful content that the readers enjoy, while advertisers will support the publisher financially to publish more useful content in return for relevant and potential customers.

Many websites show a message or an alternative way to kindly ask for their support when the user is using an ad 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 ad block software works to remove the ads. As example herein, we have added a few ad images wrapped inside a div with class="ads"; this class is used to style as well as define the area as an ad.

<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 blocked the image. To verify it, you can see the error log within the browser Console.

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

Once we know how we present the ads in the website and how the ad blocker blocks 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 ad blocker is active.

Writing the Script

There are several ways we can do this, one of which is by verifying 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 to 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 code:

$(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 to see how this function works.

• View Demo
• Download Source

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

Important Notes

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