阻止AdBlock用户屏蔽网站AdSense广告

土木坛子

June 5, 2014

对于投放了Google AdSense广告的博客主或者站长而言，AdBlock之类的广告过滤最不讨人喜欢，因为过滤减少了潜在的广告收入。然而，用户安装广告过滤插件也是无奈之举，没有谁愿意网页上满屏广告、甚至弹出式广告。

世上本没有广告，广告不过是放错地方的信息。如果你觉得你网站上的广告值得访客浏览，你可以采取技术手段阻止广告过滤用户访问你的网站，迫使用户停止过滤你网站上的广告，将你的网站加入过滤白名单，类似优酷通过黑屏的方式来强迫用户停止广告过滤一样，天下没有免费的午餐。网站主靠广告点击有些收入也无可厚非。

如何阻止安装比如AdBlock Plus插件的浏览器屏蔽网站上的AdSense广告呢？WordPress博客有相应的插件No Adblock可以实现这样的功能。我这里介绍一种非插件纯代码的实现方法，理论上适应所有网站阻止广告过滤插件屏蔽AdSense广告（原始代码来自这篇博文）。

1. 将下列代码放到主题的footer.php中的之前：

<script>(function(w,u){var d=w.document,z=typeof u;function g207(){function c(c,i){var e=d.createElement('i'),b=d.body,s=b.style,l=b.childNodes.length;if(typeof i!=z){e.setAttribute('id',i);s.margin=s.padding=0;s.height='100%';l=Math.floor(Math.random()*l)+1}e.innerHTML=c;b.insertBefore(e,b.childNodes[l-1])}function g(i,t){return !t?d.getElementById(i):d.getElementsByTagName(t)};function f(v){if(!g('g207')){c('<p>请暂停广告过滤。Please disable your ad blocker!<br/>此网站由广告收入维持。This site is supported by the advertisement <br/> 请暂停过滤此网站广告支持我们，谢谢！Please disable your ad blocker to support us!!! </p>','g207')}};(function(){var a=['Adrectangle','PageLeaderAd','ad-column','advertising2','divAdBox','mochila-column-right-ad-300x250-1','searchAdSenseBox','ad','ads','adsense'],l=a.length,i,s='',e;for(i=0;i<l;i++){if(!g(a[i])){s+='<a id="'+a[i]+'"></a>'}}c(s);l=a.length;for(i=0;i<l;i++){e=g(a[i]);if(e.offsetParent==null||(w.getComputedStyle?d.defaultView.getComputedStyle(e,null).getPropertyValue('display'):e.currentStyle.display)=='none'){return f('#'+a[i])}}}());(function(){var t=g(0,'img'),a=['/adaffiliate_','/adops/ad','/adsales/ad','/adsby.','/adtest.','/ajax/ads/ad','/controller/ads/ad','/pageads/ad','/weather/ads/ad','-728x90-'],i;if(typeof t[0]!=z&&typeof t[0].src!=z){i=new Image();i.onload=function(){this.onload=z;this.onerror=function(){f(this.src)};this.src=t[0].src+'#'+a.join('')};i.src=t[0].src}}());(function(){var o={'http://pagead2.googlesyndication.com/pagead/show_ads.js':'google_ad_client','http://js.adscale.de/getads.js':'adscale_slot_id','http://get.mirando.de/mirando.js':'adPlaceId'},S=g(0,'script'),l=S.length-1,n,r,i,v,s;d.write=null;for(i=l;i>=0;--i){s=S[i];if(typeof o[s.src]!=z){n=d.createElement('script');n.type='text/javascript';n.src=s.src;v=o[s.src];w[v]=u;r=S[0];n.onload=n.onreadystatechange=function(){if(typeof w[v]==z&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){n.onload=n.onreadystatechange=null;r.parentNode.removeChild(n);w[v]=null}};r.parentNode.insertBefore(n,r);setTimeout(function(){if(w[v]!==null){f(n.src)}},2000);break}}}())}if(d.addEventListener){w.addEventListener('load',g207,false)}else{w.attachEvent('onload',g207)}})(window);</script>

2. 再将以下代码放到主题文件CSS样式表style.css中，定义提示文字样式：

#g207{position:fixed!important;position:absolute;top:0;top:expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");left:0;width:100%;height:100%;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);display:block}#g207 p{opacity:1;filter:none;font:bold 16px Verdana,Arial,sans-serif;text-align:center;margin:20% 0}#g207 p a,#g207 p i{font-size:12px}#g207 ~ *{display:none}

OK，实现效果可点击这里（已取消效果）查看：

请暂停广告过滤。Please disable your ad blocker. 此网站由广告收入维持。This site is supported by the advertisement. 请暂停过滤此网站广告支持我们，谢谢！Please disable your ad blocker to support us!

这个方法的原理并不复杂：JavaScript代码判断用户是否下载了AdSense广告元素，如果有广告过滤，则出现相应中英文提示停止广告过滤，否则无法继续浏览。

用户有屏蔽广告的自由，网站主也有反屏蔽的自由。和电视台需要广告一样，现阶段的互联网也主要靠广告收入维持发展。

It-Related