绕过 Adblock / uBlock 等浏览器插件屏蔽 Google Analytics

0、前言

Google Analytics 是一款免费的应用效果衡量解决方案,可提供关于应用的使用情况和用户互动度的数据分析。

作为站长,应该早已对 Google Analytics 等网站统计分析工具比较熟悉了。虽然部分 CDN 厂商,例如 Cloudflare,自带网站数据统计功能:

Cloudflare 24 小时统计

然而对于网站访客分析,有效数据只有三个:独立访问者(UV),请求数和流量,远远不够。而且 Cloudflare 似乎会把机器流量(爬虫等)算进去,使得统计数据偏高(我都不知道我站这么多访客)。因此,我们需要 Google Analytics 等基于 JavaScript 的网站统计工具,详细统计用户感兴趣的页面、来源,以及停留时间、跳出率等重要指标。

Google Analytics 报告概况

嗯,虽然我也不经常研究这些数据,毕竟博客数据好又不能赚钱

使用第三方统计工具又带来了一个问题:加载统计脚本的地址甚至整个域名早已被 “广告屏蔽器” “阻止跟踪” 等浏览器插件或功能屏蔽,并且开启这类功能或插件的用户似乎是大多数。因此,直接使用统计平台给出的脚本会导致统计数据偏低。

经过一番研究,我成功找到了绕过屏蔽的方法。如果你使用其他统计程序,也可以使用类似思路绕过。

1、方法

有两种思路:一种是使用修改过的脚本加载 Google Analytics,另一种是直接使用现成的工具,例如 Cloudflare Zaraz,把服务 “卸载” 到 CDN 侧。

1.1、使用修改版脚本

推荐使用:

A very Minimal Google Analytics 4 Snippet
https://dariusz.wieckiewicz.org/en/minimal-google-analytics-4-snippet/

因为这个版本比原版代码小 176KB1,因此甚至不需要引用外部 JS,直接把代码插入 HTML 中即可:

JavaScript
1
2
3
<script>
enScroll=!1,enFdl=!1,extCurrent=void 0,filename=void 0,targetText=void 0,splitOrigin=void 0;const lStor=localStorage,sStor=sessionStorage,doc=document,docEl=document.documentElement,docBody=document.body,docLoc=document.location,w=window,s=screen,nav=navigator||{},extensions=["pdf","xls","xlsx","doc","docx","txt","rtf","csv","exe","key","pps","ppt","pptx","7z","pkg","rar","gz","zip","avi","mov","mp4","mpe","mpeg","wmv","mid","midi","mp3","wav","wma"];function a(e,t,n,o){const j="G-XXXXXXXXXX",r=()=>Math.floor(Math.random()*1e9)+1,c=()=>Math.floor(Date.now()/1e3),F=()=>(sStor._p||(sStor._p=r()),sStor._p),E=()=>r()+"."+c(),_=()=>(lStor.cid_v4||(lStor.cid_v4=E()),lStor.cid_v4),m=lStor.getItem("cid_v4"),v=()=>m?void 0:enScroll==!0?void 0:"1",p=()=>(sStor.sid||(sStor.sid=c()),sStor.sid),O=()=>{if(!sStor._ss)return sStor._ss="1",sStor._ss;if(sStor.getItem("_ss")=="1")return void 0},a="1",g=()=>{if(sStor.sct)if(enScroll==!0)return sStor.sct;else x=+sStor.getItem("sct")+ +a,sStor.sct=x;else sStor.sct=a;return sStor.sct},i=docLoc.search,b=new URLSearchParams(i),h=["q","s","search","query","keyword"],y=h.some(e=>i.includes("&"+e+"=")||i.includes("?"+e+"=")),u=()=>y==!0?"view_search_results":enScroll==!0?"scroll":enFdl==!0?"file_download":"page_view",f=()=>enScroll==!0?"90":void 0,C=()=>{if(u()=="view_search_results"){for(let e of b)if(h.includes(e[0]))return e[1]}else return void 0},d=encodeURIComponent,k=e=>{let t=[];for(let n in e)e.hasOwnProperty(n)&&e[n]!==void 0&&t.push(d(n)+"="+d(e[n]));return t.join("&")},A=!1,S="https://www.google-analytics.com/g/collect",M=k({v:"2",tid:j,_p:F(),sr:(s.width*w.devicePixelRatio+"x"+s.height*w.devicePixelRatio).toString(),ul:(nav.language||void 0).toLowerCase(),cid:_(),_fv:v(),_s:"1",dl:docLoc.origin+docLoc.pathname+i,dt:doc.title||void 0,dr:doc.referrer||void 0,sid:p(),sct:g(),seg:"1",en:u(),"epn.percent_scrolled":f(),"ep.search_term":C(),"ep.file_extension":e||void 0,"ep.file_name":t||void 0,"ep.link_text":n||void 0,"ep.link_url":o||void 0,_ss:O(),_dbg:A?1:void 0}),l=S+"?"+M;if(nav.sendBeacon)nav.sendBeacon(l);else{let e=new XMLHttpRequest;e.open("POST",l,!0)}}a();function sPr(){return(docEl.scrollTop||docBody.scrollTop)/((docEl.scrollHeight||docBody.scrollHeight)-docEl.clientHeight)*100}doc.addEventListener("scroll",sEv,{passive:!0});function sEv(){const e=sPr();if(e<90)return;enScroll=!0,a(),doc.removeEventListener("scroll",sEv,{passive:!0}),enScroll=!1}document.addEventListener("DOMContentLoaded",function(){let e=document.getElementsByTagName("a");for(let t=0;t<e.length;t++)if(e[t].getAttribute("href")!=null){const n=e[t].getAttribute("href"),s=n.substring(n.lastIndexOf("/")+1),o=s.split(".").pop();(e[t].hasAttribute("download")||extensions.includes(o))&&e[t].addEventListener("click",fDl,{passive:!0})}});function fDl(e){enFdl=!0;const t=e.currentTarget.getAttribute("href"),n=t.substring(t.lastIndexOf("/")+1),s=n.split(".").pop(),o=n.replace("."+s,""),i=e.currentTarget.text,r=t.replace(docLoc.origin,"");a(s,o,i,r),enFdl=!1}
</script>

