簡單檢測用戶是否開啓廣告屏蔽

2024-03-05 · 1 分鐘 · adsense ·

大部分小站要維持運轉，離不開廣告收益，域名、主機等費用雖然不高，但很少人願意長期入不敷出。

可持續的良性生態是：服務方創造內容，服務了用戶，同時獲得收益。

有一天我訪問阮一峯的網站的時候，提示：

您使用了廣告攔截器，導致本站內容無法顯示。

請將 www.ruanyifeng.com 加入白名單，解除廣告屏蔽後，刷新頁面。謝謝。

原因是我開啓了 AdBlocker Ultimate 廣告攔截插件，加入白名單刷新後，頁面展示正常。一般有較認真寫內容的網站，我都會選擇允許展示廣告，這份堅守並不容易。比如我的這個站點，每寫一個文章差不多要消耗 2 個小時，目前已連續虧損三年，沒倒閉是已因爲還有一份願意分享的心，目前虧得起。

做網站的時代已經過去，Vivo、華爲等手機默認瀏覽器即開啓廣告屏蔽，不信去手機專賣店試試，因爲我試過了 😅。從這個角度說，微信公衆號還是有優勢的，公衆號的瀏覽器是微信在掌控！裏面各種廣告拉滿，當然廣告多了，會適得其反。

題外話不多說，自己動手來實現一個類似功能。

1. 核心代碼

 1function detectAdblock() {
 2  try {
 3    fetch(
 4      new Request(
 5        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
 6        {
 7          method: "HEAD",
 8          mode: "no-cors",
 9        }
10      )
11    ).catch((error) => {
12      showNotification();
13    });
14  } catch (e) {
15    // Request failed, likely due to ad blocker
16    showNotification();
17  }
18}
19
20function showNotification() {
21  var sponsor = document.querySelector("#my-content");
22  var prompt = document.createElement("div");
23  prompt.className = "content";
24  prompt.style =
25    "hborder: 1px solid #c6c6c6;border-radius: 4px;background-color: #f5f2f0;padding: 15px; font-size: 14px;";
26  prompt.innerHTML =
27    "<h1>您使用了廣告攔截器，導致本站內容無法顯示</h1><h2> You are using an ad blocker, which prevents the content of this site from being displayed</h2> <p>創作不易，小站依賴廣告維持運轉，還請將 <font color='green'><strong>mephisto.cc</strong></font> 加入白名單，解除廣告屏蔽後，刷新頁面。謝謝🙏</p> <p>Please add <font color='green'><strong>mephisto.cc</strong></font> to the whitelist, unblock the advertising, and refresh the page. Thank you 🙏</p> <img src='/images/unblock-ads.webp'/> <img src='/images/whitelist.webp'/>";
28  sponsor.parentNode.replaceChild(prompt, sponsor);
29}
30
31setTimeout(detectAdblock, 1000);

原理是檢測廣告鏈接 HEAD 方法訪問是否正常，不正常就把 id 爲my-content的內容替換爲指定提示信息，提示用戶解除廣告屏蔽。

有讀者會問，這樣怎麼排除網絡異常呢？排除不了，被錯殺了，無情又暴力...

這對我來說簡單好用可接受，因爲讀者訪問不了廣告鏈接(能訪問也不一定展示廣告，廣告聯盟決定的)，也就是說能搞錢的概率爲零，且絕大部分用戶都是可以訪問這個鏈接的，國內還沒屏蔽。看不了的用戶，會去訪問別的站點，沒毛病。用戶能修復自己的網絡問題，自然能訪問。萬一這個鏈接本身掛了呢？概率微乎其微，畢竟人家市值萬億美元，超有本事跨國公司，不用操心。它都掛了，損失點有什麼關係，這樣想，即可心安理得。退一步講，這個檢測條件可以不斷改動，優化成自己想要的模樣。

其實每個廣告屏蔽插件的邏輯不一，加入了白名單，還是訪問不了，這種狀況也是未考慮的，有待反饋優化。