最新消息:

使用Nginx反向代理解决 Google Analytics 被墙问题

技术 admin 2986浏览 0评论

网站使用了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反向代理使用的一些坑

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&amp;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反向代理使用的一些坑

Nginx反向代理使用的一些坑(续)–gzip/gunzip 与sub_filter的那些事

Nginx反向代理使用的一些坑(续)–gzip,br压缩算法 与sub_filter的那些事

Nginx反向代理使用的一些坑(续)– Cookie的那些事

Nginx反向代理使用的一些坑(续)– GeoIP的那些事

Chrome 扩展增加Google Analytics支持

转载请注明:出家如初,成佛有余 » 使用Nginx反向代理解决 Google Analytics 被墙问题

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址