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

Question

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

• 是否可以使用 Google Analytics 跟踪 chrome 扩展程序？ 如果是这样，我只看过使用 Universal Analytics 的教程，但是否可以使用 Google Analytics 4？ 建议现在从 GA4 开始，如果可能的话我想这样做。
• 我将如何设置数据 stream？ web 数据 stream 需要有效的 URL，这并不真正适用于扩展。 我有一个正在开发的单独网站，可以包含 URL，但我的目标是跟踪扩展程序，而不是网站。
• 在 GTM 中调试时，现在需要您添加要在其上调试的 URL。 My extension runs on amazon.com but when I enter amazon.com as the URL I get a 404, probably because the tracking code doesn't actually apply to amazon, but to the iframe that is injected when I am on amazon. 我会在这里做什么？

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

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

稍作修改：在谷歌分析 url 前面添加“https：”，当然还有添加您自己的 UA 属性 ID。

之后，我们必须通过添加禁用 checkProtocolTask

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

这将禁用文件协议检查，这是我们需要的，因为如果它不是源自 http 或 https 协议（这源自“chrome-extension://”协议），谷歌分析会中止该命中。 我还发现我需要以相同的方式禁用 checkStorageTask，尽管我不太确定为什么需要这样做。 我发现的所有资源都说只需要禁用 checkProtocolTask 才能在 CE 中使用 GA。 我最好的猜测是因为我的扩展不是弹出窗口，而是注入的 iFrame，所以 cookie 权限不同。 我问过这个问题，但没有得到任何答复。 为了在不使用 cookies 的情况下仍然跟踪用户会话，我使用 localStorage 来存储 ga clientId，如下所示。

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

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

到我的清单.json。 瞧。 它正在工作。

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

弄清楚这绝对是一件令人头疼的事情，所以我希望这对某人有所帮助！

Answer 2

我已经尝试了上述解决方案。我收到以下 CSP 安全错误：-拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'”。 启用内联执行需要“unsafe-inline”关键字、hash（“sha256-D0ai+qQvw17/6Pk5hj6ilrZLuKD0h6uT9r9+V3QXLM4=”）或随机数（“nonce-...”）