其中,G-XXXXXXXXXX 应该被替换为自己的 Google Analytics 的跟踪 ID,https://www.google-analytics.com/g/collect 需要替换为自建的反向代理。

以 Netlify 为例:如果想反向代理原 URL 至 https://example.com/api/c(尽量避免出现 collecttrace 等字眼,防止被某些广告关键词规则屏蔽),可以在 _redirects 文件添加一行:

Text
1
/api/c https://www.google-analytics.com/g/collect 200

Cloudflare Workers 也可以实现相同效果:

Text
1
2
3
4
5
6
7
8
9
10
const hostname = "https://www.google-analytics.com"

function handleRequest(request) {
    let url = new URL(request.url);
    return fetch(new Request(hostname + url.pathname + url.search,request))
}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

然后添加 Workers 路由,例如 https://example.com/api/c*(不要遗漏通配符)。

1.2、使用 Cloudflare Zaraz

既然都使用 Cloudflare Workers 了,不如直接使用 Cloudflare 的免费功能:Zaraz。

Cloudflare Zaraz 是开发人员和营销人员用来加载 Google Analytics 4、Facebook CAPI、TikTok 等第三方工具的解决方案。借助 Zaraz,Cloudflare 客户只需点击几下即可轻松切换到服务器端数据收集,无需设置和维护自己的云端环境,也不需要对网站进行额外变更来完成安装。

在 Cloudflare 控制台左侧找到 Zaraz 并选择 Google Analytics 4(注意,有一个 Google Analytics 是旧版本):

Zaraz 首页

Zaraz 工具列表

一步步配置即可:

Zaraz 介绍

Zaraz 授权

Zaraz 工具设置

然后在 Zaraz 的设置页面(不是工具设置,是全局设置)找到 “终结点”:

Zaraz 终结点

默认的 /cdn-cgi/zaraz/ 已经被 uBlock 等屏蔽了,因此可以改一些没有特征的路径。

如果路径之后被屏蔽,还有一个终极方法:改成 /jquery.js/bootstrap.min.js 等知名公共库的文件名。

经测试修改终结点后不会被浏览器插件拦截,Google Analytics 统计数据比以前多了不少。

3、效果

本站使用此方案后,Google Analytics 统计数据各项指标 “大幅增加”:

访客量(用户数)曲线

数据分析

然而,这套方案也存在局限性:因为上述方法使用 CDN 节点给 Google Analytics 提交数据,所以获取的“访客地区”是访客命中的 CDN 节点地区。例如:如果 Netlify 把亚洲用户都分流到新加坡节点,统计数据中访客地区将没有 “中国大陆” “香港” 等,而只有 “新加坡”。

目前使用 Cloudflare Zaraz 没有出现某地区用户全部消失、变成另一地区用户激增的情况,也许是 Zaraz 做了优化。


  1. Official Google Analytics 4, Global Site Tag (gtag.js) = 179kB+. Snippet (current version, minified) just 3kB without script tag.

绕过 Adblock / uBlock 等浏览器插件屏蔽 Google Analytics

https://blog.tsinbei.com/tw/archives/1750/

文章作者
Hsukqi Lee
发布于

2024-07-03

修改于

2024-07-04

许可协议

CC BY-NC-ND 4.0

评论

昵称
邮箱
网址
暂无