使用 Google Analytics 4 跟踪自动填充行为

1. 简介

本 Codelab 将引导您了解如何使用 Google Analytics 4 (GA4) 跟踪网页表单上的自动填充行为。它以 web.dev 上衡量表单上的浏览器自动填充功能等文章中讨论的衡量自动填充功能的概念和动机为基础。

您将了解如何：

• 实现 JavaScript 以检测自动填充互动，包括通过自动填充、手动或两者结合的方式填充字段的时间。
• 定义自定义 GA4 事件以跟踪自动填充状态。
• 将自动填充数据作为自定义参数发送到 GA4。
• 在 GA4 中配置自定义维度以生成报告。
• 了解如何分析收集到的数据。

此方法可让您了解用户依赖自动填充功能的频率、最常自动填充的字段，并发现表单可用性方面可能存在的问题。这样一来，您就能获得有关如何改善用户体验和提高转化率的分析洞见。

前提条件

• 已掌握 HTML、CSS 和 JavaScript 方面的基础知识。
• 您的网站上已设置 Google Analytics 4 媒体资源。
• 熟悉用于向 GA4 发送事件的 gtag.js 库。
• 访问您要跟踪的表单的 HTML。
• 对 Google Analytics 4 报告有基本的了解。

学习内容

• 如何使用 JavaScript 检测自动填充行为，同时考虑不同的用户互动场景。
• 如何创建具有实用意义的参数的自定义 GA4 事件。
• 如何向 GA4 发送自定义事件参数，包括表单和字段标识符。
• 如何在 GA4 中配置自定义维度以分析收集的数据。

所需条件

• 文本编辑器或 IDE。
• 具有开发者工具的网络浏览器。
• 您网站的代码。
• 您的 Google Analytics 4 账号。

2. 实现自动填充检测逻辑

在此步骤中，我们将向网页添加 JavaScript 代码。此脚本将监控您的表单字段，以检测它们是通过浏览器的自动填充功能填充的，还是通过手动输入填充的。

HTML 表单结构示例

首先，我们来看看要处理的 HTML 表单示例。需要注意的关键事项包括：

• 表单本身具有 id（例如 myForm），最好还具有 data-form-id 属性（例如 data-form-id="myForm"）。
• 您要跟踪的每个输入字段都需要一个唯一的 id（例如 id="name"、id="email"）。

<form id="myForm" data-form-id="myForm" action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="address">Address:</label>
    <input type="text" id="address" name="address"><br>

    <label for="city">City:</label>
    <input type="text" id="city" name="city"><br>

    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip"><br>

    <button type="submit">Submit</button>
</form>

<devsite-script src="/path/to/your/static/js/autofill_tracker.js"></devsite-script>

自动填充跟踪 JavaScript

以下是执行检测的 JavaScript 代码。它会初始化跟踪功能，监听指定字段的变化，确定自动填充状态，并在提交表单时向 GA4 发送事件。

// autofill_tracker.js
const formId = 'myForm'; // Replace with your form's ID
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace with your field IDs

const autofillStatuses = {};

