使用 Google 跟踪代码管理器和 Google 分析来跟踪 Chrome 扩展（2020）

Question

我正在开发 chrome 扩展，我希望能够使用 google 分析来跟踪指标。我相信最简单的方法是通过标签管理器，我找到了 this 教程，解释了如何在 chrome 扩展中实现 google 标签管理器。但是，仅遵循本教程对我不起作用，我有几个问题。

是否可以使用 Google Analytics 跟踪 chrome 扩展？如果是这样，我只看过使用 Universal Analytics 的教程，但是可以使用 Google Analytics 4 吗？建议现在就从GA4开始，如果可以的话我也想做。
如何设置数据流？ Web 数据流需要有效的 URL，这并不真正适用于扩展程序。我有一个正在处理的单独网站，我可以包含该网站 URL，但我的目标是跟踪扩展程序，而不是网站。
在 GTM 中调试时，现在需要您添加一个 URL 以进行调试。我的扩展在 amazon.com 上运行，但是当我输入 amazon.com 作为 URL 我得到一个 404，可能是因为跟踪代码实际上并不适用于亚马逊，而是适用于注入的 iframe当我在亚马逊上。我会在这里做什么？

我已将其设置为将 GTM 代码放在一个单独的 js 文件中，该文件被注入到 iframe html 代码末尾的 head 标记中。我修改了清单中的 CSP 以允许对 google 分析和 google 标签管理器的请求。在 GTM 中构建标签时，我将字段 checkProtocolTask 设置为 false，将 page 设置为自定义 url，并将 path 设置为 {{Page Path}}正如上面的教程和所建议的那样。目前，我已使用 GA4 设置我的 GA 帐户，并且我正在使用网络数据流。我将 GTM 标签作为 GA4 配置，并确保包含了正确的测量 ID。我很难找到有关在 chrome 扩展中使用 GTM/GA 的任何信息，因此非常感谢任何答案或建议。

Answer 1

好的，对于仍然想知道如何将分析添加到 Chrome 扩展的任何人，我已经弄明白了。

首先，您必须使用 Universal Analytics (analytics.js)，Google Analytics 4 (gtag.js) 将无法使用。它不处理任务，我们需要禁用某些任务才能发送命中。此外，可以将 UA 与 Google 标签管理器一起使用，但在我深入了解这一点之后，我决定自己在代码中实现跟踪会更容易。 This video 向您展示了如何在 Google Analytics 中设置 UA 属性。

在我的代码中，我创建了一个 JavaScript 文件 ga.js，典型的 google 分析跟踪代码如下所示：

(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-XXXXX-X", "auto");

稍作修改：在 google 分析 url 前面添加 'https:'，当然还要添加您自己的 UA 属性 id。

之后，我们必须通过添加

来禁用 checkProtocolTask

ga('set', 'checkProtocolTask', null);

这会禁用我们需要的文件协议检查，因为如果命中不是来自 http 或 https 协议（这是来自 'chrome-extension://' 协议），google 分析会中止命中。我还发现我需要以相同的方式禁用 checkStorageTask，尽管我不太确定为什么需要这样做。我发现的所有资源都说只有 checkProtocolTask 需要被禁用才能在 CE 中使用 GA。我最好的猜测是因为我的扩展不是弹出窗口，而是注入的 iFrame，所以 cookie 权限不同。我问了 this question about it, but haven't gotten any responses. In order to still track user sessions without the use of cookies, I used localStorage to store the ga clientId, as shown here.

然后我将这个 javascript 文件链接到我的 html 文件头部部分的底部，并添加了

"content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'"

给我的 manifest.json。瞧！有效。

一些最后的注意事项：我绝对建议在调试分析时使用 analytics_debug.js，如果您仍然无法解决问题，请尝试设置 window.ga_debug = {trace: true}; 以获得更详细的登录信息控制台。此外，在发送综合浏览量时，将页面包含在命中中也很重要：ga('send', 'pageview', '/popup');.

弄清楚这个问题绝对令人头疼，所以我希望这对某人有所帮助！

使用 Google 跟踪代码管理器和 Google 分析来跟踪 Chrome 扩展（2020）

Using Google Tag Manager with Google Analytics to track a Chrome Extension (2020)

javascript

google-chrome-extension

google-analytics

google-tag-manager

google-analytics-4