使用外挂 JS 的方式来统计数据,虽然可以统计真实的访客记录,但是会被 uBlock 此类的广告拦截插件给直接拦截掉,以至于无法准确的获取访客数据。
简单了解了下此类插件的拦截策略,是通过检测脚本文件名进行的。可以通过修改 JS 文件名来进行防止统计信息脚本被拦截。
方法一(推荐)
官方在 1.26.0 版本上增加了 TRACKER_SCRIPT_NAME 这个环境变量来提供修改统计脚本的操作,这也是本站现在使用的方法。
但是此环境变量中的值,有些情况会失效,更换即可,原因未知。
打开目录中的 .env 文件,添加以下文本:
1
| TRACKER_SCRIPT_NAME=自定义名称
|

输入完成后保存即可。
重启服务,修改网站链接中的脚本地址
重启UMAMI服务
访问网址,修改已生效
使用 CloudFlare Workers修改名称
这个方法是以为大佬在项目讨论区分享的,也试了以下,效果一致。
新建CloudFlare Workers
左侧选择 Workers,然后创建服务

选择启动器,然后创建服务
服务名称自定义,启动器选择 HTTP 处理程序。

然后点击快速编辑,并将以下信息 修改输入 并 保存。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| const ScriptName = '/umami.js'; //自定义脚本名称 const Endpoint = '/foo/bar'; const UmamiUrl = 'https://bcon.roywang.cn'; //UMAMI服务域名地址。 const corsHeaders = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS', 'Access-Control-Max-Age': '86400', }; const ScriptWithoutExtension = ScriptName.replace('.js', '') addEventListener('fetch', event => { event.passThroughOnException(); event.respondWith(handleRequest(event)); }) async function handleRequest(event) { const pathname = new URL(event.request.url).pathname const [baseUri, ...extensions] = pathname.split('.') const clientIP = event.request.headers.get("CF-Connecting-IP") if (baseUri.endsWith(ScriptWithoutExtension)) { return getScript(event, extensions) } else if (pathname.endsWith(Endpoint)) { return postData(event) } return new Response(null, {status: 404}) } async function getScript(event, extensions) { let response = await caches.default.match(event.request); if (!response) { response = await fetch(UmamiUrl +"/umami.js"); var js = await response.text(); js = js.replace("/api/collect", Endpoint); response = new Response(js, { headers: { ...response.headers, ...corsHeaders, 'Access-Control-Allow-Headers': response.headers.get('Access-Control-Request-Headers'), }, }) event.waitUntil(caches.default.put(event.request, response.clone())); } return response; } async function postData(event) { const request = new Request(event.request); request.headers.delete('cookie'); response = await fetch(UmamiUrl +"/api/collect", request); var js = await response.text(); response = new Response(js, { headers: { ...response.headers, ...corsHeaders, 'Access-Control-Allow-Headers': request.headers.get('Access-Control-Request-Headers'), }, }); return response; }
|

文件名称修改成功。
CloudFlare Workers 绑定自定义域名
域名需要 NS 接入CloudFlare,增加解析 至 8.8.8.8,并且打开 CloudFlare 代理

在左侧选择 Workers,并选择添加路由。
输入路由,以及选择服务、环境。
此处有个误区,路由在域名后面需要添加 /* 很多用户在使用时都会犯这个错误。

修改网站中的脚本地址。

第一种方法最简单,也最推荐,当然如果服务的线路非常差,比CloudFlare 还差的话,推荐使用第二种方法。
如后续还被屏蔽,只需重新修改脚本名称即可。