很多網站都會擺放廣告來增加收入以維持主機設備開銷,但很多人都會安裝 AdBlock 等等的瀏覽器插件來阻擋廣告,本篇教學就是要教站方如何使用 JavaScript 偵測廣告阻擋並做出相對行動!

只要在網站 HTML </body> 之前插入以下程式碼

window.onload = function () {
    const killads = document.createElement('ins');
    killads.innerHTML = '&nbsp;';
    killads.className = 'adsbygoogle';
    document.body.appendChild(killads);
    setTimeout(function () {
        if (killads.offsetHeight === 0) {
            //偵測到廣告阻擋執行
            alert("偵測到廣告阻擋!!!");
        } else {
            alert("沒有偵測到廣告阻擋。");
        }
        killads.remove();
    }, 500);
};

在判斷式內可以修改成你想執行的程式碼,這偵測原理是創建一個空白的假廣告欄位,然後判斷 DOM 的高度,如果高度為 0 代表廣告被阻擋了~

以下為執行範例 (範例執行怪怪的,可以嘗試點擊右下角 Rerun 重新執行)

本站也是採用同程式碼,下圖是本站的訊息,可以參考XDD

張文相 Zhang Wenxiang 的頭像

張文相 Zhang Wenxiang

我是本站的站長,是一位目前就讀於高雄科技大學的學生,喜歡 Coding XDD

【JavaScript】廣告阻擋偵測,網頁判斷是否安裝廣告阻擋 (AdBlock Detect) - QR Code

本站內容未經授權許可請勿擅自抄襲
如果需引用部分內容請註明來源網址

發表時間:2020/11/10 21:28:38

此頁面網址:https://blog.reh.tw/archives/2273

Facebook 留言