function initializeAutofillTracking() {
    const form = document.getElementById(formId);
    if (!form) {
        console.error(`Form with ID '${formId}' not found.`);
        return;
    }

    fieldsToTrack.forEach(fieldId => {
        const field = form.querySelector(`#${fieldId}`);
        if (!field) {
          console.warn(`Field with ID '${fieldId}' not found in the form.`);
          return;
        }

        autofillStatuses[fieldId] = 'EMPTY';
        field.addEventListener('change', (event) => {
            const fieldElement = event.target;
            if (fieldElement.matches(':autofill')) {
                if (autofillStatuses[fieldId] === 'EMPTY'){
                  autofillStatuses[fieldId] = 'AUTOFILLED';
                } else if(autofillStatuses[fieldId] === 'ONLY_MANUAL'){
                    autofillStatuses[fieldId] = 'ONLY_MANUAL_THEN_AUTOFILLED';
                } else if (autofillStatuses[fieldId] === 'AUTOFILLED_THEN_MODIFIED'){
                    // keep the status
                } else {
                    autofillStatuses[fieldId] = 'AUTOFILLED';
                }
            } else {
                if (autofillStatuses[fieldId] === 'AUTOFILLED'){
                    autofillStatuses[fieldId] = 'AUTOFILLED_THEN_MODIFIED';
                } else if (autofillStatuses[fieldId] === 'ONLY_MANUAL_THEN_AUTOFILLED') {
                  autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }else{
                    autofillStatuses[fieldId] = 'ONLY_MANUAL';
                }
            }
        });
    });

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const formElement = event.target;
      const formId = formElement.dataset.formId;
      fieldsToTrack.forEach(fieldId => {
        gtag('event', 'autofill_form_interaction', {
          'form_id': formId,
          'field_id': fieldId,
          'autofill_status': autofillStatuses[fieldId]
        });
      });
      formElement.submit();
    });
}

document.addEventListener('DOMContentLoaded', initializeAutofillTracking);

配置（至关重要！）

在脚本正常运行之前，您必须修改 JavaScript 代码中的这两行：

const formId = 'myForm'; // Replace 'myForm' with the actual ID of YOUR form.
const fieldsToTrack = ['name', 'email', 'address', 'city', 'zip']; // Replace these with the actual IDs of the input fields YOU want to track.

需要采取行动：如果您不更新 formId 和 fieldsToTrack 以匹配您的特定 HTML 表单和字段 ID，跟踪脚本将找不到您的表单元素，并且不会有任何数据发送到 Google Analytics。

最佳实践：使用 data-form-id：所提供的脚本在向 GA4 发送 form_id 参数时，会优先使用表单中的 data-form-id 属性（如果存在）。与仅依赖 id 属性相比，这种方法通常更可靠，尤其是在您跟踪多个表单或使用可能会操纵元素 ID 的框架时。确保已在 上设置 data-form-id

相应福利的

标记。

代码说明：

• form.dataset.formId：获取 data-form-id 属性的值，以将其用作 formId 参数。
• event.preventDefault()：阻止默认的表单提交，以便我们在提交表单之前发送事件。
• gtag('event', 'autofill_form_interaction', ...)：发送具有以下参数的自定义事件：
• form_id：表单的 ID。
• field_id：字段的 ID。
• autofill_status：字段的当前自动填充状态。
• form.submit()：在向 GA4 发送事件后提交表单。
• document.addEventListener('DOMContentLoaded', ...)：确保脚本仅在网页的 HTML 结构完全加载后运行，防止因尝试查找尚不存在的元素而导致错误。

3. 测试

• 在浏览器中提交表单。
• 使用 GA4 中的实时或 DebugView 报告验证 autofill_form_interaction 事件是否已发送。
• 检查事件参数是否已正确填充（例如 form_id、field_id、autofill_status）。

测试专业提示：在 GA4 中使用 DebugView（位于“配置”>“DebugView”下），进行详细的实时事件和参数验证。在测试期间，它提供的信息比标准实时报告更及时、更精细。

需要完全一致：创建自定义维度时，请确保您在 GA4 中输入的“事件参数”名称（例如 field_id）与 JavaScript 代码中 gtag('event', ...) 调用中使用的参数键完全一致，包括下划线和大小写。

4. 在 GA4 中配置自定义维度

如需在 GA4 报告中使用 field_id 和 autofill_status 参数，您需要创建自定义维度：

1. 前往您的 GA4 媒体资源。
2. 依次前往“配置”>“自定义设置”。
3. 创建新的自定义维度：
   • 事件参数： field_id
   • 维度名称： Field ID
   • 范围：事件
4. 创建另一个自定义维度：
   • 事件参数： autofill_status
   • 维度名称： Autofill Status
   • 范围：事件
