nginx之将 Google Analytics 跟踪代码段注入(inject) Nginx 反向代理背后的网站_编程设计

我一直想使用 Google Analytics 有一段时间了，我想避免手动将跟踪代码段插入每个网页。此外，Plex、Deluge 等第三方应用程序甚至可能不支持这样做。

我在 Nginx 反向代理后面托管所有这些服务。我知道可以将 Google Analytics 跟踪代码段注入(inject)每个 Location使用 ngx_http_sub_module 阻止结合 sub_filter指示。

在过去的几个小时里，我一直在试图弄清楚如何做到这一点，但在几种不同的配置下都失败了。基本上，我已经到了三个不同的时间点，我的配置将通过 linting 测试并且我可以成功启动 Nginx 服务，但是尽管 Nginx 按预期运行，但没有任何指标被传递给 Google Analytics。

有人有想法么？是否需要转发端口或任何东西才能使用 Google Analytics？目前所有传出请求都未经过滤，值得一提。以下是我迄今为止尝试过的配置:

1) 全局网站标签:

http { 
    server  { 
        listen  443 ssl; 
        server_name www.website.com; 
        ssl  on; 
        location  / { 
            proxy_pass http://12.34.56.78:2000/; 
 
            sub_filter   </head> 
                    "<script> 
                        <!-- Global site tag (gtag.js) - Google Analytics --> 
                        <script async src='https://www.googletagmanager.com/gtag/js?id=UA-##########-1'></script> 
                        <script> 
                          window.dataLayer = window.dataLayer || []; 
                          function gtag(){dataLayer.push(arguments);} 
                          gtag('js', new Date()); 
 
                      gtag('config', 'UA-##########-1'); 
                    </script> 
                </script>"; 
            sub_filter_once on; 
    } 
}

2) Analytics.js:

http { 
    server  { 
        listen  443 ssl; 
        server_name www.website.com; 
        ssl  on; 
        location  / { 
            proxy_pass http://12.34.56.78:2000/; 
 
            sub_filter </head> '<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","https://www.google-analytics.com/analytics.js","ga");ga("create","UA-##########","auto");ga("send","pageview");</script></head>';         
 
            sub_filter_once on; 
    } 
}

3) 配置中没有嵌入 JS 片段的 Analytics.js:

http { 
    server  { 
        listen  443 ssl; 
        server_name www.website.com; 
        ssl  on; 
        location  / { 
            proxy_pass http://12.34.56.78:2000/; 
 
            sub_filter  </head> 
            '<script language="javascript" src="/etc/nginx/analytics.js"></script></head>'; 
            sub_filter_once on; 
    } 
}

上面引用的 analytics.js 文件:

<!-- Google Analytics --> 
<script> 
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 
 
ga('create', 'UA-##########', 'auto'); 
ga('send', 'pageview'); 
</script> 
<!-- End Google Analytics -->

系统信息:

操作系统:CentOS 7.5
Nginx 版本:1.15.2
包含的模块: http_ssl_module , stream , http_stub_status_module , http_sub_module
我消费过的来源:

抱歉，这些不是超链接。 StackOverflow 说我的超链接没有“正确格式化为代码”，因为拒绝让我发表这篇文章。将它们格式化为代码破坏了超链接语法，所以我不得不这样做......

1) GitHub Gist 概念证明: https://gist.github.com/jirutka/5279057

2) 博客帖子概念证明: https://adarrohn.com/blog/nginx-google-analytics

3) Ruby-论坛问题: https://www.ruby-forum.com/topic/1985946

4) 谷歌分析文档 gtag.js : https://developers.google.com/analytics/devguides/collection/gtagjs/

5) 谷歌分析文档 analytics.js : https://developers.google.com/analytics/devguides/collection/analyticsjs/

6) 关于 http_sub_module 的 Nginx 文档: https://nginx.org/en/docs/http/ngx_http_sub_module.html

请您参考如下方法:

这就是它对我有用的方式

sub_filter '</body>' '<script src="/tealeaf/file.js" type="text/javascript"></script>\r\n</body>';

IE。在一行中。

向每个网站页面添加 GA 代码并不是当今人们所做的。我建议开始使用 GTM 并在每个页面上插入 GTM 代码片段(使用相同的方法)。通过这种方式，您将能够自定义您的数据收集，而无需更改跟踪代码 [太多]。

要检查的事情，您没有在此处提供有问题的网站网址，但是
- 请加载页面并确保 GA 代码段包含在标记之前

请在浏览器中打开开发人员工具，切换到网络选项卡并 cntrl+f5(硬刷新)页面。看看是否从谷歌服务器加载了文件 analytics.js

如果是，请查看是否向/collect 谷歌分析端点发出了请求。
如果这是真的，您应该在 GA 中看到数据。

如果以上都不是，我会查看 nginx 中的 proxy_pass 位置是否支持 sub_flter

2018 年 8 月 8 日编辑