Google 跟踪代码管理器教程第 3 部分:跟踪表单提交 - 2020 年更新

已发表: 2020-09-10

在我们更新的 Google 标签管理器教程的第 2 部分中,我们介绍了下载链接的跟踪。 如果你错过了,你可能想从这里开始。 在这第三部分中,我们将仔细研究一个非常受欢迎的话题——表单提交。 大多数营销人员都会有兴趣跟踪这一点,因为许多活动的目标是通过联系表单产生潜在客户,因此这些是衡量活动成功与否的转化。

Google Analytics 不会自动跟踪此活动,但 Google Tag Manager (GTM) 提供了一种用于跟踪表单提交的自动化解决方案。

在本教程中,我们假设您已经拥有 Google 跟踪代码管理器帐户、创建了容器并将其安装在您的网站上。 您还应该为您的网站设置一个 Google Analytics 帐户并将其链接到 GTM。

按照以下步骤设置表单提交跟踪。

第 1 步:查找唯一标识符

我们将使用联系表单的示例向您展示如何进行设置。 以下步骤描述了一般过程,并指出需要为您的特定网站更改哪些部分。

第一步是找到有助于识别表单的内容。 我们将通过查看表单的 HTML 元素并决定什么有助于唯一标识此表单来完成此操作。

要检查您网站上的表单,请右键单击以访问浏览器的开发人员工具。 (例如,在 Chrome 中,右键单击要检查的元素并选择“检查”。)这将显示表单独有的各种属性,例如,其内容、CSS 类和其他元素。

在我们下面的示例中,您可以看到表单有一个 id contact-form 。 id 是一个合适的标识符,通常对于元素来说是唯一的,不会在网站的其他任何地方使用。 如果您的表单没有唯一 id,您还可以使用表单类、表单操作的页面 URL 或表单文本来标识此特定表单。 使用 id 或 classes 是最简单的,因此我们建议尽可能使用它们。

作为最后的手段,您可以简单地使用表单所在的页面 URL 来识别它,但要小心。 如果页面上有其他表单,例如搜索框,则此表单可能会触发您的联系表单事件。

网站 HTML 代码突出显示表单元素的 ID 属性

步骤 2:启用内置表单变量

对于您的事件标记配置,您将需要内置变量表单 ID (或表单类,如果您的表单具有唯一的类)。 如果您之前没有使用过这个变量,那么您必须选择并启用它。 要做到这一点,导航到在GTM接口变量,并在部分内置变量点击配置。 滚动到各种 Form-Variables 并通过Form ID设置复选标记。

勾选了表单 ID 的 Google Tag Manager 的内置变量配置页面

第 3 步:创建表单提交触发器

此触发器定义了联系表单提交的确切含义。 它会侦听您网站特定页面上的表单提交,并检查它们是否满足您为联系表单专门设置的条件。

对于触发器设置,请按照下列步骤操作:

  • 导航到左侧边栏中的触发器并创建一个新触发器
  • Untitled Trigger替换为描述性名称,例如Form Submission – Contact Form
  • 选择触发器类型:表单提交。 这将侦听提交的表单。

对于触发器配置,您将设置:

  • 不要勾选“等待标签”复选框。 我们不建议在默认情况下对表单使用此选项,因为它会破坏表单提交。 如果经过彻底测试,它可以使用。
  • 勾选复选框Check Validation 。 这将检查表单是否已实际提交。
  • 启用时:
    • 页面路径包含联系人

这会在路径中有联系人的页面上启用触发器,例如 https://amazeemetrics.com/contact。 您应该更改此设置以在包含联系表单的网站页面上启用触发器。 如果需要,您还可以在所有页面上启用触发器。

  • 开火:
    • 选择选项: Form ID 等于contact-form

这使用您在第 2 步中启用的变量和您在第 1 步中确定的唯一 ID 来准确指定您要作为联系表单提交跟踪的表单

  • 表单 ID更改为您在步骤 1 中找到的任何标识符以及您在步骤 2 中启用的相应变量。

单击保存以完成触发器设置。

Google Tag Manager 表单提交触发器配置页面。

第 4 步:创建表单提交事件标签

跟踪表单提交的最后一步是简单地创建一个标签,该标签将使用您想要的信息在 Google Analytics 中记录事件。 当满足您在上一步中设置的触发器条件时,将触发事件。 现在,通过将所有部分放在一起来创建标签:

  • 转到 >标签>新建以创建新标签
  • 将其命名为GA – 事件 – 提交联系表格
  • 对于您的标签配置,选择Google Analytics:Universal Analytics作为您的标签类型。
  • 轨道类型:事件
  • 类别:输入表格
  • 行动:输入联系表格提交。 您可以重命名事件类别和操作以匹配您使用的任何事件命名约定。
  • 标签:输入成功。 这是可选的,您可以更改它或将该字段留空。
  • 非交互命中:保留默认设置false 。 这意味着此事件将改变您的跳出率,因为它将被计为您网站上的一次互动。

作为最后一步,您选择在第 3 步中创建的触发器,以便在满足特定条件时触发代码。 以下是最终设置的概述:

配置了联系表单事件的 Google Analytics 事件标记配置页面。

步骤 5:保存版本、测试和发布

你快完成了! 您刚刚创建的标签在您发布之前不会开始工作,但首先,您应该彻底测试它是否按预期工作。 保存标签后,启用预览模式(单击右上角的预览),转到您的网站,然后刷新页面。

确保涵盖这些用于表单提交跟踪的测试场景:

  • 在没有填写表格的情况下点击提交按钮。 在这种情况下,代码不应触发。
  • 使用正确的详细信息填写表格,然后单击提交。 该标签现在应该会触发。

如果一切正常,Google Analytics 实时事件报告应显示您的事件命中率。 阅读我们关于Google 标签管理器测试问题以及在遇到任何问题时如何解决这些问题的博文。

如果您的所有测试都成功,那么您可以单击 GTM 中的提交按钮。 为这个已发布的版本指定一个描述性名称,例如已添加联系表单提交事件,然后单击Publish

下一个教程即将推出

使用表单提交触发器是掌握联系表单跟踪的一种简单方法。 但是,根据形式及其技术,这可能并不总是有效。 表单有多种形状和大小,这就是为什么我们认为向您展示不同的跟踪技术就足够了,因此您很灵活。

请继续关注我们即将发布的博客文章,其中介绍了一种更高级的表单跟踪方法:元素可见性触发器。