5. 创建第三个自定义维度：
   • 事件参数： form_id
   • 维度名称： Form ID
   • 范围：事件

重要提示：处理延迟：新创建的自定义维度可能需要 48 小时才能由 Google Analytics 处理完毕。创建后，您将无法立即在报告中看到或使用这些自定义指标。请据此制定计划，稍后再回来查看。

5. 在 GA4 中分析数据

收集数据后，您可以在 GA4 报告中分析这些数据：

1. 依次前往“报告”>“互动”>“事件”。
2. 选择您的autofill_form_interaction活动。
3. 使用“次级维度”下拉菜单选择自定义维度（例如“字段 ID”“自动填充状态”“表单 ID”）。添加“字段 ID”可显示哪些特定表单字段触发了 autofill_form_interaction 事件。如需深入了解每个字段的填写方式，您可以同时选中“字段 ID”和“自动填充状态”作为另一个维度。此组合可直接显示每个字段的互动类型分布。
4. 创建探索以获取有关数据的更多数据洞见。您可以使用不同的技术，例如：
   • 自由形式：用于探索数据和创建自定义可视化图表。
   • 表格：以表格格式查看数据。
   • 漏斗：用于分析用户填写表单的历程。漏斗探索有助于直观地了解用户在多步表单中的进度，并可能突出显示自动填充行为（或其缺失）会影响进度的阶段。
   

发掘更深入的洞见：虽然标准事件报告很有用，但您可以利用 GA4 的探索功能（自由形式探索、漏斗探索等），结合“字段 ID”和“自动填充状态”自定义维度，更灵活地分析用户自动填充行为，从而获得更丰富的数据洞见。

您可以利用这些数据回答的问题示例：

• 哪些字段最常自动填充？
• 用户依赖自动填充功能的频率如何？
• 用户是否倾向于手动填写特定字段中的信息？
• 自动填充行为是否会随时间而变化？
• 自动填充行为会因表单而异吗？

6. 其他注意事项

• 表单验证：考虑表单验证对自动填充检测的影响。如果验证失败，则可能无法正确触发更改事件。
• 动态表单：如果您有动态表单，请确保您的 JavaScript 代码可以处理字段数量和 ID 的变化。您可能需要使用 MutationObserver 来跟踪表单中的更改。
• 性能：避免在网页中添加过多的 JavaScript。请务必测试代码对性能的影响。
• 用户隐私：收集数据时，请务必留意用户隐私。避免在未征得用户适当同意的情况下收集敏感信息。
• 事件限制：GA4 对您可以发送的事件和参数数量有限制。请相应地规划您的实施。
• 多个表单：如果您在同一网页中有多个表单，请务必调整代码以跟踪所有表单。您需要根据每个表单调整 formId 选择器和事件监听器。
• 无障碍功能：确保您的实现方案可供残障人士使用。
• 测试：在不同的浏览器和设备中全面测试您的实现，确保其按预期运行。

7. 总结

大功告成！从设置 JavaScript 监听器到在 Google Analytics 4 中配置这些自定义维度，您已成功完成这些步骤，并真正掌握了自动填充跟踪。现在，您已做好充分准备，可以将收集的数据转化为表单上真正令人愉悦且高效的用户体验。

做好准备，迎接源源不断的宝贵数据洞见吧！您将能够准确了解用户与每个字段的互动方式，发现表单的哪些部分最适合使用自动填充功能，并找出之前可能未发现的任何潜在摩擦点。掌握了这些强大的知识后，您就可以进行有针对性的智能调整，简化用户体验历程，减少表单放弃，并让至关重要的转化率再创新高。

现在，您可以随时优化和改进网页表单。请将此 Codelab 视为数据驱动型设计中精彩而持续的冒险之旅的起点，而不仅仅是已完成的 Codelab。因此，请尽情发挥您的全新分析超能力，尝试改进，让您的表单不仅实用，而且能为与之互动的每位用户带来绝佳体验。祝您优化顺利！