?

DEMO: http://sources.ikeepstudying.com/anti-adblock-killer/

?

有些網(wǎng)頁上充斥著令人厭惡的廣告，這些廣告不僅阻礙了信息的獲取，有的還嚴(yán)重影響了瀏覽者的心情。特別是某些毫不相關(guān)的多媒體廣告和彈出式窗口，不僅讓人感到被騷擾，還很容易誤點(diǎn)到，浪費(fèi)寶貴的時(shí)間。由此便誕生了大名鼎鼎的跨平臺(tái) AdBlock 插件，在任何主流瀏覽器上都有它的擴(kuò)展或插件，用戶可以安裝它并屏蔽絕大多數(shù)的廣告。

既然 AdBlock 有檢測(cè)廣告并屏蔽它們的方法，作為網(wǎng)頁制作者，其實(shí)也有反過來檢測(cè) AdBlock 的方法。

?

為什么要檢測(cè) AdBlock

這是一個(gè)有爭(zhēng)論的問題：用戶有選擇不看廣告、在瀏覽器頁面上銷毀廣告的權(quán)利，網(wǎng)站也有捆綁廣告和信息一同派發(fā)給你并收取廣告商展示費(fèi)用的自由。這兩者都不能互相干預(yù)，并且在沒有明確法律法規(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)有的高度，若小于就說明它被置空塌陷了，也即說明啟用了 AdBlock。

代碼類似如下

      if( document.getElementById('ads').clientHeight < 90 ){

//AdBlock Detected

}
    

?

此方案的可行性為中。某些情況下 AdBlock 屏蔽了某個(gè)廣告之后的處理情形比較特殊，不會(huì)使得廣告模塊塌陷，而是維持設(shè)定的高度顯示空白，那個(gè)時(shí)候就不管用了。

?

檢測(cè)可見廣告的個(gè)數(shù)

這是一個(gè)和上述類似的方法，也很樸實(shí)，那就是檢測(cè)當(dāng)前頁面上的廣告?zhèn)€數(shù)是否達(dá)到預(yù)期，因?yàn)槟承V告可能并沒有觸發(fā) AdBlock 的規(guī)則得以顯示，所以可以利用檢查廣告的個(gè)數(shù)的方法來達(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)來檢測(cè) AdBlock。

其代碼看起來類似于

      if ( typeof(window.google_jobrunner) != 'object' ){

// AdSense js not loaded

// AdBlock detected

}
    

?

檢測(cè) adsbygoogle 類型是否是數(shù)組

這個(gè)方法僅僅適用于 Google AdSense 廣告。如果你使用了含有 ins 標(biāo)簽的新異步代碼，則可以使用這個(gè)方法。其原理是，adsbygoogle 在當(dāng)前頁面加載時(shí)被初始化為一個(gè)數(shù)組，而當(dāng) AdSense 的代碼被加載時(shí)，它被進(jìn)化為一個(gè)對(duì)象 object，而 AdBlock 會(huì)阻止 AdSense 代碼的加載。因此，我們通過檢查 adsbygoogle 的狀態(tài)就可以知道 AdBlock 有沒有安裝。

其代碼應(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ì)阻止廣告代碼的加載，因此，我們可以通過嘗試模擬加載一個(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ì)屏蔽頁面中類似名稱為 adsbygoogle.js、ads.js 的腳本文件，所以我們可以利用這個(gè)特點(diǎn)來引入一個(gè)自己的 ads.js 來幫助判斷。如何實(shí)現(xiàn)呢？

首先創(chuàng)建一個(gè) ads.js 文件，這個(gè)文件里只有一句話：

      var isAdEnabled = !!1;
    

?

然后，我們?cè)诰W(wǎng)頁頁面上試圖引入這個(gè)腳本文件：

      <script src="ads.js" type="text/javascript"></script>
    

?

如果存在 AdBlock，ads.js 會(huì)被屏蔽加載，因此 isAdEnabled 這個(gè)變量就不會(huì)被建立。

于是，我們這樣來檢測(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ǎng)站管理員都應(yīng)該想想怎么著手去改善這一切，而不應(yīng)該激怒用戶而讓他們用上 AdBlock，最后雙方都有損失。

?

DEMO: http://sources.ikeepstudying.com/anti-adblock-killer/

?

原文： http://blog.netsh.org/posts/adblock-detect_2017.netsh.html

?

justcode.ikeepstuding.com