JavaScript:AdBlocker Detection 廣告攔截器偵測

2019/07/30 1,621 0 網站技術 , JavaScript

相信很多人都有使用「AdBlocker」,中文為「廣告攔截器」,舉例來說:Adblock Plus、AdBlock 等,它可以安裝在瀏覽器上阻擋網頁上的各種廣告,我也相信不少網站的廣告放置過多或者太頻繁顯示的確很惹人厭,但是還是有努力經營內容型網站的站長與作者需要大家的支持,而且這種網站通常廣告也會適量放置,不會放置過多的廣告造成使用者或訪客的不便,像是本站(萌芽系列網站)的站長就不是喜歡廣告的人,但是為了網站長久經營,放置廣告本來就是必須的,而且收入真的非常少,基本上目前僅可補足網域與主機費用就很了不起了!如果喜歡本站,請透過將本站列入廣告攔截器的白名單以繼續投放優質廣告,以行動支持本站繼續提供好內容!🙏

這篇文章主要是送給多數內容型網站的站主,只要您有投放廣告,就可以透過簡單的 JavaScript 製作簡易的廣告攔截器偵測(AdBlocker Detection),偵測的目的不是要懲罰使用攔截器的訪客,甚至不給其看網頁內容,因為這個做法只會造成站主與訪客間的對立,徹底撕毀雙方的關係,應該是要溫和告知對方可以將自己的網站放入廣告攔截器的白名單,繼續支持好內容的製作與輸出,我想一個喜愛您網站的訪客看到提示,一定會以行動支持您的網站!一個小動作,就能繼續瀏覽免費內容,何樂而不為?

現在開始進入程式的部分,首先描述基本原理,廣告攔截器已經將 Google 廣告必須要引入的「adsbygoogle.js」列入黑名單,只要網站將這個名稱的 JavaScript 檔案引入,廣告攔截器會無條件攔截,我們就利用這一點來偵測是否有使用廣告攔截器,因此首先要建立一個「adsbygoogle.js」檔案,裡面只要這一行程式即可:

var AdBlocker = true; // AdBlocker Detection

如果檔案正常引入,「AdBlocker」的值會是「true」,沒有引入就是空值。

接著就是到網頁中引入它(<head>~</head>):

<script src="adsbygoogle.js"></script>

引入後就可以寫 JavaScript 偵測廣告攔截器了!

<script>
var AdBlocker = AdBlocker || false;
if (!AdBlocker) {
document.write("<h1>您有使用廣告攔截器</h1>");
} else {
document.write("<h1>您沒有使用廣告攔截器</h1>");
}
</script>

偵測邏輯基本上都在程式中呈現了!這邊就不說明,總之您可以直接使用我寫好的程式去做專屬於您網站的「溫馨提示」囉!

▲ HTML 與 JavaScript 原始碼截圖。

▲ 執行結果,開啟與關閉廣告攔截器後都要重新載入網頁才有效果。

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