使用Google跟踪代码管理器跟踪联系表7

更新时间：2021年1月14日

联络表格7 是另一个非常流行的WordPress表单插件。好的营销人员如何处理表格？他们使用Google Analytics（分析）4跟踪提交的内容，然后评估整体效果： 这些转换来自哪里？ 哪种形式表现更好？ 等等

如今，如何跟踪网站上任何互动的最受欢迎方式之一是 …surprise surprise!… Google跟踪代码管理器。如果由于某种原因，您没有’以前尝试过，您绝对应该（这里有 一些原因）。

无论如何，回到主题。联络表7也不例外，您绝对可以使用Google跟踪代码管理器进行跟踪。你可以读这个 详尽的指南（但非常有用） 并详细了解表单跟踪的魔力，或者您可以继续阅读此博客文章，因为今天’ll说明如何使用Google跟踪代码管理器和Google Analytics（分析）4进行Contact Form 7事件跟踪。

注意： 如果您正在寻找有关如何使用Universal Analytics（也称为GA3）进行操作的教程， 请改为参考本指南.

 

为什么使用本指南？

I’我们已经在网上看到一些指南，涵盖了与GTM联系Form 7事件跟踪的指南，但是它们存在一些问题/局限性：

• 有些人提供了不准确的解决方案（通过使用Click Trigger !!! ??
• 而其他人的捐款却不够。我的意思是，他们展示了如何跟踪表单提交（很好），但是我’ve found that it’也很容易 get values of each submitted form 领域 这可以给您更多的见识！
• 许多指南已经过时了（在Google Analytics（分析）方面）

有兴趣吗我希望在阅读上一段之后，您会像这样：

 

目录

+显示目录+

• 影片教学
• 注意事项
• 与Form 7 DOM事件联系
  • 1.自动事件监听器
  • 2.变量和触发器
  • 3. Google Analytics 4事件代码
  • 4.让’s test
  • 5.注册自定义尺寸
  • 6.在GA4中配置转换
• 设置此错误的最常见错误
• 最后的话

 

影片教学

如果您想快速学习如何使用Google跟踪代码管理器和Google Analytics（分析）4跟踪联系表7，请点击此处’一个视频教程。但是，如果您陷于某个地方或想了解更多技术细节，请继续阅读本指南。

寻找有关Universal Analytics的教学课程， 然后在这里看看.

 

注意事项

该解决方案适用于基于AJAX的表单（使用联系表单7构建），这意味着如果页面 不刷新 成功提交后，请继续阅读。

另外，本指南主要针对单页表单。在每个步骤之后，多页表单都会触发成功提交表单的事件。本指南未涵盖其跟踪。

与Form 7 DOM事件联系

在他们的文档中，Contact Form 7开发人员拥有 列出了几个DOM事件 在特定的表单交互发生后调度：

• wpcf7invalid — AJAX表单提交成功完成但由于包含无效输入的字段而未发送邮件时触发。
• wpcf7spam —在AJAX表单提交成功完成但由于检测到可能的垃圾邮件活动而未发送邮件时触发。
• wpcf7mailsent — AJAX表单提交成功完成并且已发送邮件时触发。
• wpcf7mail失败 — AJAX表单提交成功完成但发送邮件失败时触发。
• wpcf7提交 —无论其他事件如何，当AJAX表单提交成功完成时触发。

为了使Contact Form 7事件跟踪成为现实，我首先尝试听 wpcf7提交 事件，但是我最后得到的结果是，即使必需的表单字段包含错误，也正在分派此DOM事件。结果，我切换到  wpcf7mailsent 事件。

 

1.联系表7事件跟踪：自动事件监听器

表单跟踪的第一部分是一段代码，该代码将监听并等待成功提交表单。该代码也称为 自动事件 听众。听众将等待 wpcf7mailsent DOM事件，如果发生，它将向数据层推送一些有用的数据（事件名称，表单ID，所有表单字段的值）。

