javascript - 将 Google Tag Manager 与 Google Analytics 结合使用来跟踪 Chrome 扩展程序 (2020)

Question

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

是否可以使用 Google Analytics 跟踪 Chrome 扩展程序？如果是这样，我只看过使用 Universal Analytics 的教程，但是否可以使用 Google Analytics 4？建议现在开始使用 GA4，如果可能的话，我想这样做。

我将如何设置数据流？网络数据流需要一个有效的 URL，这并不真正适用于扩展。我有一个单独的网站正在处理，我可以包含该 URL，但我的目标是跟踪扩展程序，而不是网站。

在 GTM 中调试时，它现在要求您添加要调试的 URL。我的扩展程序在 amazon.com 上运行，但是当我输入 amazon.com 作为 URL 时，我得到 404，可能是因为跟踪代码实际上并不适用于 amazon，而是适用于我在 amazon 上时注入(inject)的 iframe。我会在这里做什么？

我已经设置好 GTM 代码在一个单独的 js 文件中，该文件被注入(inject)到头标记末尾的 iframe html 代码中。我修改了 list 中的 CSP 以允许对 google 分析和 google 标签管理器的请求。在 GTM 中构建标签时，我设置了字段 checkProtocolTask至 false , page到自定义网址，和 path至 {{Page Path}}如上教程和this SO question有建议。现在，我已经使用 GA4 设置了我的 GA 帐户，并且我正在使用网络数据流。我将 GTM 标签作为 GA4 配置，并确保我包含了正确的测量 ID。我很难找到有关在 chrome 扩展中使用 GTM/GA 的任何信息，因此将不胜感激任何答案或建议。

Answer 1

好的，对于仍然想知道如何将 Analytics 添加到 Chrome 扩展程序的任何人，我已经弄清楚了。
首先，您必须使用 Universal Analytics (analytics.js)，Google Analytics 4 (gtag.js) 将无法使用。它不处理任务，我们需要禁用某些任务才能发送命中。此外，也可以将 UA 与 Google 标签管理器一起使用，但在我深入了解这一点后，我决定自己在代码中实现跟踪会更容易。 This video向您展示了如何在 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);

这将禁用文件协议(protocol)检查，这是我们需要的，因为如果命中不是源自 http 或 https 协议(protocol)(这是源自“chrome-extension://”协议(protocol))，谷歌分析会中止命中。我还发现我需要以相同的方式禁用 checkStorageTask，尽管我不太确定为什么需要这样做。我发现的所有资源都表明，只需禁用 checkProtocolTask​​ 即可在 CE 中使用 GA。我最好的猜测是因为我的扩展程序不是弹出窗口，而是注入(inject)的 iFrame，因此 cookie 权限不同。我问 this question关于它，但没有得到任何回应。为了在不使用 cookie 的情况下仍然跟踪用户 session ，我使用 localStorage 来存储 ga clientId，如图 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'); .
这是一个绝对令人头疼的问题，所以我希望这对某人有所帮助!