将 Google 分析跟踪代码段注入 Nginx 反向代理后面的网站

Question

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

我在 Nginx 反向代理后面托管所有这些服务。我知道可以结合使用 ngx_http_sub_module 和 sub_filter 指令将 Google Analytics 跟踪代码段注入到每个 Location 块中。

在过去的几个小时里，我一直在努力弄清楚如何做到这一点，但在几种不同的配置下都失败了。基本上，我现在已经达到了三个不同的点，我的配置将通过 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) Analytics.js 配置中没有嵌入 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

我消耗的来源：

抱歉，这些不是超链接。 Whosebug 说我的超链接不是 "Properly Formatted as Code" 因为拒绝让我做这个 post。将它们格式化为代码破坏了超链接语法，所以我不得不这样做....

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

2) 博客 Post 概念验证：https://adarrohn.com/blog/nginx-google-analytics

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

4) Google gtag.js 上的分析文档：https://developers.google.com/analytics/devguides/collection/gtagjs/

5) Google 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

Answer 1

这就是我的工作方式

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

即在一行中。

在每个网站页面上添加 GA 代码不是现在人们所做的。我建议开始使用 GTM 并在每个页面上插入 GTM 代码片段（使用相同的方法）。这样一来，您将能够在不更改跟踪代码的情况下自定义您的数据收集 [很多]。

需要检查的事项，您没有在此处提供您的网站 url，但是 - 请加载页面并确保在标签前包含 GA 代码段

请在浏览器中打开开发人员工具，切换到网络选项卡并按 cntrl+f5（硬刷新）页面。然后查看文件 analytics.js 是否从 google 服务器
如果是，请查看是否发出了对 /collect google 分析端点的请求。如果这是真的，您应该会在 GA 中看到数据。

如果上面的none，我会看看nginxproxy_pass位置是否支持sub_flter

2018 年 8 月 8 日编辑

将 Google 分析跟踪代码段注入 Nginx 反向代理后面的网站

Injecting Google Analytics Tracking Snippet into Websites Behind Nginx Reverse Proxy

nginx

google-analytics

centos

reverse-proxy

javascript-injection