<script>
document.addEventListener( 'wpcf7mailsent', function( 事件 ) {
 window.dataLayer.push({
 "事件" : "cf7提交",
 "formId" : 事件。detail.contactFormId,
 "响应" : 事件。detail.inputs
 })
}); 
</script>

与在线找到的其他解决方案相比，这不仅会创建一个名为 cf7提交 但也会返回完整的响应，每个表单字段的数组及其值。更多关于这个– a bit later.

为了实施此代码，请转到您的Google跟踪代码管理器帐户，然后转到一个容器并创建一个仅在包含表单的页面上触发的自定义HTML代码。让’假设在我们的例子中，表单位于每页的页脚中，所以我们’ll fire it on 所有页面.

 

1.1。测试听众

在继续之前，至关重要的是要测试侦听器是否能够捕获成功的表单提交。在GTM中启用 预览和调试模式 通过单击右上角的“预览”按钮。

然后，将要求您输入联系表7所在页面的URL。去做。

现在，您将被重定向到该网站，并且您会注意到一个小部件出现在右下角。它必须说已连接。

如果没有， 请阅读本指南。现在，该提交表单了。输入所有必填字段，然后单击“提交”（或表单按钮的文本）。看到表单成功消息后，请转到GTM预览模式的浏览器标签（或窗口）。其网址包含 tagassistant.google.com.

如果一切顺利，您应该会看到一个 cf7提交 事件在左侧（就像下面的屏幕截图一样）。

点击那个 cf7提交 事件，然后转到 资料层 标签。您将看到一个由所有表单字段，字段名称及其值组成的数组（由访客输入）。因此，您不仅可以跟踪成功的表单提交，而且还可以捕获表单字段值。附言请记住 Google Analytics（分析）不允许您在其平台上存储PII （但是该数据可能会发送到其他工具）。

 

2.变量和触发器

那么到目前为止我们做了什么？好吧，我们在数据层中有一些数据可以使用：

• cf7提交 是应该在 变成了触发器。没有触发器，不会触发代码。
• 仅出于演示目的，我们’ll还希望捕获表单提交的主题行，并将其稍后传递给Google Analytics（分析）4。我们可以获取该字段’s value by 创建数据层变量.

如果您想打开一些数据层事件（在我们的例子中是’s cf7提交）进入标记触发条件，则需要创建一个自定义触发器。

现在它’s variables’ turn. Let’仔细看看’发生在数据层之后 cf7提交 事件发生了。此外 事件 和 formId，Contact Form 7的监听器也推送了 响应 这是一个包含5个对象的数组。每个对象代表一个表单字段。在JavaScript中，索引从0开始，而不是从1开始，因此如果我们要获取 您的主题 field’的值（这是第三个对象），我们’必须选择索引2，而不是3。

在我上一篇博客文章中， 如何从数据层提取数据， 一世’ve解释了3种不同的数据结构：

• 当所有数据点都处于同一级别时
• 当有不同的水平时（儿童-父母）
• 并且当有数组时。

在这种情况下，我们必须选择第3个选项，即从“数据层”中的数组中提取数据。为此，我们首先必须定义父键，在这种情况下， 响应。 然后我们必须设置索引（以告知Google跟踪代码管理器 我们对哪个对象感兴趣）。这次’s 3（因为它是数组中的第4个对象，所以JavaScript索引中的a从0（0、1、2、3、4）开始）。最后，我们选择最终密钥– 领域’s value.

因此，我们的数据层变量名称为 响应值3。

我建议创建的另一个变量是  formId。如果您在网站上有几种表格，它将有助于您区分提交的是哪种表格（您赢了’不必为每个联系表创建单独的触发器和标签7）。

保存两个变量并对其进行测试。最好的方法是刷新预览和调试模式，使用联系表7刷新页面，然后尝试再次提交。

之后，点击 cf7提交 活动再次去 变数 标签。您应该在寻找两个新创建的数据层变量。

 

在下面的屏幕截图中，一切都按预期运行：一个变量包含实际的主题行，而另一个获取‘9′ 这是我的测试表格的ID。如果你有 未定义 值，请仔细检查您是否正确输入了所有变量设置。请记住，数据层变量名称区分大小写。

