解决 Umami 被 AdBlock 屏蔽问题

之前重写了下个人主页，使用了 Umami 做访问统计，还是老问题：用户会安装 AdBlock 导致访问统计失效。

AdBlock 原理相关的点可以查看解决 Vercel Analytics 被 AdBlock 屏蔽问题，Umami 被屏蔽的规则是 ||umami.is^$3p，脚本地址和数据上报地址都被屏蔽了，所以我们得使用 Cloudflare Workers 来反代一下 Umami。

||umami.is^$3p

方案

在 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 不要写错，否则无法上报数据。

可以在面条实验室或者本站验证。

Umami AdBlock