如何在Microsoft Clarity中解除WordPress结账页面姓名与邮箱的掩码？

下面是几种无需修改插件核心代码的可行方案：

1. 用JavaScript批量添加解除掩码属性 #

直接在主题自定义JS或代码片段工具里添加这段脚本，自动给结账页面的目标输入框加上data-clarity-unmask="true"属性：

document.addEventListener('DOMContentLoaded', () => {
  // 替换为CartFlows表单实际的输入框选择器，可根据类名/name属性精准定位
  const checkoutInputs = document.querySelectorAll('.cartflows-step input[type="text"], .cartflows-step input[type="email"]');
  checkoutInputs.forEach(input => input.setAttribute('data-clarity-unmask', 'true'));
});

注意：打开浏览器开发者工具，查看CartFlows生成的姓名、邮箱输入框的具体类名或name属性，把选择器改得更精准（比如'input[name="wcf-first-name"], input[name="wcf-email"]'），避免误匹配其他输入框。

2. 在Clarity后台设置自定义排除规则 #

登录Clarity后台，进入「数据隐私」→「掩码设置」，添加不掩码规则：

• 规则类型选择「元素选择器」
• 输入能精准命中CartFlows结账姓名、邮箱框的CSS选择器（比如.cartflows-checkout-form .wcf-first-name, .cartflows-checkout-form .wcf-email）
• 动作选择「不掩码」

设置完成后等待1-2小时让规则生效，Clarity会自动跳过这些字段的掩码处理。

3. 用WordPress钩子修改CartFlows字段属性 #

如果偏好PHP方案，利用CartFlows提供的过滤钩子修改字段属性，无需触碰插件核心代码：

// 放置到主题的functions.php或代码片段插件中
add_filter('cartflows_field_attributes', function($attrs, $field) {
  // 匹配姓名和邮箱字段，可根据实际字段标识调整判断条件
  if (in_array($field['type'], ['text', 'email']) && (str_contains($field['name'], 'first_name') || str_contains($field['name'], 'email'))) {
    $attrs['data-clarity-unmask'] = 'true';
  }
  return $attrs;
}, 10, 2);

验证提示：若不确定钩子名称是否正确，可通过var_dump($field)输出字段信息调整判断逻辑，或查阅CartFlows官方文档确认表单字段的过滤钩子。

内容的提问来源于stack exchange，提问作者yahya