3

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

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

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

4

1 回答 1

6

好的，对于仍然想知道如何将 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 权限不同。我问过这个问题，但没有得到任何答复。为了在不使用 cookie 的情况下仍然跟踪用户会话，我使用 localStorage 来存储 ga clientId，如下所示。

然后我将这个 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');.

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

于 2021-01-30T14:10:23.353 回答