Friday, August 8, 2014

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 real 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. [...]

No comments:

Post a Comment