GridTips: Detecting Ads Blocker with jQuery

quinta-feira, 7 de agosto de 2014

Detecting Ads Blocker with jQuery

For many websites that tell calm for free, advertisements (or ads) is one of their primary sources for removing revenue. The income from ads will be spent for profitable a losses to run a website such as a web server, Content Delivery Network (CDN), internet tie and — many importantly — a writers that furnish a contents.

Poorly, ads could be genuine vitriolic for readers. Ads seem and popping adult in any corner, that lead many Internet users to implement ads blocker extensions in their browser to put a ads out of sight. For a publisher this is a really unhappy news. No ads arrangement means reduction page view, and outcome in obtuse revenue.

I trust there have to be a mutual attribute between a publisher, a readers, and a advertisers. Publisher should tell useful essence that a readers enjoy, while advertisers will support a publisher financially to tell some-more useful essence in lapse to get applicable and intensity customers.

Many websites shows a summary or an choice approach to pleasantly seeking their support when a user is regulating an ads blocker software. In this post, we will uncover we how to request it in your website. Let’s take a look.

Getting Started

First let’s see how one of a ads retard program works to mislay a ads. As instance herein, we have combined a few ads images wrapped inside a div with class="ads"; this category is used to character as good as defines a area as ads.


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

Technically, a picture should seem in a browser, though it does not — as we can see below. The ads blocker program retard a image. To establish it, we can see a blunder record within a browser Console.

The ads picture is not shown since a ads blocker prolongation blocks a image.

In addition, a ad blocker also hides a ads picture by a further of display:none, as follows.

display:none is set in a image.

Once we knew how we benefaction a ads in a website and how a ads blocker retard a ads, we are now means to establish how we should write a book to arrangement a choice summary that will be displayed when a ads blocker is active.

Writing a Scripts

There are several ways we can do, one of that is by verfiying if a img still contains a display:none. Otherwise, we will arrangement a choice message. And, with jQuery, it’s really easy to do so. First, let’s emanate a new JavaScript function.


function appendMessage() 
	var div = $('div').attr('id', 'message').text('Ad retard is active');
	var supplement = $('body').append(div);

The duty above will emanate a div component with a calm of “Ad retard is active” and attach it into a request body.

Then, we will emanate a JavaScript redeeming matter that says: if a picture is set with display:none than we will run a appendMessage() function.


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

The further of setTimeout is a timeframe that we set to concede a ad retard extensions to run a duty — censor a ads — before we run ours. This will concede us to accurately establish if a display:none has been combined (or exist) on a image.

Below is a whole codes:


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

Follow these links next how to see how this duty works.

View Demo

Download Source

If we have Ad Block we should see a following summary (otherwise, we should is a ads image).

Important Notes

This formula assumes that a ads is an image. It is value observant that any ads is unique. Check out how your ads is displayed a ads, and find that component is hidden.

<!–