集成 Google Tag Manager 与 Google Analytics

[Discourse]

本指南将帮助您设置 Google 跟踪代码管理器 (Google Tag Manager) 并在您的 Discourse 网站上将其与 Google Analytics 结合使用。此外，它还将介绍如何在 Google 跟踪代码管理器中配置变量、触发器和标签以跟踪页面浏览量。

本指南涵盖 Google 跟踪代码管理器的设置。如果您只想为您的网站启用 Google Analytics，请在 ga universal tracking code 站点设置中设置 G 标签。我们的设置可能仍然将所有分析称为 universal，但这是一种遗留字段命名产物。以下说明使用 Google 标签，并且对它们有效。

所需用户级别：管理员

将 Google 跟踪代码管理器 (GTM) 与 Google Analytics (GA) 集成，使您可以有效地管理和跟踪 Discourse 网站上的事件。本指南涵盖了完整的设置过程，从创建 GA 帐户到配置 GTM 所需的标签和触发器。

摘要

1. 创建一个 Google Analytics 帐户和媒体资源。
2. 设置 Google 跟踪代码管理器。
3. 配置 GTM 变量、触发器和标签。
4. 将 GTM 与您的 Discourse 网站集成。

创建 Google Analytics 帐户

1. 访问 Google Analytics 并使用您的 Google 帐户登录。

2. 如果您还没有帐户，请按照引导步骤创建一个。

3. 点击“管理”然后点击“创建媒体资源”来创建一个媒体资源。
   

   

4. 在“媒体资源创建”屏幕上填写所需详细信息。
   

   

5. 在下一个屏幕上输入您的业务详细信息。
   

   

6. 适当选择您的业务目标。

信息： 选择这四个部分将最接近 Analytics 通常提供的报告：

7. 选择“网站”作为数据收集平台。
   

   

8. 通过输入您网站的 URL 和数据流名称来设置数据流。
   

   

成功创建您的网站数据流后，记下您的衡量 ID。您在 GTM 设置中将需要它。

设置 Google 跟踪代码管理器

1. 访问 Google Tag Manager 并创建一个帐户。
2. 按照引导步骤设置一个容器，并为平台选择“网站”。
   
   

配置 GTM

变量

1. 在 GTM 中转到“变量”选项卡，然后在“用户定义变量”部分中点击“新建”。
2. 创建两个数据层变量：

• 名称：DL-page-title
  类型：数据层变量
  数据层变量名称：page.title
  数据层版本：2

• 名称：DL-page-url
  类型：数据层变量
  数据层变量名称：page.url
  数据层版本：2

例如，选择变量类型：

然后像此示例中一样配置变量：

触发器

1. 转到“触发器”选项卡并点击“新建”。

2. 选择“自定义事件”作为类型。

   

3. 将触发器命名为 virtualPageView 并保存。

   最终结果应如下所示：
   

   

标签

1. 转到“标签”选项卡并创建一个新标签。

2. 选择 Google Analytics: Google Tag 作为标签类型。
   

   

3. 使用以下详细信息配置标签：

• 衡量 ID：输入您在 GA 中的衡量 ID。
• 需要设置的字段：
  • title: {{DL-page-title}}
  • page: {{DL-page-url}}
  • send_page_view: true
  • page_path: {{Page Path}}

完成后应如下所示（请注意，您可以添加 userID 参数以及上述参数，但这需要添加一个额外的变量，例如 DL-page-url。）：

4. 为此标签选择 virtualPageView 触发器。
   
   
5. 命名您的标签并保存。

发布您的 GTM 工作区

点击页面右上角的蓝色“提交”按钮，在 GTM 中发布您的容器。

重要提示： 如果您从 googletagmanager.com 遇到 404 错误，请确保已发布您的 GTM 容器更改。

将 GTM 与 Discourse 集成

1. 转到您的 Discourse 管理设置并搜索 gtm container id。
2. 在相应的字段中输入您的 GTM 容器 ID（格式：GTM-XXXXXX）。
   
   

注意： 从 Discourse 中的 ga universal tracking code 和 ga tracking code 设置中删除任何现有的分析跟踪代码。

