Google Tag Manager 教程第 4 部分：跟踪表单提交 - 高级

在我们更新的 Google 标签管理器教程的第 3 部分中，我们介绍了使用表单提交触发器进行表单跟踪，这是掌握联系表单跟踪的一种简单方法。 但是，根据表单的代码及其技术，这可能并不总是有效。 这可能与现场 JavaScript 问题或 GTM 未获取的表单提交相关联。

在我们系列的最后一部分中，我们将在元素可见性触发器的帮助下仔细研究表单提交跟踪。 这种类型的触发器不仅适用于表单，而且适用于所有类型的弹出窗口和显示横幅和通知。

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

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

是什么让表单跟踪变得困难？

让我们退后一步，阐明为什么有这么多不同的表单跟踪技术。 有各种类型的表格，并且没有关于如何开发这些表格的全球标准，因此，这使得对其进行跟踪具有挑战性。 以下是提交表单后可能在您的网站上发生的最常见场景/事件的概述：

• 该表单将用户重定向到感谢页面：太好了，这是通过Pageview自动跟踪的。
• 该表格显示了一个感谢哟ü通知后的形式提交按钮被点击：伟大的，如果它发出了一个表单提交给GTM。 在我们的博客文章教程中阅读更多相关信息。
• 表单刷新并显示感谢文本：具有挑战性但可以使用元素可见性触发器。
• 一个弹出窗口通知用户提交成功：使用元素可见性触发器具有挑战性但并非不可能。

如何开始表单跟踪

首先，我们建议您启用 GTM 的内置表单变量并创建一个表单提交触发器来监听所有表单提交。 在我们上一篇博文教程中阅读有关设置的更多信息。 表单自动事件侦听器将检测所有标准提交浏览器事件。 使用您的表单运行一些测试。

如果 GTM 未在预览和调试模式下记录表单提交，则标准跟踪方法将不起作用，您将不得不使用替代方法。 这是很常见的，这就是为什么我们将使用一个很棒的替代方案：元素可见性触发器。

元素可见性触发器解释

元素可见性 (EVB) 触发器跟踪特定元素何时出现在屏幕上（由于单击、滚动或其他交互），因此具有多种用例。 当表单成功提交后出现特定的感谢信息时，可以将此技术应用于表单。 这可以是同一表单页面上的感谢通知、表单页面重新加载时的感谢横幅或弹出窗口。 有关更多实际示例，请单击此处。

简而言之，只要您指定的元素出现在浏览器的视口中，就会触发元素可见性触发器。 视口是浏览器窗口的可见区域。 当元素在其中可见时，用户可以查看它。

对于选择方法，要确定要定位的元素，有两个选项可供选择：

• 元素 ID ：这与页面上具有给定 ID 的第一个元素相匹配。 如果您只有一个元素要跟踪，则此方法效果很好。
• CSS Selector ：它匹配页面上适合您的选择器的元素或一组元素，适用于跟踪可以出现在页面上的多个元素。

第 1 步：查找唯一标识符

首先检查显示的表单成功消息。

为此，请右键单击以访问浏览器的开发人员工具。 例如，在 Chrome 中，右键单击要检查的元素并选择Inspect element 。 这将向您显示各种信息，例如消息的内容、其 CSS 类、ID 和更多元素。 在我们下面的示例中，消息具有唯一的 ID提交消息，可用作EVB 触发器中的条件。

步骤 2：创建元素可见性触发器

触发器定义了我们想要跟踪的在用户视口中可见的内容。 在这种情况下，检查感谢信息是否出现。

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

• 导航到左侧边栏中的触发器并创建一个新触发器。
• 将Untitled Trigger替换为描述性名称，例如EVB – Contact – Form Submitted 。
• 选择触发器类型：元素可见性。

对于触发器配置，您将设置：

• 选择方法：从下拉列表中选择ID 。
• 元素 ID :提交的消息
  • 这将使用您在第 1 步中确定的唯一ID来准确指定您要跟踪的感谢信息。
• 何时触发此触发器：每页一次
  • 这意味着当与ID匹配的元素对查看者可见时，它只会在当前页面上触发一次。
  • 当使用CSS 选择器在页面上跟踪多个元素时，其他两个选项会很有用
• 最小可见百分比：50
  • 您可以在此处指定一个百分比值，即需要在视口中显示多少元素才能触发触发器。 因此，如果将该值设置为“50”，则匹配元素的至少 50% 需要可见。
  • 默认情况下，元素必须在屏幕上至少有 50% 可见才能触发事件。 这在我们的例子中就足够了。
• 观察 DOM 更改：选中此框可启用触发器以跟踪在 DOM 更改时出现的匹配元素。
  • 此设置可让您在首次加载联系表单时跟踪 DOM（文档对象模型）中可能不存在的元素的可见性。 换句话说，这将等待带有感谢信息的 HTML 元素出现。
• 触发触发器的其他条件：
  • 由于我们使用了一个ID ，它应该是这个表单唯一的，我们不需要在这里设置更多的条件。
  • 如果此ID也用于其他表单，建议将页面路径设置为包含呈现相应表单的页面

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

第 3 步：创建表单提交事件标签

跟踪表单提交的最后一步是简单地创建一个标记，该标记将使用您想要的信息在 Google Analytics 中记录事件。 当满足您在上一步中设置的元素可见性触发器的条件时，将触发该事件。 现在，按照以下屏幕截图所示创建标签：

步骤 4：保存版本、测试和发布

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

确保为您的表单跟踪涵盖这些测试场景：

• 在未完成的情况下提交联系表格。 在这种情况下，代码不应触发。
• 使用正确的详细信息填写表格，然后单击提交。 当感谢信息出现在您的屏幕上时，该标签应立即触发。

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

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

结论

虽然标准表单跟踪是最容易设置的，但由于现场 JavaScript 的复杂性，它通常不起作用。 使用元素可见性触发器为您提供了处理这些边缘情况的替代方法。 它还使您的数据更加可靠和准确。 通过这种方式，您可以确保不会跟踪提交按钮上的无效或不需要的点击，而只会跟踪那些实际完成并成功发送的表单提交。

我们的 Google 标签管理器教程涵盖了跟踪外部（出站）链接、下载链接跟踪和基本表单提交。 您还想跟踪其他类型的事件吗？ 您需要帮助处理更复杂的案件吗？ 请随时与我们联系 – 我们很乐意为您提供帮助！ 如需激动人心的更新，请订阅我们的时事通讯。