使用 Google Tag Manager 进行表单事件跟踪
已发表: 2021-07-19如果您正在寻找一种简单的方法来设置事件跟踪以监控您网站上的转化情况,您可能需要考虑使用 Google 标签管理器。
在这篇文章中,我将解释 Google Tag Manager,让您知道如何安装它,并描述如何在您的网站上设置表单事件跟踪。

什么是 Google 标签管理器?
Google Tag Manager (GTM) 是一款免费工具,可让网站管理员和营销人员更轻松地添加和更新网站标签。 使用 GTM 的方法有很多种,但大多数企业将其用于事件跟踪,以此作为衡量其数字营销策略成功与否的一种手段。 有关 GTM 的更深入解释,请查看我们的介绍性博客文章。
为什么使用 GTM 进行事件跟踪?
GTM 可让您完全控制您的事件代码。 您可以将它们添加到您的网站,而无需要求您的开发人员进行任何硬编码。 这将腾出时间来处理其他关键项目。
GTM 还允许您自己修改和测试您的事件跟踪,这显然使过程更加简单。
此外,我们看到越来越多的网站使用 JavaScript 创建表单。 这些网站不使用目标网址,这意味着您不能在 Analytics 中使用简单的目标。 为了使您的网站管理面向未来,最好考虑掌握 GTM。
安装 GTM
安装 GTM 与设置 Google Analytics 非常相似:
- 使用您的 Google 帐户登录 Google Tag Manager - 最好与您用于 Analytics 的帐户相同。 然后按照屏幕上的步骤操作:

在 Google 跟踪代码管理器上创建一个帐户 - 阅读并接受条款和条件。 然后您将获得安装代码。 您需要将此代码添加到网站的每个页面,紧跟在 <body> 开头标记之后。 如果您自己无法做到这一点,您的开发人员应该能够提供帮助:

将 GTM 代码粘贴到您网站的每个页面上
就是这样。 您已在您的网站上设置了跟踪代码管理器容器。 此容器最终将保存您在 GTM 仪表板中创建的所有标签。
我现在将描述如何使用 GTM 设置事件跟踪。 为此,您需要在页面、点击和表单中启用多个内置变量。 当您设置 GTM 时,这些默认情况下不会启用。 因此,在我们开始之前,导航到变量并检查以下选项:

表单事件跟踪
表单提交跟踪允许您监控访问者何时在您的网站上提交表单。 这可以是您的联系我们页面上的联系表,也可以是页面页脚中的查询表。 几乎每个网站都有一个表单,所以这是掌握标签管理器的好方法。
使用 GTM 设置事件跟踪相对容易,因为您可以使用 GTM 界面中已内置的标签。 HTML 代码的基本知识很有用,但本指南将解释您需要了解的一切。
不用担心,使用标签管理器破坏您的网站是不可能的,而且您可以在实时推送您的标签之前测试所有内容。
我们开工吧!
第 1 步 - 识别 URL
记下您的表单所在的 URL:
![]()
如果您在多个页面上有一个表单,例如页脚中的查询表单,您只需要知道域。 在本例中,我们使用了halam.co.uk 。
第 2 步 - 识别表单 ID
找到提交按钮的表单 ID。 如果您使用的是 Google Chrome 或 Firefox,您可以通过右键单击表单并选择“检查元素”来执行此操作。 您需要在 <form> 中查找“id”属性。 下面是一个示例:
![]()
提示:在检查器中按 ctrl + f 可以搜索内容。
注意:如果您的表单没有唯一 ID,您可能需要让您的开发人员添加一个。 但是,如果您的网站使用表单插件,例如 WordPress 的联系表单 7,您可以自己添加一个 id。
第 3 步 - 创建触发器
在 GTM 中,创建一个新触发器并为其指定一个标题,以便以后轻松识别。 像“查询表单提交”或“联系页面表单提交”之类的东西就可以了。
在选择事件下,选择表单提交:

单击继续,然后选中“等待标签”和“检查验证”以确保您的触发器在成功(有效)表单提交时触发:

单击继续并输入您之前记下的 URL 路径:

如果您的表单位于多个页面上,您可以将触发器设置为在包含您的域的页面上触发:


单击继续,然后选择“某些表格”:

要完成您的触发器,请添加您之前记下的表单 ID(不要使用我的表单 ID!):

您现在已经指定了触发触发器所需的条件。 接下来,我们将创建一个标签。
第 4 步 - 创建标签
创建新的 Universal Analytics 代码。 此标签会将事件信息发送到 Google Analytics。 再次,确保给它一个令人难忘的名字:

在下一个字段中添加您的 Google Analytics 跟踪 ID:

然后将跟踪类型填写为事件,并确定类别和标签的跟踪参数:

如果您要为在多个页面上找到的表单进行设置,就像我在本例中一样,请单击标签右侧的框并从下拉菜单中选择 {{Page Path}}。 这将确保您可以在 Analytics 事件报告中看到表单提交事件是从哪个页面触发的:

在“非交互命中”下,您可以选择 true 或 false。 非交互命中是一个参数,可让您决定被触发的事件是否影响跳出率等指标。 例如,如果您有一个自动播放视频的页面,您可能需要选择“true”。 否则,登陆该页面的每个人都会触发一个事件,并且跳出率将为零。
对于表单提交跟踪,我建议选择“false” - 特别是如果您正在跟踪的表单位于登录页面上,访问者可以在其中看到他们需要的所有信息并填写您的查询表单。 毕竟,即使他们没有查看您网站上的另一个页面,他们已经进行了交互并完成了所需的操作,因此应该是交互命中:

接下来,单击继续并在“开火”下选择“更多”。 选择“表单”,然后导航到您之前创建的触发器:

单击“创建标签”,您完成的标签将如下所示:

第 5 步 - 测试
前往预览和调试模式以测试您的新事件跟踪是否有效:

在同一浏览器中,打开一个新选项卡并导航到您的网站,标签管理器将为您打开调试模式。 从这里您可以预览您的容器,它会告诉您哪些标签已经或尚未在您的页面上触发:

在上面的例子中,这些标签都没有在我的页面上触发,包括我提交的查询表单。 现在我可以直接在页面上测试表单,看看正确的标签是否移动到“在此页面上触发的标签”:

第 6 步 - 发布
测试您的标签是否有效后,返回 GTM 仪表板并发布您的版本。 请记住,如果下一个版本不太好,您可以重命名版本并恢复到版本:

Ta-da — 您的新事件跟踪标签和触发器现已上线。
表格优化
您可能希望改进网站上的表单以增加转化次数。 您可以使用 GTM 跟踪每个表单字段以找出需要测试和改进的内容。 或者,您可以使用 Hotjar 等服务为您提供有用的漏斗分析以优化转化率。
结论
如果您想在设置事件跟踪时提高效率并消除测试难题,我强烈建议您使用 Google 标签管理器。
我发现当开发人员忙于在网站上处理更大的正在进行的项目时,他们会欣赏这个决定,因为它可以腾出时间。 在入门级,您可以使用标签管理器中的内置标签,版本控制和调试模式功能使您能够自己测试所有内容。
如果您使用 Google 标签管理器使用本指南实施表单事件跟踪,我们很乐意在下面的评论中听到它。 或者,通过 Twitter @Digital_Kym 与我联系。
如果您需要帮助,请随时与我们联系。
