Everyone hates advertising. When watching TV, movies, Youku, and web pages, I also hate the advertisements flying all over the sky. Advertising is something that is not popular. However, for a small and medium-sized website 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 manuscripts selflessly, there are very few people who can last for a few years. Most of them slowly lost their enthusiasm.
Firefox and Google Chrome have plug-ins that can block pages to advertisements, the most famous of which are AdBlock and AdBlock Plus. A few days ago, I did a statistics to see how many users browse the website used the AdBlock plug-in, and found that this number actually amounted to 1/5 of the total number of viewers.
1/5 is a large number. How can we replace the ad space with other images on the pages of users who use the AdBlock plug-in in 1/5? To do this, the first thing is to do is to know that the AdBlock plugin is used in the current browser. After some tests, I found that AdBlock is very sensitive to words like "Ad" or "Google AD". As long as it has the word "Ad" in the ID or css class name of a certain page element, this element will basically be blocked by the AdBlock plug-in, that is, display:none:
The code copy is as follows:
<div class='google-ad testAd'> This div will be blocked</div>
With this rule, I can use JavaScript to discover whether the AdBlock plug-in is enabled in the current browser. First, we put the Google ad code into a div and put the div's css class name into a class name that clearly represents Google AD:
The code copy is as follows:
<div class='google-ad testAd'> Place Google ad code here</div>
Then use Js to detect at the bottom of the page:
The code copy is as follows:
if ($('.google-ad').height() == 0) showOtherImage();
There is another problem here. Google ads usually refer to the display after Dom is loaded. In order to ensure that Google ads are detected after loading, you need to add delayed execution features to the js code, which avoids error detection:
The code copy is as follows:
$(function(){
setTimeout(function(){
if ($('.google-ad').height() == 0)
showOtherImage();
},3000);
});
What can we do in the showOtherImage(); method here? We can place some promotional pictures and links on other websites of JD.com, Dangdang, and Amazon.com. By obtaining commissions, it is somewhat a little bit of compensation for the losses.