如果您仍然面临着这两个变量中任何一个的问题，请阅读有关 如何从数据层提取数据.

 

3. Google Analytics 4事件代码

联系 Form 7事件跟踪的前两个步骤已完成！现在，让’使用以下设置将表单提交事件发送到Google Analytics（分析）4。另外，如果您不熟悉Google Analytics（分析）4事件跟踪， 我建议以后再阅读本指南.

去 标签> New > GA4 Event。我想您已经了解一些Google Analytics 4基本知识，并且已经在GTM容器中创建了Google Analytics 4配置标签（如果没有， 看这个视频）。

在该标签中：

• 选择您现有的GA4配置标签。
• 输入事件的名称（ 推荐值 如果 generate_lead)
• 然后单击要设置的字段并输入两个参数：
  • form_id 并将其值设置为数据层变量（返回ID）： {{dlv– formId}}
  • form_subject 并将其值设置为数据层变量（返回ID）： {{dlv– Form Subject}} （尽管请记住，我只是出于演示目的使用它。实际上，在GA等工具中跟踪表单主题并没有多大意义。数据基数太高了）。
• 将代码设置为在 cf7提交 自定义事件触发器。

 

 

4.让’s test

保存所有更改并刷新“预览”和“调试”模式（通过单击GTM界面右上角的PREVIEW按钮）。然后，您将被重定向到实施联系表7的页面。提交并仔细研究一下’发生在“预览模式”标签（或窗口）中。

预期结果：仅当成功提交表单后（即 cf7提交 事件出现在预览模式的左侧）。但是，“自定义HTML”标记必须在任何页面上触发（无论是否提交表单）。

标签一旦出现在触发的标签部分, 前往 Google Analytics（分析）的DebugView 4 并尝试找到您的设备（在左上角’s选择器）是否存在多个。

然后，您应该开始看到来自设备的事件（包括 generate_lead）。如果您在使用DebugView时遇到一些问题， 阅读本指南.

单击事件，您将看到与事件一起发送的参数。单击任何这些参数以检查值。

但是我们的工作还没有完成。即使您在DebugView中看到自定义参数，您仍然可以’不能在常规GA4报告（或分析中心）中看到它们。如果您想使用/查看它们（我敢打赌），则必须将它们注册为自定义定义。阅读下一章以了解更多信息。

 

5.注册自定义尺寸

这适用于您发送给Google Analytics（分析）4的任何事件参数。如果您想在“渠道”报告，“探索”中查看/使用它们，请在标准报告中查看其报告卡等，则必须在GA界面中注册自定义参数。

在Google Analytics（分析）4中，转到 所有活动 and then click 管理自定义定义。由于我们在提交联系表格7时发送了2个自定义参数，因此我们必须在此处进行注册。

点击 创建自定义尺寸 按钮，然后输入您发送的第一个参数的名称。就我而言 form_id。保存。

然后注册第二个参数（在我的情况下， form_subject）并保存。顺便说一句，我有时会交替使用“自定义参数”和“自定义维度”这两个词。通常，自定义指标和自定义维度都归为自定义参数。

现在我们等待。在接下来的24小时内，自定义参数将开始出现在您的Google Analytics（分析）4报告中。

如果您想了解GA报告中CF7事件数据的位置， 阅读有关GA4中事件跟踪的本教程.

 

6.在GA4中配置转换

联系表单7事件跟踪的最后一步：在Google Analytics（分析）4中创建转换。这不是必需的，但是如果您希望将每个表单提交都视为重要的交互，则应该这样做。

我假设你想对待每一个 generate_lead 事件作为转化。在这种情况下，您应该登录到Google Analytics（分析）4界面并转到“转化”（在左侧栏上）。

然后点击新建转化事件并输入 generate_lead。点击保存。

然后再次提交联系表7并检查 GA4 DebugView。从这一刻起， generate_lead 事件将以绿色图标显示。这意味着GA4现在将其视为转化。

