作为一名开发人员，您可能在某个时刻需要在 GTM 中配置代码 (Tags) 和触发器 (Triggers)。如果您正在寻找关于如何在基于 React 的项目中的 GTM 里启动点击触发器的简单说明，那么您来对地方了。让我们一步步来学习吧！
本文将引领您完成在 React 应用程式中配置点击触发器（click trigger）所需的步骤。一旦您掌握了主要的 GTM 相关概念，只需几个配置步骤即可利用所需的标签管理功能。那么，究竟什么是 Google Tag Manager？其标签（Tags）与触发器（Triggers）功能能为您带来哪些益处？
Google Tag Manager – 什么是 GTM 以及如何使用它？
Google Tag Manager (GTM) 是一个标签管理系统，在进行基础代码配置后，可以实现任何网站或移动应用上的标签简单集成。利用 GTM 的主要优势是能够直接从 Web 面板界面修改标签设置。话虽如此，在处理 GTM 时有三个基本概念需要理解：
- 标签是代码片段或追踪像素（例如 Facebook 像素），用于收集并传送从您的网站或流动应用程式中收集的分析数据。
- 触发器负责监控事件，并决定何时执行标签。
- 变数与标签或触发器所需的额外数据相关（例如：当 URL 为 /some/url 时执行此标签）。
使用 Google Tag Manager 有哪些优势？
由于 Google Tag Manager 是一款直观且全面的网站和数字营销工具，它能为您的业务和团队带来诸多优势。以下是利用 Google Tag Manager 的四个主要优势。
1. GTM 不需要编码知识
Google Tag Manager 使任何人（包括营销人员）都能在无需大量技术技能的情况下实施标签。用户友好的界面使用户无需 Web 开发人员的帮助即可更改、删除或添加 GTM 跟踪代码，不过建议具备相关领域背景。这使得技术支持不足的小型企业也能最大限度地利用网络追踪。
2. GTM 实现灵活性和实验性
由于 GTM 无需网页开发人员，因此让市场营销人员能够实验和测试各种技术与概念。它使市场营销人员能够根据新兴的数字营销趋势实施试验并优化营销计划，而无需外部支援。
3. GTM 支持更快的页面加载速度
Google Tag Manager 配置为异步执行代码，而非同步执行。这意味着每个代码在加载后会立即部署，而无需等待所有代码加载完成后才触发。这避免了加载速度缓慢的代码可能阻碍其他代码部署的可能性。
4. GTM 集中管理一切
GTM 简化并增强了整个标签部署过程，因为所有的 GTM 跟踪代码都维护在单一位置，而不是在不同的平台上进行开发和管理。能够从单一界面生成并查看所有已部署的标签，可以避免重复和潜在错误，从而显著提高生产力。
Google Tag Manager 的用途是什么？
GTM 有能力跟踪无限数量的网站和数字营销活动，但大多数组织仅使用其中的一小部分。
- 下载量
- 滚动
- 点击次数
- 表单
- 影片
1. 监控 PDF 下载
作为其数字营销战略的一部分，许多公司在网站上提供可下载的 PDF 文件，例如指南和白皮书。然而，如果您无法获取有关下载量的统计数据，那么一个有效的计划将受到显著阻碍。
Google Tag Manager 用于监控 PDF 下载并评估其表现。一旦您可以追踪下载情况，就能将收集到的数据转化为有用的洞察。
- 确定您的下载量最高和最低项。
- 确定下载成功或失败的原因
- 考虑增强下载量的策略，并使用 GTM 监控您的进度。
2. 跟踪滚动行为
GTM 检测网站和页面滚动活动的能力是使用它的另一个动力。
深入了解用户如何浏览及与网站内容互动，能为网站活动提供宝贵资讯。
- 哪些页面区域最常被浏览？
- 哪些资讯更具吸引力？
- 大多数访客停止卷动页面的位置
透过收集到的 GTM 数据，您可以构建出大多数网站用户浏览每个页面的全面图像。作为回报，您可以借此制定策略以提升网站的用户体验。
- 您如何构建网站结构
- 您会分享哪些资料？
- 需要改进的位置
3. 链接点击统计及记录
Google Tag Manager 能够追踪链接点击，即访客在您网站上点击的具体 URL，这是一项优势。不仅了解用户的滚动行为，还了解其点击活动，可以为用户在您网站上的旅程提供深刻的洞察。
- 您网站的访客是如何从一个页面跳转到另一个页面的？
- 哪些行动呼吁 (CTAs) 获得最多的点击？
您应该利用 Google Tag Manager，不仅是为了理解连结点击，更是为了根据这些数据采取行动。
- 只需点击几下即可重新整理网站，或透过几次点击检查页面，以实现转化率最大化。
- 了解哪些因素有助于提高 CTA（行动呼吁）的点击率，并针对点击率较低的 CTA 修改文案。
4. 表格提交追踪
注册电子报、填写问卷或报名参加活动，都是网站上具有特定目的和功能的表单范例。GTM 可确保准确追踪表单提交。
为何使用 Google Tag Manager 进行表单追踪：
- 报告透过表单提交产生的网站潜在客户。
- 根据提交表单的数量计算活动的 ROI。
5. 监控视频活动
影片是日益流行的数位行销策略。随著影片素材的激增，了解人们如何与资讯互动变得至关重要。
- 个人观看视频的情况
- 他们观看片段的时长是多少？
- 如果或当他们看完视频时
从您的影片中获取的数据可以为您组织的影片策略提供参考。
- 未来的视频将如何创作
- 您的受众更偏好哪种内容？
- 适合您公司客户的理想视频长度
创建 GTM 账户
建立免费账户是一个简洁的两步骤程序，但与您现有的 Google Analytics 和 Gmail 账户有所区别。为方便您顺利完成账户设置，我们已记录了账户创建流程。界面应呈现以下样貌：
以下是后续步骤：
步骤 #1 注册帐户。
点击 Google Tag Manager 页面上的绿色“免费注册”按钮。它会要求您输入账号名称（企业）、国家/地区和网站 URL，以及您希望使用 Google Tag Manager 的位置（Web、iOS、Android、AMP）。完成后点击蓝色的“创建”按钮。
步骤 #2 将 JavaScript 代码插入您的网站
随后，您将收到代码和指令，将其中一段代码放置在页面的 <head> 标签内，另一段代码则放置在 <body> 开启标签之后。您可以现在执行此操作，或稍后将代码应用到您的网站（代码可在您的控制面板中获取）。完成后，请点击「确定」。
步骤 #3 建立代码
一旦您拥有 Google Tag Manager 账户，便应了解如何立即设置标签。
Google Tag Manager 支持无限数量的标签设置。
这对于开发有关受众行为的深入报告非常有用，但如果您的标签组织不当，可能会导致效率低下。
Google 为代码建议以下命名标准：代码类型 – 应用名称 – 详情。
例如，您可能将一个标签设定为「AdWords conversions – iOS – February 2018 campaign」，而另一个设定为「Google Analytics – CTA – About Us page」。
因此，您可以准确地识别并收集与特定活动或网站相关的数据。
例如，第二个标签“Google Analytics – CTA – About Us page”指示了您的“关于我们”行动呼吁（call-to-action）按钮的表现。此信息非常重要，如果您将标签命名为更通用的名称（如“CTA button”），该信息可能会丢失。
既然我们已厘清，让我们看看如何建立标签：
步骤 #3.1 在 Google Tag Manager 控制台建立新代码。
在您的 Google Tag Manager 控制面板中，点击“添加新代码”(如下方红圈所示)。
步骤 #3.2 配置您的代码。
点击页面顶部“标签配置”框中的任何位置以选择标签类型。
您可以直接在下方加入您的代码，或者您可以在下一步从模板开始。
步骤 #3.3 选择代码类型。
有几种标签类型（并非所有类型都会在此显示，您也可以自定义标签类型）。如果您想为您的应用程式和网站设置 Google Analytics 网页访客监控，请选择「Google Analytics 4」。
步骤 #3.4 连结至您网站的 GA4
将会有一个栏位供您输入衡量 ID。请从您的帐户中复制衡量 ID，然后将其贴上到此栏位中。
*在此之前，您必须完成 您网站的 GA4 设定。
步骤 #3.5 透过选择触发条件来决定何时记录代码。
选择触发器（触发器是指您希望记录标签的时机，例如“每当用户查看页面时”）。我选择了“所有页面”，以便在任何网页被查看时接收数据，但您的选择可能会根据您的目标而有所不同。
步骤 #3.6 储存您的代码。
在您对“标签配置”和“触发”框中的信息感到满意后，点击蓝色的“保存”按钮。
步骤 #4 按一下「提交」按钮以启用您的标签。
之后点击蓝色的“提交”按钮。除非您这样做，否则您的标签将无法运行。
当您点击「提交」时，将会载入此「提交配置」页面。可用的选项包括「发布并建立版本」及「建立版本」。由于我已准备好将标签推送到网站的所有页面，因此我选择了「发布并建立版本」，然后点击了萤幕右上角的蓝色「发布」按钮。
步骤 #5 为您的标签添加名称和描述以便进行分类。[可选]
最后，将显示此“容器版本说明”。为了保持您的标签结构化，请为每个标签提供名称和描述，以解释您试图通过该标签捕获的内容。
适用于 WordPress 的 Google Tag Manager
如果您的组织利用 WordPress 来托管其网站，那么将 Google Tag Manager 集成到 WordPress 是一个简单的无代码过程。
Site Kit 是由 Google 推出的官方 WordPress 外挂程式。Site Kit 简化了重要 Google 工具（例如 Google Tag Manager）的安装与设定，并提供权威且最新的网络发展指引。请浏览 Site Kit 所支援的 Google 产品清单。
以下是后续步骤：
1.登录您的WordPress账户。
2. 确保您的站点是公开可用的，这意味着它不处于维护模式或受密码保护。
3. 在左侧菜单中，单击插件。
4. 在“插件”页面顶部，单击“新增”，然后搜索“Site Kit”。
5. 单击 Google Site Kit 页面上的立即安装。
6. 安装插件后，从左侧菜单中选择插件。
7. 单击“Site Kit by Google”下方的“激活”
8. 激活插件后，单击左侧的“Site Kit”。
9. 单击“使用 Google 登录”，使用您的 Google 帐户登录。
10.完成向导并启用 Google 跟踪代码管理器和 Google Analytic 4。
11. 提供许可后，单击继续以确认站点的所有权。
12. 选择“允许”以允许访问 Google 帐户信息。
13. 要将网站添加到 Search Console，请点击“添加网站”按钮。
14. 您已成功设置插件。
15. 单击“前往我的仪表板”继续。
16. 从左侧菜单中选择站点工具包和仪表板。
17. 单击“分析”标题下的“连接服务”。
18. 单击“继续”继续提供更多权限。如何向您的 Google 帐户提供 Site Kit 扩展访问权限并继续将 WordPress 集成到 Google Analytics。
19. 选择已存在的分析属性，然后单击配置分析。
现在，分析已配置。
结语
Google Analytics 4 和 Google tag Manager 让您能够做出更明智的营销决策，并为客户活动的追踪提供了巨大的增强功能。
使用 GTM 实施此较新版本，并利用 GA4 提供的灵活性。
需要协助安装 GA4 和 GTM？或者将 Google Tag 从 GA3 迁移到 GA4？我们随时为您提供协助，请随时 联系我们 与我们联络！