2024-07-03

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

0、前言

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

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

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

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

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

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

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/

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

JavaScript

     <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（尽量避免出现 collect、trace 等字眼，防止被某些广告关键词规则屏蔽），可以在 _redirects 文件添加一行：

Text

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

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

Text

     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 是旧版本）：