前端视角下的 A/B Test：埋点、分流与验证

wuwenzen@outlook.com (wuwj) — Thu, 20 Apr 2023 00:00:00 +0000

「做个 A/B 实验看看」这句话听起来很轻松，真正落地时会发现：

指标怎么算？
实验人群怎么分？
前端要怎么接入实验配置？
实验结束之后，代码怎么收口？

这篇文章从前端的角度，讲一次相对完整的 A/B 实验闭环。

1. 先确定：为什么要做这个实验？

我们当时的实验目标是：提高某投资流程的转化率。

假设是：

把原本一个超长的单页表单拆成多步引导，是否能提高「填写完成率」。

因此：

实验对象：访问该流程的真实用户；
对照组：看到旧版「单页表单」；
实验组：看到新版「多步引导」；
观测指标：完成率、平均耗时、中途流失位置等。

只有先把这些定义清楚，后续埋点和分流才有方向。

2. 埋点设计：先有指标，再谈实现

这次我们重点关心几个指标：

flow_enter：进入流程的人数；
flow_complete：完成流程的人数；
step_view：在多步表单中，每一步的曝光；
step_error：每一步表单提交失败次数。

在前端埋点上做了几件事：

所有埋点带上 experiment_id 和 variant（A / B）；
关键事件使用统一的 event_name + event_params 格式；
尽量避免把业务逻辑硬编码到埋点名里。

示例：

track('flow_enter', {
  experimentId: 'exp_split_form_v1',
  variant: currentVariant, // 'A' 或 'B'
});

track('step_view', {
  experimentId: 'exp_split_form_v1',
  variant: currentVariant,
  step: 1,
});

track('flow_complete', {
  experimentId: 'exp_split_form_v1',
  variant: currentVariant,
});

3. 分流：让实验「公平」且可控

3.1 基本原则

同一用户体验稳定
- 被分到 A 组，就一直看 A；
- 避免一次访问是 A，刷新变 B。
分配近似均匀

实验与增长 on Saiga

前端视角下的 A/B Test：埋点、分流与验证

1. 先确定：为什么要做这个实验？

2. 埋点设计：先有指标，再谈实现

3. 分流：让实验「公平」且可控

3.1 基本原则