通过 Google 标签管理器使用 Google Analytics (GA4) 轻松跟踪表单事件

您已经熟悉 Google Analytics 版本 3 和 Effortless Forms 集成。鉴于 Google 分析 4 是较新、略微复杂且与版本 3 不同的版本，称为“Universal Analytics”，我们建议您首先查看我们的版本 3 指南以增强理解。但是，如果您是新手并直接遵循本指南，则不会有任何问题。我们旨在提供足够、简单的步骤来展示 Effortless Forms 与领先平台（例如通过 Google Tag Manager 的 Google Analytics）的强大集成和分析功能。

不用多说，让我们开始吧！

首先我们来观察一下 Google Tag Manager (GTM) 和 Google Analytics (GA) 如何协作处理网站数据或跨平台共享数据：

在本教程中，我们将使用 Google 标签管理器跟踪 2 种 Effortless Forms 事件（表单视图和表单提交）变体，然后将事件传输到 GA 进行可视化表示和进一步审查。存在多种通过 GTM 监控表单事件的技术。Effortless Forms 在不同表单状态下触发 jQuery 事件，通过自定义代码简化使用 Google 标签管理器的事件跟踪过程，无需像在预览模式下那样在 GTM 内进行高级故障排除。

我们假设 Google Tag Manager 已全局安装在您网站的所有页面上。请仔细遵循以下说明，通过 GTM 实施 Effortless Forms Events 的跟踪。

以下是我们将在 GTM 中与我们的 Effortless Forms Events 交互的元素的细分，然后继续将数据传递到 Google Analytics：

标签

触发器

变量

3 (2 必填，1 选填)

类型

cHTML，
GA 4 配置

自定义事件

2 数据层，
1 JavaScript

我们还将利用预先存在的变量 [事件] 来区分 Effortless Forms 中发生的事件类型。

1. 制作轻松的表单变量：

变量代表各种数据类型，用于定义出现的属性及其对应的值 或者 都是从网站发出的。

访问您的 Google 标签管理器 仪表板，导航至变量，然后在 用户定义变量， 点击新的按钮。

你的属性 多变的 应该类似于：

标题

轻松表单ID

变量类型

数据层变量

数据层变量名称

轻松表单ID

数据层版本

版本 2

创造 另一个变量 使用以下设置：

标题

轻松表单事件操作

变量类型

数据层变量

数据层变量名称

事件动作

数据层版本

版本 2

[可选] 建立 另一个变量 使用以下配置来显示 表单页面标题:

2. 制定轻松的形式触发器：

触发器对于准确识别 GTM 何时根据我们的意图执行任务至关重要。例如：当网页加载 Effortless Form 时，当有人提交 Effortless Form 时 GTM 会做什么？

为了设计一个“轻松表格”的触发器， 访问 Trigger 并附加新的触发如下图所示：

随后，请遵循以下预期触发器的详细信息：

标题

EffortlessFormActivities事件

事件类型

自定义事件

事件名称

轻松表格活动

触发器触发

所有自定义事件

3. 制作轻松表格标签：

标签表示我们使用 Google 标签管理器执行的功能。标签有多种类型，并根据我们的要求进行配置。当触发器激活并执行标签中定义的任务时，它类似于自动操作。

我们将聘请 Google 分析：GA4 配置 类型标签使用 自定义 JavaScript 代码片段 附加到网页，也可以由 GTM 本身使用另一个 自定义 HTML 标签类型。

让我们首先创建 自定义 HTML 按照以下步骤进行标记：

前往标签并点击新的

选择 标签类型 作为 自定义 HTML 并在 GTM 代码编辑器中插入提供的自定义代码以及下面提供的数据：

标题

cHTML – EffortlessFormsDataPush

标签类型

自定义 HTML

<script>
   (function($){
     var effortlessForms = $('.frm-fluent-form');
     effortlessForms.each(function() {
       var ``form = ``(this);
       var formId = $form.attr('data-form_id');
       dataLayer.push({
        'event': 'EffortlessFormActivities',
        'eventCategory': 'EffortlessForm',
        'eventAction': 'FormView',
        'EffortlessFormID' : formId
      });
   $form.on('effortlessform_submission_success', function() {
     dataLayer.push({
       'event': 'EffortlessFormActivities',
       'eventCategory': 'EffortlessForm',
       'eventAction': 'FormSubmitted',
       'EffortlessFormID' : formId
     });
   });
  });
 }(jQuery));
</script>