这篇文章会讨论：
- 在什么情况下需要做 AB 实验
- 从产品/交互角度，如何设计一个实验
- 前端工程师如何打点
- 如何统计数据，并保证数据准确可信
- 如何分析实验数据，有哪些数据需要重点关注
- 附：如何搭建前端实验项目，以 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 元素展现打点
在浏览器自带事件中，没有“元素在浏览器内可见”事件，但是我们可以用js判断，或者引用第三方库来实现。
js 判断思路：根据页面当前滚动距离 scrollY，元素距离顶部距离 top，和屏幕高度 screenHeight 可以计算出元素是否在页面内可见。
某公司日常（3）
前端：监听滚动事件。
if( top > scrollY + screenHeight) {
-___ 按钮在屏幕内展现一次，发请求；
-___ 标记为已展现过。
}
第三方库：jquery 插件-github，原生实现- github
四. 如何统计数据，并保证数据准确可信
4.1 统计的两种方式：第三方统计与自行统计
如果选择第三方统计，就选择了 Easy 模式。百度统计，Google Analytics 等统计服务会帮你计算很多需要的数据。首推百度统计，除了因为它是自家产品，有问题随时可以找接口人解决之外，还因为它是免费的中文统计，投放简单，数据产出快。
如果选择自行统计，那么面对的就是浩大的工程了，储存量和计算量惊人。百度系的统计是将统计参数拼接到图片 URL 后面，带给服务端。知乎的统计是发送了 POST 请求。无论哪种方案，每次用户点击，滑动，数据加载都会产生一条 http request，储存和计算这些 request 会耗费不少服务器资源。Jenny_L 没有实践过，如有需要，可以 google 一下。
4.2 为保证数据可信，请空转流量
解释：空转是指先抽样，统计关键数据，而不修改页面样式的流程，相当于AA实验。
原因：虽然前端随机数抽样及类似方法理论上能够保证两份流量 pv 和 uv 相同，关键数据相差不大，但毕竟存在抽样不均的特殊情况。空转可以明显地发现抽样不均，摒弃掉这部分流量，保证实验数据的变化仅仅是实验本身（样式改变）引起的。
具体做法：如果要做 AB 实验，需要实验组 A 和对照组 B 两组流量。一次性抽取5-6组流量，空转3天，监控 pv，uv，点击数量等关键数据。选择两组数据最接近的上实验，其他流量可以释放。
4.3 为验证结论正确，请反转实验
解释：当得出实验正向结论后，将实验反转，对照组变成实验组，实验组变成对照组。
某公司日常（4）
产品：实验数据正了，标题就是要大大大！
设计：这不科学，应该是数据波动。需要反转验证。
前端：嗯，我反转一下。
原因：反转实验能够验证实验数据的差别是由实验（样式改变）引起的。但需要注意的是，建议只在实验为正向收益时反转实验。如果收益为负，反转实验，只会多损伤原对照组的用户体验。
具体做法：举个例子，实验目的为“按钮大小对该按钮点击率的影响”。A 组流量按钮变大，B 组为对照组，按钮大小正常，数据显示A组的按钮点击率升高，效果更好。在反转试验中，A 组流量按钮回复正常，B 组变为实验组，按钮变大。如果此时数据显示B组按钮点击率升高，说明按钮大小对点击率有影响。
4.4 为减少多个实验互相影响，请分流量实验，不要分层实验
解释：“分流量实验”是指一次抽取流量，分别进行多个实验。“分层实验”是指每个实验都从100%中抽取一次流量。
原因：“分流量实验”能够保证实验间没有重合，一份流量不会同时中两个实验。而“分层实验”相当于从总流量中抽取多次，一份流量有概率同时中两个实验，这会对实验结果有一定影响。
具体做法：
- 分流量实验: 抽取40%的流量，20% 用于 Foo 实验，20% 用于 Bar 实验。
- 分层实验: 抽取20%的流量用于 Foo 实验；再抽取 20% 流量用于 Bar 实验。（此时约有 4% 流量即Foo 又 Bar）
某公司日常（5）
产品：反转数据也是正的，说明标题应该大大大。
设计：不对，不科学，是不是流量之间有干扰？
前端：采用的分流量实验，确认没有干扰。
4.5 考虑到用户习惯性，请保证实验黏性及持续时间
解释：实验黏性 (sticky)指的是实验流量中的 pv 分配固定，单个用户每次都被分入相同分组。实验的持续时间建议至少3天，一周左右为好。
某公司日常（6）
前端：正常情况下，应该使用黏性的实验抽样。
原因：在页面改版后，用户可能有一段时间的学习过程和习惯期，显示为数据的下降，以及缓慢回升。
具体做法：当某个用户中抽样时，本地记录（localstorage）他的抽样情况，下次他进入同样的页面，读取记录，进入同样的分组。
五. 如何分析实验数据，有哪些数据需要重点关注?
如文章 2.1 提到的，重点关注一个目标，并选择其它几个目标作为辅助，以免走偏。
常见的目标为：pv, uv, 首屏按钮点展比，广告点展比。
六. 附：如何搭建前端实验项目，以 mip-experiment 为例
mip-experiment 是 MIP 开源项目中的一个组件，从零搭建了一个前端抽样的实验系统。抽样系统实现了上文提到的抽样功能：
- 用户分组
- 实验黏性设置
- 分流量抽样，分层抽样
- 实验空转
- 实验AB样式设置
- 实验反转
除此之外，mip-experiment 还与 mip-pix 和百度统计深度整合，实现了统计功能：
- mip-pix 将实验数据拼装在图片 URL 中，将请求发往站长服务器，由站长自行统计。
- mip-experiment&百度统计 通过配置，可将请求发送到百度统计后台，实验数据可在百度统计->访问分析->事件分析中看到。
mip-experiment 的源码可在 github 上找到，有建议可以提 issue 给我。
（正文完）
打个广告：MIP 开源项目现在有很多交互组件，直接引用，无需写 js，适合快速建站，来这里看教程。
MIP 官网也使用了mip-experiment 做实验，现在正处于空转阶段。实验完成后将发出整体实验的流程和结论。
