有些網(wǎng)頁(yè)上充斥著令人厭惡的廣告，這些廣告不僅阻礙了信息的獲取，有的還嚴(yán)重影響了瀏覽者的心情。特別是某些毫不相關(guān)的多媒體廣告和彈出式窗口，不僅讓人感到被騷擾，還很容易誤點(diǎn)到，浪費(fèi)寶貴的時(shí)間。由此便誕生了大名鼎鼎的跨平臺(tái) AdBlock 插件，在任何主流瀏覽器上都有它的擴(kuò)展或插件，用戶可以安裝它并屏蔽絕大多數(shù)的廣告。
既然 AdBlock 有檢測(cè)廣告并屏蔽它們的方法，作為網(wǎng)頁(yè)制作者，其實(shí)也有反過(guò)來(lái)檢測(cè) AdBlock 的方法。
為什么要檢測(cè) AdBlock
這是一個(gè)有爭(zhēng)論的問(wèn)題：用戶有選擇不看廣告、在瀏覽器頁(yè)面上銷毀廣告的權(quán)利，網(wǎng)站也有捆綁廣告和信息一同派發(fā)給你并收取廣告商展示費(fèi)用的自由。這兩者都不能互相干預(yù)，并且在沒(méi)有明確法律法規(guī)的環(huán)境下，你可以防范我，我也可以防范你。
除了向 AdBlock 直接提交 “可接受的廣告網(wǎng)站” 申請(qǐng)進(jìn)入白名單以要求直接免受屏蔽之外，下面介紹 6 種從網(wǎng)站本身出發(fā)的檢測(cè) AdBlock 并觸發(fā)相關(guān)操作的方法。
以下的方法都是以不修改廣告代碼本身的基礎(chǔ)上完成的，因?yàn)橹T如 Google AdSense 的廣告聯(lián)盟要求不得修改代碼。
檢測(cè)廣告模塊可見高度
這是一種很樸實(shí)的方法，原理也很簡(jiǎn)單，就是檢測(cè)對(duì)應(yīng)廣告模塊的高度是否小于它應(yīng)有的高度，若小于就說(shuō)明它被置空塌陷了，也即說(shuō)明啟用了 AdBlock。
代碼類似如下
if( document.getElementById('ads').clientHeight < 90 ){
//AdBlock Detected
}
此方案的可行性為中。某些情況下 AdBlock 屏蔽了某個(gè)廣告之后的處理情形比較特殊，不會(huì)使得廣告模塊塌陷，而是維持設(shè)定的高度顯示空白，那個(gè)時(shí)候就不管用了。
檢測(cè)可見廣告的個(gè)數(shù)
這是一個(gè)和上述類似的方法，也很樸實(shí)，那就是檢測(cè)當(dāng)前頁(yè)面上的廣告?zhèn)€數(shù)是否達(dá)到預(yù)期，因?yàn)槟承V告可能并沒(méi)有觸發(fā) AdBlock 的規(guī)則得以顯示，所以可以利用檢查廣告的個(gè)數(shù)的方法來(lái)達(dá)到目的。
借助 jQuery，代碼類似如下
if( $('.ads').filter(':visible').length < 3 ){
// Ads showing less than 3
// AdBlock Detected
}
此方案的可行性仍然為中，理由和上一個(gè)方法類似。
檢測(cè) google_jobrunner
這個(gè)方法僅僅適用于 Google AdSense 廣告。在加載了 AdSense 的廣告代碼之后，有一個(gè) window.google_jobrunner 對(duì)象被建立，而 AdBlock 會(huì)阻止 AdSense 代碼的加載，此時(shí)這個(gè)對(duì)象將不存在。我們可以靠這一點(diǎn)來(lái)檢測(cè) AdBlock。
其代碼看起來(lái)類似于
if ( typeof(window.google_jobrunner) != 'object' ){
// AdSense js not loaded
// AdBlock detected
}
此方案的可行性為高，因?yàn)檫@充分利用了 AdSense 的特點(diǎn)，并且非常準(zhǔn)確，效率也很高。
檢測(cè) adsbygoogle 類型是否是數(shù)組
這個(gè)方法僅僅適用于 Google AdSense 廣告。如果你使用了含有 ins 標(biāo)簽的新異步代碼，則可以使用這個(gè)方法。其原理是，adsbygoogle 在當(dāng)前頁(yè)面加載時(shí)被初始化為一個(gè)數(shù)組，而當(dāng) AdSense 的代碼被加載時(shí)，它被進(jìn)化為一個(gè)對(duì)象 object，而 AdBlock 會(huì)阻止 AdSense 代碼的加載。因此，我們通過(guò)檢查 adsbygoogle 的狀態(tài)就可以知道 AdBlock 有沒(méi)有安裝。
其代碼應(yīng)該類似于
window.setTimeout(function(){
if(adsbygoogle instanceof Array) {
// AdSense js not loaded
// AdBlock detected
} }, 2000);
此方案的可行性為高，因?yàn)檫@充分利用了 AdSense 的特點(diǎn)，并且非常準(zhǔn)確，效率也很高。代碼中的 setTimeout 是為了彌補(bǔ) AdSense 代碼運(yùn)行所花費(fèi)的時(shí)間，大約兩秒夠了。
使用 Ajax 模擬一個(gè)廣告代碼加載請(qǐng)求
我們知道 AdBlock 會(huì)阻止廣告代碼的加載，因此，我們可以通過(guò)嘗試模擬加載一個(gè)廣告代碼 ads.js ，如果AdBlock 屏蔽了這次行為，可以觸發(fā)其失敗的方法，達(dá)到檢測(cè)的目的。
借助 jQuery，我們可以這樣寫
$.ajax({
url: "ads.js",
dataType: "script"
}).fail(function () {
// Ads.js not loaded
// AdBlock detected
});
此方案的可行性很高，因?yàn)檫@戳中了 Adblock 的弱點(diǎn)。其中 ads.js 本身可以是一個(gè)空文件，但它不能不存在，否則會(huì)發(fā)生 404 錯(cuò)誤，導(dǎo)致誤判。所以你需要在這個(gè)目錄下放一個(gè) ads.js 文件。你甚至可以把它叫做 adsbygoogle.js 文件。
如圖所示，加載 ads.js 時(shí)，行為被 AdBlock 阻止：
加載額外的 ads.js 幫助判斷
我們知道 AdBlock 會(huì)屏蔽頁(yè)面中類似名稱為 adsbygoogle.js、ads.js 的腳本文件，所以我們可以利用這個(gè)特點(diǎn)來(lái)引入一個(gè)自己的 ads.js 來(lái)幫助判斷。如何實(shí)現(xiàn)呢?
首先創(chuàng)建一個(gè) ads.js 文件，這個(gè)文件里只有一句話：
var isAdEnabled = !!1;
然后，我們?cè)诰W(wǎng)頁(yè)頁(yè)面上試圖引入這個(gè)腳本文件：
<script src="ads.js" type="text/javascript"></script>
如果存在 AdBlock，ads.js 會(huì)被屏蔽加載，因此 isAdEnabled 這個(gè)變量就不會(huì)被建立。
于是，我們這樣來(lái)檢測(cè)：
var isAdEnabled = isAdEnabled || !1;
if( !isAdEnabled ){
//Ads.js not loaded
// AdBlock detected
}
這樣，如果 ads.js 被屏蔽了，isAdEnabled 就會(huì)被初始化為 false。這個(gè)方案的可能性也很高。
寫在最后
不僅僅有上述的檢測(cè)代碼，還有人甚至做好了 js 插件、wordpress 插件可以直接現(xiàn)成的用，它們功能豐富并且可以自定義設(shè)置。你可以根據(jù)自己的情況選擇鐘意的方案。但在此應(yīng)當(dāng)注意的是，廣告并不總是壞的，相反，網(wǎng)絡(luò)上存在著很多有價(jià)值的廣告。如果自己的網(wǎng)站因?yàn)閺V告的問(wèn)題被用戶反感，那么廣告提供商和網(wǎng)站管理員都應(yīng)該想想怎么著手去改善這一切，而不應(yīng)該激怒用戶而讓他們用上 AdBlock，最后雙方都有損失。
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
