使用 Google 跟踪代码管理器和 Google Analytics 来跟踪 Chrome 扩展程序 (2020)

Question

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

\n

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

\n

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

\n

Answer 1

好吧，对于仍然想知道如何将 Analytics 添加到 Chrome 扩展程序的任何人，我已经弄清楚了。

首先，你必须使用Universal Analytics（analytics.js），Google Analytics 4（gtag.js）将无法工作。它不处理任务，我们需要禁用某些任务才能发送命中。另外，也许可以将 UA 与 Google 跟踪代码管理器结合使用，但在我深入了解这一点后，我决定自己在代码中实现跟踪会更容易。该视频向您展示如何在 Google Analytics（分析）中设置 UA 媒体资源。

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

(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 Analytics 就会中止命中。我还发现我需要以相同的方式禁用 checkStorageTask，尽管我不太确定为什么需要这样做。我发现的所有资源都表明，只需禁用 checkProtocolTask​​ 即可在 CE 中使用 GA。我最好的猜测是因为我的扩展不是弹出窗口，而是注入的 iFrame，因此 cookie 权限不同。我问过这个问题，但没有得到任何答复。为了在不使用 cookie 的情况下仍然跟踪用户会话，我使用 localStorage 来存储 ga clientId，如下所示。

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

"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');。

这是一个绝对令人头疼的问题，所以我希望这对某人有所帮助！