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

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