如果您想让GA4仅跟踪某些联系表7表单（而不是所有表单）的转化 generate_lead 事件）， 阅读有关本章的功能“Create 事件” 在GA4中）。如果您想了解GA4报表中的转化数据的位置， 阅读这部分.

 

设置此错误的最常见错误

如果你没有’在与Google跟踪代码管理器进行大量合作之前，本指南的某些部分可能会造成混淆。如果您已按照本博客文章的所有步骤进行操作，但仍然无法正常工作，这是我最常犯的错误’我注意到人们这样做。

希望其中一些适用于您的情况，您将能够解决问题。

 

错误＃1。您的表格不是联系表格7

有时，WordPress网站使用多种形式的插件。即使您已安装CF7，也可能是’重新处理是使用其他插件。

检查您的表单是否为Contact Form 7的最简单方法是在任何表单字段上单击鼠标右键。

Then check the code of that form 领域. If you see something related to wpcf7，’s联系表7.如果没有，那么此博客文章将对您没有帮助。 改为阅读另一本指南.

 

 

错误2。触发器配置错误

当您配置所有内容时，这是最终设置的外观：

• 自定义HTML标记必须仅使用 所有页面 触发。不要将“自定义事件”触发器添加到“自定义HTML”标记中。
  
• Google Analytics 4事件代码必须仅具有“自定义事件”触发器。
• 检查您是否在“自定义事件”触发器中正确输入了事件名称。一定是 cf7提交。 如果您不确定我在说什么，请重新阅读本指南的步骤2。
  

 

错误3。如果在预览模式下看不到cf7submission事件

这很关键。的 cf7提交 事件必须出现在预览模式下。如果没有发生，则安装将无法进行。

你不这样做的主要原因有两个’在预览模式下看不到它：

• 您的表格不是联系表格7
• 您已添加标签，但它不会在网页浏览量上触发（也称为 集装箱装载）在预览模式下。
  • 点击 集装箱装载 事件在预览模式下进行，并检查您的自定义HTML代码是否已触发。如果没有’t，刷新预览模式，然后重新开始。
  • 另外，检查该自定义HTML的触发条件是否是“所有页面”（因为应该是）。

 

错误＃4。 Google Analytics 4标签正在触发，但是您无法在实时报告中看到该事件吗？

这个问题很普遍。如果面对的话 阅读本故障排除指南.

 

错误5。您的联系表格7提交后刷新页面

仅当表单提交不刷新页面时，此博客文章中描述的解决方案才适用。出现表单成功消息时，无需重新加载或重定向。

如果表单确实正在重新加载页面，请咨​​询您的开发人员以对其进行修复，或者您可以参考CF7’s website. 这是CF7博客的文章。如果该链接无效，请尝试通过Google搜索类似的内容“联系表格7 AJAX不起作用”.

其他在线的CF7 + GTM指南也依赖AJAX（当表单不重新加载页面时）。

寻找其他表格追踪替代品吗？ 读这个.

 

联系表7事件跟踪：最后的话

那里有。在这篇博客中，我 ’ve解释了如何使用Google跟踪代码管理器和Google Analytics（分析）4跟踪基于AJAX的单页联系表单7。该过程类似于其他WordPress插件， 重力形式:

• 实现一个自定义自动事件侦听器，以侦听成功提交的表单。
• 创建变量和自定义触发器。
• 设置Google Analytics（分析）Analytics（事件）标签，将成功提交表单的事件发送给Google
• 将参数注册为自定义尺寸/定义
• 最后，配置转换（可选）

如前所述，如果您的表单是多页的，则可能会遇到一些困难（包括两个或多个步骤，并且每个步骤都会刷新页面）。我什么’到目前为止，我注意到，通常每个步骤都有其自己的表单ID，因此您可以通过更新自定义cf7submission触发器来跟踪提交。将其设置为在表单ID等于XX时触发（用最后一步的ID替换XX）’s form).

如果仍然遇到联系表7事件跟踪（使用GTM）的问题，请阅读以下指南： 如何使用Google跟踪代码管理器跟踪表单提交。我打赌你’会发现有用的东西。