The JavaScript implementation checks to see if the ads on the page are blocked by AdBlock

Both firefox and Google have add-ons that block pages for ads, most notably AdBlock and AdBlock Plus. The other day, I did a survey to see how many people were using the AdBlock plugin, and found that it was a fifth of the total number of visitors.

1/5 is a lot of money. How do you get the AD space to be replaced by another image on the page of the 1/5 users who use the AdBlock plugin? To do this, you first need a way to know that the AdBlock plug-in is in use in your current browser. After some tests, I found that AdBlock is very sensitive to words like "Ad" or "Google Ad". As long as the ID or CSS class name of a page element has the word "Ad" in it, the element is basically blocked by the AdBlock plugin, which is display:none:

<div class='google-ad testAd'>  this div Will be blocked  </div>

With this rule in place, I was able to use JavaScript to find out if the AdBlock plug-in was enabled in my current browser. First, we put the Google AD code in a div, and put the CSS class name of the div into a class name that clearly represents Google AD:

<div class='google-ad testAd'>  Placed here Google AD code </div>

Then at the bottom of the page with Js detection, :

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

Here is another problem. Google's ads are usually displayed after the Dom is loaded. In order to ensure the detection after the Google ads are loaded, the js code should be added with the delayed execution feature to avoid false detection:

$(function(){

   setTimeout(function(){

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

   showOtherImage();

  },3000);

});

Here the showOtherImage (); What can we do in the method? We can put some promotional pictures and links from other websites of jingdong, dangdang and amazon, which is more or less a compensation for the loss through obtaining commission.