自动填充最佳实践：如何监控和分析用户行为
注：关于自动填充最佳实践的更多信息，请注册参加由Google Chrome工程师和产品专家主持的即将到来的网络研讨会。
电子商务的成功与无缝的购买流程密切相关，而表单是实现转化的关键环节。要优化用户体验，了解用户如何与表单交互至关重要，其中自动填充发挥着重要作用。
核心概念
表单填写通常比较繁琐，浏览器提供的自动填充功能能够显著简化这一过程。该功能允许用户将保存的个人信息（如姓名、地址、支付信息等）自动填充到表单的多个字段中。
通过流畅的自动填充体验，可以实现： - 转化率提升 - 表单提交时间缩短 - 表单放弃率降低 - 用户满意度提高
那么，您是否真正了解网站在自动填充方面的使用情况和存在的问题？
数据收集与分析方法
本指南将介绍如何收集和分析用户在表单中使用自动填充的数据。这些分析数据可用于：
优化测试流程
如果数据显示用户高度依赖自动填充，则应将自动填充测试纳入工作流程。
识别回归问题
比较不同部署版本间各字段的自动填充使用信号，大幅波动可能表明自动填充功能出现退化。
验证实现效果
检测用户在使用自动填充字段时的行为模式，识别预期外的用户操作。
实践演示与代码实现
我们提供了演示示例和GitHub代码库，帮助您了解如何通过程序监控每个表单字段的用户操作：
- 字段留空
- 手动输入
- 自动填充
- 自动填充后修改
浏览器兼容性说明
该演示基于广泛支持的 :autofill CSS伪类检测，适用于最新的设备和浏览器版本。
实施步骤
第一步：定义自动填充状态
首先，定义您关注的自动填充字段状态：
- EMPTY：用户将字段留空
- AUTOFILLED：用户仅使用自动填充完成字段输入
- AUTOFILLED_THEN_MODIFIED：用户先使用自动填充，然后手动编辑自动填充的值
- ONLY_MANUAL：用户完全手动输入字段内容
// 自动填充状态的可能取值
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';
第二步：实现核心工具函数
接下来实现检测字段是否被自动填充的核心功能：
// 使用:autofill伪类获取所有自动填充的字段
function getAllAutofilledFields(formElement) {
return formElement.querySelectorAll(':autofill');
}
// 检查指定元素是否在自动填充字段列表中
function checkIsAutofilled(allAutofilledFields, fieldElement) {
return Array.from(allAutofilledFields).includes(fieldElement);
}
// 使用示例
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
提示：使用浮动标签时，
:autofillCSS选择器可以更容易地与自动填充集成。
// 检查元素值是否为空
function checkIsEmpty(fieldElement) {
const value = fieldElement.value.trim();
// 即使对于type=number字段，value也是字符串
const isEmpty = value === '';
return isEmpty;
}
第三步：初始化自动填充状态
创建存储各字段自动填充状态的全局对象：
// 存储各字段自动填充状态的全局变量
const autofillStatuses = {};
// 示例结构：
// {
// "name": "autofilled",
// "street-address": "autofilled-then-modified",
// "country": "only-manual"
// }
// 初始化所有字段的自动填充状态
function initializeAutofillStatuses(formElement) {
const allFieldsAsArray = getAllFieldsAsArray(formElement);
allFieldsAsArray.forEach((fieldElement) => {
autofillStatuses[fieldElement.id] = EMPTY;
});
}
initializeAutofillStatuses(document.getElementById('form'));
注意：如需将自动填充状态与表单提交数据进行关联，建议使用字段的
name值作为autofillStatuses对象的键，但需确保name属性具有唯一性。
// 收集指定表单中的所有字段元素
function getAllFieldsAsArray(formElement) {
return Array.from(formElement.querySelectorAll('input, select'));
}
第四步：监控字段变化
为所有表单元素添加变更事件监听器：
// 为所有字段添加事件监听器以更新自动填充状态
function initializeChangeObserver(formElement) {
const allFieldsAsArray = getAllFieldsAsArray(formElement);
allFieldsAsArray.forEach((fieldElement) => {
fieldElement.addEventListener('change', () => {
updateAutofillStatus(formElement, fieldElement);
});
});
}
// 更新自动填充状态
function updateAutofillStatus(formElement, fieldElement) {
const isEmpty = checkIsEmpty(fieldElement);
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
const previousAutofillStatus = autofillStatuses[fieldElement.id];
if (isEmpty) {
autofillStatuses[fieldElement.id] = EMPTY;
// 注意：如果previousAutofillStatus === AUTOFILLED，表示字段刚被手动清空
} else {
if (isAutofilled) {
autofillStatuses[fieldElement.id] = AUTOFILLED;
} else {
if (previousAutofillStatus =<span class="highlight"> ONLY_MANUAL <div class="spoiler" onclick="toggleSpoiler(this)"> previousAutofillStatus </span>= EMPTY) {
// 注意：ONLY_MANUAL仅适用于从未使用过自动填充的字段
autofillStatuses[fieldElement.id] = ONLY_MANUAL;
} else if (previousAutofillStatus =<span class="highlight"> AUTOFILLED </div> previousAutofillStatus </span>= AUTOFILLED_THEN_MODIFIED) {
autofillStatuses[fieldElement.id] = AUTOFILLED_THEN_MODIFIED;
}
}
}
}
}
initializeChangeObserver(document.getElementById('form'));
性能考虑：过多的事件监听器可能影响性能，特别是在大型表单中。本演示使用
change事件监听器，仅在元素选择或内容变更时触发，而非每次输入时都触发。
第五步：提交分析数据
表单提交时，将autofillStatuses对象发送到服务器。例如，地址表单可能收到如下数据：
{
"name": "only-manual",
"street-address": "only-manual",
"postal-code": "autofilled-then-modified",
"city": "autofilled",
"country": "autofilled"
}
数据分析策略
收集多个用户的autofillStatuses数据后，进行聚合分析以识别数据趋势。
重要提醒：分析时需考虑不同浏览器和地区的数据差异。地址自动填充在某些国家和浏览器中可能不可用，且不同浏览器的行为可能有所不同。
分析维度
整体使用情况：使用浏览器自动填充填写一个或多个字段的用户比例是多少？
字段级分析：深入分析单个字段。例如，发现本应支持自动填充的特定字段在许多用户中并未被自动填充，这时可以调查可能的原因：
- 字段定义是否清晰？是否存在误导性的提示或占位符？
autocomplete值是否使用了正确语法？常见问题是使用<input autocomplete="name">，而正确的值应为"given-name"
总结
通过理解和利用自动填充行为，可以显著改善网站的用户体验。采用本指南介绍的技术，获取有关用户与表单交互方式的宝贵洞察，识别需要改进的领域。
自动填充是优化用户旅程的强大工具。通过优化表单的自动填充兼容性，可以为访问者提供更加用户友好的体验。
请查阅所有可用的自动填充资源以获取更多信息。
正在加载评论...