How to implement JavaScript to check whether the ads on the page are blocked by AdBlock

How to implement JavaScript to check whether the ads on the page are blocked by AdBlock_javascript skills

WBOY

Release： 2016-05-16 16:32:08

Original

2200 people have browsed it

Everyone hates ads. When watching TV, watching movies, watching Youku, or browsing the web, I also hate the ads flying all over the place. Advertising is an unpleasant thing. However, for a small and medium-sized webmaster/blogger, advertising is almost the only source of funds that can support the normal operation of the website/blog. If a blogger just publishes articles selflessly, very few can last for several years. Most slowly lose their enthusiasm.

Both Firefox and Google Chrome have plug-ins that can block ads on pages, the most famous ones are AdBlock and AdBlock Plus. A few days ago, I made a statistics to see how many users who browsed the website used the AdBlock plug-in, and found that this number actually accounted for 1/5 of the total number of visitors.

1/5 is a big number. How can we replace the ad space with other images on the pages of the 1/5 users who use the AdBlock plug-in? To do this, you first need to have a way to know that the AdBlock plug-in is currently used in the browser. After some tests, I found that AdBlock is very sensitive to words like "Ad" or "Google AD". As long as there is the word "Ad" in the ID or css class name of a certain page element, this element will basically be AdBlocked. The plug-in is blocked, that is, display:none:

Copy code The code is as follows:

This div will be blocked

With this rule, I can use JavaScript to find out whether the current browser has the AdBlock plug-in enabled. First, we put the Google ad code into a div, and put a class name that clearly represents Google AD into the css class name of the div:

Copy code The code is as follows:

Place Google ad code here

Then use Js to detect at the bottom of the page:

Copy code The code is as follows:

if ($('.google-ad').height() == 0) showOtherImage();

There is another problem here. Google ads are usually displayed after the Dom is loaded. In order to ensure detection after the Google ads are loaded, a delayed execution feature must be added to the js code to avoid false detection:

Copy code The code is as follows:

$(function(){

setTimeout(function(){

if ($('.google-ad').height() == 0)

showOtherImage();

},3000);

});

What can we do in the showOtherImage(); method here? We can put some promotional pictures and links from JD.com, Dangdang, Amazon and other websites, and get commissions, which can be regarded as a little compensation for the losses.