如何使用 Google Tag Manager 在 Discourse 上跟踪按钮点击？

文档 网站管理
1

:bookmark: 本指南将介绍如何使用 Google 标签管理器 (GTM) 来跟踪 Discourse 网站上的特定按钮点击，例如“注册”、“登录”或“回复”。

:person_raising_hand: 所需用户级别：拥有 Google 标签管理器访问权限的管理员

使用 Google 标签管理器跟踪按钮点击

跟踪用户与特定按钮的交互方式可以提供有价值的数据，用于了解用户行为和转化路径。虽然 Discourse 会开箱即用地跟踪许多事件，但您可能希望监控特定的 UI 元素，例如“注册”按钮。使用 Google 标签管理器 (GTM) 预览模式是识别正确元素并设置准确触发器的最有效方法。

摘要

要跟踪特定按钮，您必须首先确定 GTM 在点击该按钮时如何“看到”该按钮。此过程涉及启用点击变量、创建通用调试触发器、使用标签助手 (Tag Assistant) 识别元素的唯一属性，然后为该按钮创建特定的标签。

启用点击变量

在跟踪点击之前，您必须确保 GTM 正在从浏览器捕获必要的数据。

  1. 在 GTM 工作区中，导航到 变量 (Variables)。
  2. 选择 配置 (Configure)。
  3. 在 点击 (Clicks) 部分下，勾选所有可用框：Click Element、Click Classes、Click ID、Click Target、Click URL 和 Click Text。

Enable click variables
Enable click variables1746×844 58 KB

创建通用点击触发器

您需要一个“万能”触发器，以便在测试时在调试控制台中看到所有点击事件。

  1. 导航到 触发器 (Triggers) 并选择 新建 (New)。
  2. 点击 触发器配置 (Trigger Configuration) 并选择 点击 - 所有元素 (Click - All Elements)。
  3. 选择 所有点击 (All Clicks)。
  4. 将触发器命名为“所有点击 - 调试 (All Clicks - Debug)”并保存 (Save)。

Generic click trigger
Generic click trigger1759×494 26.4 KB

使用标签助手扩展程序

标签助手伴侣 (Tag Assistant Companion) 扩展程序可帮助您精确跟踪与您的网站交互时 GTM 接收到的元素。

  1. 在浏览器中安装该扩展程序。
  2. 在 GTM 工作区中，选择右上角的 预览 (Preview)。
  3. 输入您的网站 URL（discourse.example.com）并点击 连接 (Connect)。

Tag Assistant extension
Tag Assistant extension1413×1059 97 KB

Preview mode
Preview mode1911×433 33.9 KB

识别特定按钮元素

预览窗口打开后，您可以找到目标按钮的唯一标识符。

  1. 点击您希望跟踪的按钮（例如，网站上的注册 (Sign Up) 按钮）。
  2. 切换回 标签助手 (Tag Assistant) 标签页。
  3. 在左侧的摘要窗格中找到最新的 点击 (Click) 事件。
  4. 选择 数据层 (Data Layer) 标签页，查看被点击元素的属性。

Locate click events
Locate click events1417×949 146 KB

要专门针对注册按钮，您可以使用其唯一的类：sign-up-button。

创建永久触发器时，请使用CSS 选择器 (CSS Selector) 以确保即使在用户点击按钮内部的文本时也能捕获点击。对于注册按钮，请使用：
button.sign-up-button, button.sign-up-button *

:information_source: 选择器末尾的 *（通配符）可确保即使如果用户点击按钮内的文本跨度，触发器仍然会触发。

最佳实践

  • 使用描述性名称： 清楚地命名您的触发器和标签，例如“GA4 - 事件 - 注册按钮点击”。
  • 匿名测试： 在测试“注册”等按钮的点击时，最好使用隐身窗口或退出 Discourse 网站的登录状态，以确保按钮可见。
  • 发布前验证： 始终检查标签助手中的摘要 (Summary) 窗格，以确认您的特定标签仅在目标按钮被点击时才会触发。

附加资源

2 个赞