简单检测用户是否开启广告屏蔽

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的内容替换为指定提示信息，提示用户解除广告屏蔽。

有读者会问，这样怎么排除网络异常呢？排除不了，被错杀了，无情又暴力...

这对我来说简单好用可接受，因为读者访问不了广告链接(能访问也不一定展示广告，广告联盟决定的)，也就是说能搞钱的概率为零，且绝大部分用户都是可以访问这个链接的，国内还没屏蔽。看不了的用户，会去访问别的站点，没毛病。用户能修复自己的网络问题，自然能访问。万一这个链接本身挂了呢？概率微乎其微，毕竟人家市值万亿美元，超有本事跨国公司，不用操心。它都挂了，损失点有什么关系，这样想，即可心安理得。退一步讲，这个检测条件可以不断改动，优化成自己想要的模样。

其实每个广告屏蔽插件的逻辑不一，加入了白名单，还是访问不了，这种状况也是未考虑的，有待反馈优化。