重新加载您的网站，并在 GA 中的“实时”内容视图中进行检查，以确认数据正在通过 GTM 流入。

附加用途

使用 GTM，您可以添加更多标签来跟踪其他事件，例如：

• Google DFP
• AdWords
• LinkedIn

相关链接

• 在 Google 跟踪代码管理器脚本中使用随机数 (nonce)
• 将自定义事件推送到 Google 跟踪代码管理器和 Analytics
• 如何通过 Google 跟踪代码管理器将 Google 自动广告添加到 Discourse

[MarkDoerr]

如前所述，GA4 配置代码已移除，现在您将选择 Google 代码。设置步骤保持不变，但我已更新了文档。

对于之前设置过 GA4 代码的任何人，它应该已自动更新，无需您进行任何更改。

[Stefan_Holmes]

值得一提的是，就当前的 GA4/GTM 最佳实践而言，这不是一个理想的设置，并且“触发器”部分中的步骤 #2 似乎不正确。

应该使用名为 virtualPageView 的自定义事件触发器，而不是页面浏览触发器。

cookieDomain = auto 似乎是通用分析 (Universal Analytics) 的遗留设置，并非必需。GA4 会自动处理子域导航。

另一个最佳实践是让 Google Tag 在初始化时触发，将 send_page_view 设置为 false，而是为 page_view 设置单独的 GA4 事件代码。

在实施时，我们还为 page_location 添加了一个覆盖，使用网站的完整 URL + 虚拟页面路径。这将正确填充标准的 GA4 报告。

[MarkDoerr]

您好 Stefan，

感谢您的笔记。

我已经更新了“触发器”部分中的第 2 步，因为我已经有了匹配的屏幕截图，我们将尽快更新其余部分。

[luigi7up (Luka)]

描述：

我在 Discourse 论坛上遇到了 Google Tag Manager (GTM) 的一个问题。让我详细解释我的设置和问题：

1. GTM 设置：

   • 我已设置了一个 Google Tag Manager 容器（ID：GTM-…MZV）。
   • 出于测试目的，我在 GTM 中添加了一个Google Analytics 4 标签，配置为在初始化期间在所有页面上触发。
   • 我没有添加任何复杂的触发器、用户层或数据层。这只是一个基本的配置，用于验证 GTM 是否正常工作。

2. GTM 与 Discourse 的集成：

   • 在我的 Discourse 论坛中，我在管理员设置中输入了容器 ID (GTM-W…MZV) 来配置 GTM。
   • 当我检查我的网站时，我可以看到：
     • GTM 脚本 (https://www.googletagmanager.com/gtm.js?id=GTM-W...MZV) 正在 \u003chead\u003e 部分加载。
     • 浏览器控制台或网络选项卡中没有与 GTM 或 gtm.js 相关的错误。

3. 问题：

   • 发布我的 GTM 容器后，我进入 Google Tag Manager 的预览模式并输入了我的网站 URL (https://forum.hobiguru.com)。
   • 然而，GTM 预览调试器显示我的网站上未找到 GTM 标签。
   • 尽管 gtm.js 已加载且没有明显错误，但调试器并未识别 GTM 设置。

截图：

• 截图 1：Google Tag Manager 中的 GTM 容器设置（显示 GA4 标签和触发器）。
• 截图 2：Discourse 管理员设置，显示已配置的 GTM 容器 ID (GTM-W…MZV)。
• 截图 3：浏览器开发者工具显示 gtm.js 库已在我的网站上成功加载。
• 截图 4：GTM 预览模式显示错误消息：“您的网站上未找到 GTM 标签”。

我已尝试过的操作：

• 确认 gtm.js 在网络选项卡中加载。
• 检查浏览器控制台是否有任何内容安全策略 (CSP) 或其他 JavaScript 错误。
• 清除我的网站和浏览器的缓存，以确保没有缓存问题。
• 重新发布 GTM 容器，以确保其已更新。

请求：

有人能帮我弄清楚为什么 GTM 预览模式无法检测到我的 GTM 设置，尽管 gtm.js 脚本正在正确加载吗？在设置或集成过程中，我是否遗漏了什么？