解决 Umami 被 AdBlock 屏蔽问题

之前重写了下个人主页，使用了 Umami 做访问统计，还是老问题：用户会安装 AdBlock 导致访问统计失效。 AdBlock 原理相关的点可以查看解决 Vercel Analytics 被 AdBlock 屏蔽问题，Umami 被屏蔽的规则是 ||umami.is^$3p，脚本地址和数据上报地址都被屏蔽了，所以我们得使用 Cloudflare Workers 来反代一下 Umami。 方案 在 Cloudflare Workers 创建一个 Worker，贴入下面的 JS 代码，如果你使用的官方服务，不需要修改代码 (三方服务记得 UMAMI_HOST 修改为服务地址)，如果是自建服务，可以使用 TRACKER_SCRIPT_NAME 和 COLLECT_API_ENDPOINT 环境变量定义脚本地址和数据上报地址，无需反代。 const UMAMI_HOST = 'https://eu.umami.is' export default { async fetch(request, env, ctx) { const { pathname, search } = new URL(request.url) if (pathname.endsWith('.js')) { let response = await caches.default.match(request) if (!response) { response = await fetch(`${UMAMI_HOST}/script.js`, request) ctx.waitUntil(caches.default.put(request, response.clone())) } return response } const req = new Request(request) req.headers.delete("cookie") req.headers.append('x-client-ip', req.headers.get('cf-connecting-ip')) return fetch(`${UMAMI_HOST}${pathname}${search}`, req) }, }; 创建好 Worker 后，配置好域名，测试脚本地址是否可以正常访问，我的是 https://ums.miantiao.me/mt-demo.js。其中 mt-demo 可以替换为任意伪装地址，上面的脚本已经适配。 然后将脚本注入到你的网站项目，官方文档在 https://umami.is/docs/tracker-configuration，也可以参考我的代码： <script defer src="https://ums.miantiao.me/mt-demo.js" data-host-url="https://ums.miantiao.me" data-website-id="0a10de75-03be-4fec-a521-4c62b91650ac"></script> src 是脚本地址，data-host-url 是数据上报地址，data-website-id 是站点 ID，注意站点 ID 不要写错，否则无法上报数据。 可以在面条实验室或者本站验证。