集成 Google Tag Manager 与 Google Analytics

[Discourse]

本指南将帮助您设置 Google 跟踪代码管理器 (Google Tag Manager, GTM) 并在您的 Discourse 网站上将其与 Google Analytics (GA) 结合使用。此外，它还将介绍如何在 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. 点击“管理员”(Admin)，然后点击“创建媒体资源”(Create Property) 来创建一个媒体资源。
   

   

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

   

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

   

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

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

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

   

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

   

成功创建您的网站数据流后，请记下您的衡量 ID (Measurement ID)。您在设置 GTM 时需要用到它。

设置 Google 跟踪代码管理器

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

配置 GTM

变量 (Variables)

1. 在 GTM 中转到“变量”(Variables) 标签页，然后在“用户定义变量”(User-Defined Variables) 部分点击“新建”(New)。
2. 创建两个数据层变量 (Data Layer Variables)：

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

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

举例来说，选择变量类型：

然后配置变量，如下例所示：

触发器 (Triggers)

1. 转到“触发器”(Triggers) 标签页，然后点击“新建”(New)。

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

   

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

   最终结果应如下所示：
   

   

标签 (Tags)

1. 转到“标签”(Tags) 标签页，创建一个新标签。

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

   

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

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

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

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

发布您的 GTM 工作区

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

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

将 GTM 与 Discourse 集成

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

注意： 在使用 GTM 时，请从 Discourse 的 ga universal tracking code 设置中删除任何现有的分析跟踪代码，以避免重复跟踪。

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

附加用途

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

• Google DFP
• AdWords
• LinkedIn

相关链接

• 在 Google 跟踪代码管理器脚本中使用随机数 (nonces)
• 将自定义事件推送到 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 脚本正在正确加载吗？在设置或集成过程中，我是否遗漏了什么？