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

👋 相关阅读

• 局域内网的服务器利用个人电脑做跳板机访问互联网
• 教你轻松拥有无限个邮箱
• 解决nginx反向代理proxy不能转发header报头
• 用 Cloudflare Workers 免费反代任意网站，可做谷歌镜像
• typecho使用文件缓存加快打开速度

目前可以选择的免费网站统计越来越少，有很多人选择自建统计，但是自建统计需要维护，所以尝试使用了 Google Analytics 作为网站统计工具。

因为众所周知的原因，Google Analytics 在中国大陆访问不是很顺畅，并且很多国产浏览器都自带广告拦截插件，导致谷歌统计后台统计的数据与实际差距很大。

那么有没有什么更好的方案呢？有的，那就是使用中间件进行反代（前提是服务器本身在能够流畅访问谷歌统计的国家或地区）。

解析

首先为了成功反向代理，需要向配置块中添加 DNS 解析，用于请求谷歌的接口，一般情况下用 127.0.0.1 就可以使用，但是为了防止部分机房的 DNS 请求篡改可以使用自定义 DNS 进行解析。

## CloudFlare Public DNS (IPv4 & IPv6)
#resolver 1.1.1.1 1.0.0.1 [2606:4700:4700::1111] [2606:4700:4700::1001];
## Google Public DNS (IPv4 & IPv6)
resolver 8.8.8.8 8.8.4.4 [2001:4860:4860::8888] [2001:4860:4860::8844];

根据情况选择一个开启即可。

处理

然后添加反向代理的主逻辑，添加两个 location 将请求进行转发，并且使用 sub_filter 模块进行内容重写。

    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 'google-analytics.com'  'wangtwothree.com';
        sub_filter 'www'  'ga';
        
        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 {
        resolver 8.8.8.8;
        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;

        proxy_hide_header "Expires";
        proxy_hide_header "Pragma";
        add_header X-Content-Type-Options "nosniff";
    }

然后在配置文件中加入以上部分，然后在前端引用地址时，将地址换为你的域名后面接谷歌统计引入脚本地址，比如：https://wangtwothree.com/gtag/js?id=G-CVJJJJJJJJ 。

然后就可以在后台看到统计脚本的访问日志了。

比如 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>

则你添加的代码就应该是这样的：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://wangtwothree.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>

VIA

使用 NGiNX 异步处理 Google Analytics 加速访问 - VVavE https://www.vvave.net/archives/nginx-forward-google-analytics-optimized-loading-speed.html

使用Nginx反向代理解决 Google Analytics 访问问题 - 知乎 https://zhuanlan.zhihu.com/p/460606188

×