网站使用了Google Analytics作为网站统计工具,为同时支持Web端和Chrome扩展,因此在创建账号时候选择了Google Analytics 4 with Google Tag Manager,Google Analytics管理后台生成的嵌入代码如下:
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-x"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-xxxxxxxxx-x'); </script>
其中UA-xxxxxxxxx-x 是对应的Google Analytics ID。
由于 googletagmanager.com 在中国大陆被墙,因此先使用Nginx反向代理 googletagmanager.com ,Google Analytics倒可以正常采集数据了,但抓包发现每一次网站装载都会访问 google-analytics.com 和 googletagmanager.com,但google-analytics.com 和 googletagmanager.com 也无法正常访问,导致网站页面装载完成时间较长。
查看 https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-x ,会发现js代码中会装载 www.google-analytics.com 和 www.googletagmanager.com 域名下的js资源,比较重要的包括:https://www.google-analytics.com/analytics.js 和 https://www.googletagmanager.com/gtm.js 。
https://www.google-analytics.com/analytics.js 和 https://www.googletagmanager.com/gtm.js 都会访问 www.google-analytics.com , www.googletagmanager.com 相关的js资源。
因此如果能够利用Nginx的 sub_filter 模块,将相关js文件中的www.google-analytics.com , www.googletagmanager.com 动态替换为当前主机的域名 $server_name ,然后结合Nginx方向代理功能,应该可以解决对应问题。
Nginx sub_filter的使用,可以参考:
Nginx反向代理使用的一些坑(续)–gzip/gunzip 与sub_filter的那些事
Nginx对应的配置代码:
location /gtm.js { sub_filter 'www.googletagmanager.com' $server_name; sub_filter_types *; sub_filter_once off; proxy_set_header Accept-Encoding ''; proxy_pass https://www.googletagmanager.com; proxy_redirect off; # cache on server proxy_cache_key $host$uri$is_args$args; proxy_cache_valid 200 304 60m; # cache in client browser expires 1h; } location /gtag/js { sub_filter 'www.googletagmanager.com' $server_name; sub_filter 'analytics.google.com' $server_name; sub_filter 'www.google-analytics.com' $server_name; sub_filter_types *; sub_filter_once off; proxy_set_header Accept-Encoding ''; proxy_pass https://www.googletagmanager.com; proxy_redirect off; proxy_cache_key $host$uri$is_args$args; proxy_cache_valid 200 304 60m; expires 1h; } location /ga { proxy_set_header X-real-ip $remote_addr; rewrite ^/ga/(.*)$ '/$1?$args&uip=$remote_addr'; proxy_pass https://www.google-analytics.com; proxy_set_header User-Agent $http_user_agent; break; } location /analytics.js { sub_filter 'www.googletagmanager.com' '$server_name'; sub_filter 'analytics.google.com' $server_name; sub_filter 'www.google-analytics.com' '$server_name/ga'; sub_filter_types *; sub_filter_once off; proxy_set_header X-real-ip $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Referer https://www.google-analytics.com; proxy_set_header Host www.google-analytics.com; proxy_pass https://www.google-analytics.com; proxy_set_header Accept-Encoding ""; } location /g/collect { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass https://analytics.google.com$uri$is_args$args&uip=$remote_addr; proxy_redirect off; proxy_cache_key $host$uri$is_args$args; proxy_cache_valid 200 304 60m; proxy_cache off; expires epoch; # browser no-cache control }
经测试,完美解决。
注意:以上代码仅适用于Google Analytics 4 with Google Tag Manager,Universal Analytics(上一代 Google Analytics)生成的代码不同,可与参考:
https://gist.github.com/paivaric/211ca15afd48c5686226f5f747539e8b
https://ruby-china.org/topics/27400
同样的思路,可以反向代理Google Adsense,用于规避AdBlock等浏览器拦截扩展对Google 广告的拦截。也可以反向代理reCaptcha。
关于Nginx 反向代理以及sub_filter使用的一些经验。
Nginx反向代理使用的一些坑(续)–gzip/gunzip 与sub_filter的那些事
Nginx反向代理使用的一些坑(续)–gzip,br压缩算法 与sub_filter的那些事