本地主机上的 Google 标签管理器

Question

我被要求将 Google Tag Manager 脚本实施到 React 应用程序中。我已经将脚本添加到我的 html 文件的头部和主体中。我已经在 GTM 的预览模式下测试了该网站，一切似乎都运行良好。正确跟踪点击和路线更改。

我有一个疑问......本地主机开发怎么样？它是否会生成不必要的分析日志（我无权访问）？或者，也许它就足以粘贴片段，仅此而已？

我找不到答案，所以我决定在这里问。

如果有人在该主题上有一些经验-请告诉我:)

Answer 1

原答案

我建议您通过数据层变量、URL 或自定义 JavaScript 映射单独的 Google Analytics 属性 ID，以根据用户是否从本地主机开发环境、UAT 环境（如果有）访问您的网站返回单独的属性 ID然后是您的生产环境（或其他适用的环境）。

本质上，您正在寻找的内容是“如果 URL 包含“localhost”，则返回我的开发属性 ID”，然后在您的 Google Analytics（分析）代码中使用此变量名称而不是静态值。

是的，不幸的是，您所有现有的测试都在您的配置文件中，因为如果您配置了生产属性 ID 并触发了一堆事件和页面浏览量，它绝对会收集并作为调试体验的一部分发送到那里。不过，一般来说，对于生产应用程序来说，这不是一个值得关注的问题，因为您只占总流量的一小部分；你只是更大数据集中的几个亮点。

例子

这是一个示例，说明如何设置它以解决@ShawnMclean

的评论

在 Google 跟踪代码管理器中，打开您的变量（从左侧导航栏）并确保“页面主机名”列在顶部的内置变量下。如果不是，请单击“配置”按钮并在“页面”组下选中它并关闭右侧面板。

单击“用户定义的变量”部分中的“新建”按钮，然后从“实用程序”组中选择“查找表”。给它一个有用的名称，例如“Google Analytics Property ID”，或者如果您现在使用 GA4，则为“GA4 Measurement ID”。对于输入变量，从下拉列表中选择“{{Page Hostname}}”。在查找表中，我们将只指定一行 - 输入“localhost”并将您打算用于开发环境的 ID 放入值中。因为我们希望在主机名不是“localhost”时设置一个值，所以选中“设置默认值”框并将您的生产 ID 放入出现的默认值框中。单击表单后，它应该如下所示：

从这里开始，您需要在 GA 配置中实际设置它，以便相应地使用它。您现在可能只有一个静态值，所以我们将用对此变量的引用替换它。如果您使用的是较旧的 Google Analytics 版本 Universal Analytics，它会将其配置维护为另一个变量。在变量中，找到您的 Google Analytics（分析）设置标签，并使用大括号符号将跟踪 ID 值替换为查找表变量的名称，GTM 知道您指定的是一个变量，而不是另一个静态值。因为您的 Google Analytics（分析）代码应该都指向属性 ID 的这个设置变量，所以不需要进一步的更改。

但是，如果您已迁移到 GA4，则测量 ID 现在存储在“Google Analytics：GA4 配置”标签中，因此请点击“标签”并打开此配置标签。在这里，我们将再次替换顶部 Measurement ID 下的值以指向我们在以下示例中创建的查找表。

保存任一方法并在预览中进行测试。如果主机名是“localhost”，开发 ID 将被解析为查找表变量，如果它不是“localhost”，它将使用生产 ID 作为默认值。