{"id":21834,"date":"2014-08-07T18:01:36","date_gmt":"2014-08-07T10:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21834"},"modified":"2025-04-04T02:00:42","modified_gmt":"2025-04-03T18:00:42","slug":"jquery-detect-ads-block","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-detect-ads-block\/","title":{"rendered":"Detecting Ads Blocker with jQuery"},"content":{"rendered":"

For many websites that publish content for free, advertisements (or ads) are one of their primary sources for getting revenue.<\/p>\n

The revenue from ads will be spent for paying the expenses to run the website<\/strong> such as the web server, Content Delivery Network<\/strong> (CDN), internet connection<\/strong> and, most importantly, the writers<\/strong> that produce the content.<\/p>\n

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<\/a>.<\/p>\n

For the publisher this is very sad news. No ads displayed means less page views<\/strong>, which will result in less revenue.<\/p>\n

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<\/strong>, while advertisers will support the publisher financially<\/strong> to publish more useful content in return for relevant and potential customers.<\/p>\n

Many websites show a message or an alternative way to kindly ask for their support<\/strong> when the user is using an ad blocker software. In this post, we will show you how to apply it in your website. Let\u2019s take a look.<\/p>\n

Getting Started<\/h3>\n

First let\u2019s see how one of the ad block software works <\/strong>to remove the ads. As example herein, we have added a few ad images wrapped inside a div<\/code> with class=\"ads\"<\/code>; this class is used to style as well as define the area as an ad.<\/p>\n

\r\n<div class=\"ads\">\r\n\t<img src=\"images\/ads.jpg\" height=\"250\" width=\"300\" alt=\"\">\r\n<\/div>\r\n<\/pre>\n
Technically, the image should appear in the browser, but it does not \u2013 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.<\/p>\n
\"ad\"
The ad image is not shown because the ad blocker extension blocks the image.<\/figcaption><\/figure>\n
In addition, the ad blocker also hides the ad image by the addition of display:none<\/code>, as follows.<\/p>\n
\"display
display:none is set in the image.<\/figcaption><\/figure>\n
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<\/strong> that will be displayed when the ad blocker is active.<\/p>\n
Writing the Script<\/h3>\n
There are several ways we can do this, one of which is by verifying if the img<\/code> still contains the display:none<\/code>.<\/strong> Otherwise, we will display the alternative message. And, with jQuery, it\u2019s very easy to do so. First, let\u2019s create a new JavaScript function.<\/p>\n
\r\nfunction appendMessage() {\r\n\tvar div = $('<div>').attr('id', 'message').text('Ad block is active');\r\n\tvar add = $('body').append(div);\r\n}\r\n<\/pre>\n
The function above will create a div<\/code> element with the content of \u201cAd block is active\u201d<\/strong> and append it to the document body<\/code>.<\/p>\n
Then, we will create a JavaScript conditional statement that says: if the image is set with display:none<\/em> than we will run the appendMessage()<\/code> function.<\/p>\n
\r\nsetTimeout(function(){\r\n\tif($('img').css('display') == \"none\") {\r\n\t\tappendMessage();\r\n\t}\r\n}, 500);\r\n<\/pre>\n
The addition of setTimeout<\/code> is the timeframe<\/em> that we set to allow the ad block extensions to run its function \u2013 hide the ads \u2013 before we run ours.<\/p>\n
This will allow us to accurately verify if the display:none<\/code> has been added (or exist) on the image.<\/p>\n
Below is the whole code:<\/p>\n
\r\n$(document).ready(function() {\r\n\tfunction appendMessage(argument) {\r\n\t\tvar div = $('<div>').attr('id', 'message').text('Ad block is installed and active. Please support us by disabling it.');\r\n\t\tvar add = $('body').append(div);\r\n\t}\r\n\tsetTimeout(function(){\r\n\t\tif($(\"img\").css('display') == \"none\") {\r\n\t\t\tappendMessage();\r\n\t\t}\r\n\t}, 500);\r\n});\r\n<\/pre>\n
Follow these links below to see how this function works.<\/p>\n