【转】AB实验设计思路及实验落地

这篇文章会讨论：
1. 在什么情况下需要做 AB 实验
2. 从产品/交互角度，如何设计一个实验
3. 前端工程师如何打点
4. 如何统计数据，并保证数据准确可信
5. 如何分析实验数据，有哪些数据需要重点关注
6. 附：如何搭建前端实验项目，以 mip-experiment 为例

一. AB 实验的使用场景和正确用法

通常，在页面有样式变化，但又不确定是修改影响好坏的时候进行 AB 实验，实验数据可以为改版提供有力支持。

某公司日常（1）
产品：把页面标题变成之前的两倍。标题就是要醒目，要大大大。

设计：打死都不同意，太大的标题不精致不优雅。
BOSS：下面的按钮点击导流就是收入。收入就是一切！！！你们做下实验，采用收入高的方案。
前端：哦。

当不确认按钮颜色，banner 大小，两个宣传语哪个效果好的时候，实验数据可以帮你做决定。

二. 产品经理如何设计实验？

在设计一个实验时，需要考虑以下问题：

2.1 实验的目的是什么？

提升点击：提升单个按钮转化能力，提升页面总体点击率，增加广告收入
用户留存：增加用户在页面的留存时长，拉升登录，减少多步骤页面的用户流失
强化功能：增加用户搜索次数，增加用户点赞频率，增加用户购买次数

重点关注一个目标，并选择其它几个目标作为辅助，以免走偏。比如：提升广告点击率，但不减少用户的留存时长和购买次数。Jenny_L 多啰嗦一句，用户体验是绝对不能损失的。在页面头部多插入一条广告，虽然可以短时间内提升广告收入，但长期来看会造成用户反感，造成永久的用户流失。

2.2 实验应设置哪些变量，哪些不变量？

样式：按钮变大，banner 底色，文章行间距和长度，中英混排样式
交互：增加提醒，增加面包屑导航，增加 loading 动画
文案：文案风格，文字长度

通常情况下，做实验都是使用控制变量法，仅改变一个影响因素，保持其他因素不变。控制变量法在物理实验中经常用到，比如自由落体实验：使用相同的物体（保证空气阻力不变），仅改变物体下落的初始高度，计算下落时间与高度的关系。类似地，在 web 样式改版实验中，仅改变标题大小，保持其他元素一致，这样就能得出标题文字大小和下方按钮点击率的关系了。

某公司日常（2）
产品：我们做个实验，验证“标题变大，按钮点击量增加”。
设计：title @2x 的设计稿给你。

前端：好。

2.3. 为得出实验结论，需要关注哪些数据？

2.3.1 提升页面的用户体验：

用户停留时间
交互动作次数
页面展现量(PV)
用户数(UV)
单个用户访问页面数 = PV/UV

2.3.2 提升广告收入：

广告点击次数
页面展现量(PV)
广告点展比 = 点击次数/PV

2.3.3 提升 App 导流量/按钮导流能力：

按钮展示次数
按钮点击量
按钮点展比 = 点击量/展示次数

三. 为了得到实验数据，如何抽样，前端工程师如何打点？

3.1 如何抽样

github/mip-experiment 实验组件采用的方案是前端随机数抽样。简单来说，就是预先设置100个实验分组，算一个100以内的随机数，随机数落在哪个区间，用户就进入哪个实验分组。

3.2 如何打点

打点请求的统计汇总方式有两种：第三方统计与自行统计。前端工程师只需要了解项目采用的是哪种就可以了。

3.2.1 PV & UV 打点

第三方统计：使用百度统计或类似服务，都不需要前端工程师手动打点，在页面插入统计代码后，在后台可以就看到 PV&UV。
自行统计：每次页面加载时看下有没有标识单一用户的 cookie，如果有，则在document.readyState === 'complete'时发送 PV 请求。数据分析时，汇总所有 http request 请求得到 PV, 根据 cookie 去重的到UV。如果没有 cookie，则根据设备特征产出及访问时间计算出一个字符串，用于标识唯一用户。

3.2.2 交互打点：滑动，点击

交互日志的打点需要前端工程师手动绑定事件。比如给按钮绑定点击事件，给轮播图绑定滑动事件等等。

第三方统计：在事件触发时，调用统计服务的API，将参数传入即可。例如百度统计的事件 API 是_hmt.push(['_trackEvent', category, action, opt_label, opt_value]);，那么在事件中就可以写_hmt.push(['_trackEvent', '按钮01', '点击']);
自行统计（百度系方法）：在事件触发时，新建一个图片，在图片URL中拼上统计事件的链接。比如百度搜索结果页的滚动请求为 https://sp1.baidu.com/xxx/mwb.gif?type=3&fm=view…，也可以拼接类似的 http request，比如https://m.aa.com/a.gif?obj=按钮01&event=点击。

3.2.3 元素展现打点

在浏览器自带事件中，没有“元素在浏览器内可见”事件，但是可以用 JavaScript 判断，或者引用第三方库来实现。
JavaScript 判断思路：根据页面当前滚动距离 scrollY，元素距离顶部距离 top，和屏幕高度 screenHeight 可以计算出元素是否在页面内可见。

某公司日常（3）

前端：监听滚动事件。
if( top > scrollY + screenHeight) {
-_ 按钮在屏幕内展现一次，发请求；
-_ 标记为已展现过。
}

第三方库：jquery 插件-github，原生实现- github

四. 如何统计数据，并保证数据准确可信

4.1 统计的两种方式：第三方统计与自行统计

如果选择第三方统计，就选择了 Easy 模式。百度统计，Google Analytics 等统计服务会帮你计算很多需要的数据。首推百度统计，除了因为它是自家产品，有问题随时可以找接口人解决之外，还因为它是免费的中文统计，投放简单，数据产出快。

如果选择自行统计，那么面对的就是浩大的工程了，储存量和计算量惊人。百度系的统计是将统计参数拼接到图片 URL 后面，带给服务端。知乎的统计是发送了 POST 请求。无论哪种方案，每次用户点击，滑动，数据加载都会产生一条 http request，储存和计算这些 request 会耗费不少服务器资源。Jenny_L 没有实践过，如有需要，可以 google 一下。