【转】AB实验设计思路及实验落地 ABtest不平衡

妖狐艹你老母 2021-06-11 15:14 903阅读 0赞

# [来源][Link 1] #

[ABtest不平衡解决办法][ABtest]

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

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

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

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

> **某公司日常（1）**  
> 产品：把页面标题变成之前的两倍。标题就是要醒目，要大大大。  
> ![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWE5ODdmOTlkMDkxYmVmOTEuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]  
> 设计：打死都不同意，太大的标题不精致不优雅。  
> BOSS：下面的按钮点击导流就是收入。收入就是一切！！！你们做下实验，采用收入高的方案。  
> 前端：哦。

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

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

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

2.1 实验的目的是什么？

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

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

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

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

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

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

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

2.3.1 提升页面的用户体验：

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

2.3.2 提升广告收入：

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

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

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

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

3.1 如何抽样

[github/mip-experiment][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][API] 是`_hmt.push(['_trackEvent', category, action, opt_label, opt_value]);`，那么在事件中就可以写`_hmt.push(['_trackEvent', '按钮01', '点击']);`  
**自行统计**（百度系方法）：在事件触发时，新建一个图片，在图片URL中拼上统计事件的链接。比如[百度搜索结果页][Link 5]的滚动请求为 `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）**  
> ![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWQwYmVmNmZjYTE0YTA5OTUuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]  
> 前端：监听滚动事件。  
> if( top > scrollY + screenHeight) \{  
> \-\_\_\_ 按钮在屏幕内展现一次，发请求；  
> \-\_\_\_ 标记为已展现过。  
> \}

**第三方库**：[jquery 插件-github][jquery _-github]，[原生实现- github][- github]

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

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

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

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

4.2 为保证数据可信，请空转流量

解释：**空转是指先抽样，统计关键数据，而不修改页面样式的流程，相当于AA实验。**

原因：虽然**前端随机数抽样**及类似方法理论上能够保证两份流量 pv 和 uv 相同，关键数据相差不大，但毕竟存在抽样不均的特殊情况。空转可以明显地发现抽样不均，摒弃掉这部分流量，保证实验数据的变化仅仅是实验本身（样式改变）引起的。

具体做法：如果要做 AB 实验，需要实验组 A 和对照组 B 两组流量。一次性抽取5-6组流量，空转3天，监控 pv，uv，点击数量等关键数据。选择两组数据最接近的上实验，其他流量可以释放。

4.3 为验证结论正确，请反转实验

解释：**当得出实验正向结论后，将实验反转，对照组变成实验组，实验组变成对照组。**

> **某公司日常（4）**  
> 产品：实验数据正了，标题就是要大大大！  
> 设计：这不科学，应该是数据波动。需要反转验证。  
> ![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWJjZDk2NjE3NWE1YzJjMGQuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]  
> 前端：嗯，我反转一下。

原因：反转实验能够验证实验数据的差别是由实验（样式改变）引起的。但需要注意的是，建议只在实验为正向收益时反转实验。如果收益为负，反转实验，只会多损伤原对照组的用户体验。

具体做法：举个例子，实验目的为“按钮大小对该按钮点击率的影响”。A 组流量按钮变大，B 组为对照组，按钮大小正常，数据显示A组的按钮点击率升高，效果更好。在反转试验中，A 组流量按钮回复正常，B 组变为实验组，按钮变大。如果此时数据显示B组按钮点击率升高，说明按钮大小对点击率有影响。

4.4 为减少多个实验互相影响，请分流量实验，不要分层实验

解释：“分流量实验”是指一次抽取流量，分别进行多个实验。“分层实验”是指每个实验都从100%中抽取一次流量。

原因：“分流量实验”能够保证实验间没有重合，一份流量不会同时中两个实验。而“分层实验”相当于从总流量中抽取多次，一份流量有概率同时中两个实验，这会对实验结果有一定影响。

具体做法：

*  分流量实验: 抽取40%的流量，20% 用于 Foo 实验，20% 用于 Bar 实验。
 *  分层实验: 抽取20%的流量用于 Foo 实验；再抽取 20% 流量用于 Bar 实验。（此时约有 4% 流量即Foo 又 Bar）

> **某公司日常（5）**  
> 产品：反转数据也是正的，说明标题应该大大大。  
> 设计：不对，不科学，是不是流量之间有干扰？  
> ![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWY5MTM0MTMwZjVkNzMyMTguanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]  
> 前端：采用的分流量实验，确认没有干扰。

4.5 考虑到用户习惯性，请保证实验黏性及持续时间

解释：**实验黏性 (sticky)指的是实验流量中的 pv 分配固定，单个用户每次都被分入相同分组。实验的持续时间建议至少3天，一周左右为好**。

> **某公司日常（6）**  
> ![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWY0OTVkYmRiOTk3NTk0MDAuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw][]前端：正常情况下，应该使用黏性的实验抽样。

原因：在页面改版后，用户可能有一段时间的学习过程和习惯期，显示为数据的下降，以及缓慢回升。

具体做法：当某个用户中抽样时，本地记录（localstorage）他的抽样情况，下次他进入同样的页面，读取记录，进入同样的分组。

## 五. 如何分析实验数据，有哪些数据需要重点关注? ##

如文章 2.1 提到的，**重点关注一个目标，并选择其它几个目标作为辅助，以免走偏。**

常见的目标为：pv, uv, 首屏按钮点展比，广告点展比。

## 六. 附：如何搭建前端实验项目，以 mip-experiment 为例 ##

[mip-experiment][] 是 [MIP 开源项目][MIP]中的一个组件，从零搭建了一个前端抽样的实验系统。抽样系统实现了上文提到的抽样功能：

*  用户分组
 *  实验黏性设置
 *  分流量抽样，分层抽样
 *  实验空转
 *  实验AB样式设置
 *  实验反转

除此之外，`mip-experiment` 还与 mip-pix 和百度统计深度整合，实现了统计功能：

*  [mip-pix][] 将实验数据拼装在图片 URL 中，将请求发往站长服务器，由站长自行统计。
 *  [mip-experiment&百度统计][mip-experiment] 通过配置，可将请求发送到百度统计后台，实验数据可在百度统计->访问分析->事件分析中看到。

mip-experiment 的源码可在 [github][github_mip-experiment] 上找到，有建议可以提 issue 给我。

[MIP 官网][MIP 1]也使用了[mip-experiment][] 做实验，现在正处于空转阶段。实验完成后将发出整体实验的流程和结论。

> 文章作者：[Jenny\_L][Jenny_L]  
> 转发自[Jenny\_L 的简书][Jenny_L 1]

[Link 1]: https://www.jianshu.com/p/49068751ce0f
[ABtest]: https://www.cnblogs.com/zichun-zeng/p/9042779.html
[AB]: https://www.cnblogs.com/mipengine/p/AB_experiment_design_idea.html
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWE5ODdmOTlkMDkxYmVmOTEuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20210520/3a1baef4df2a4ec28688fcd26c52f036.png
[Link 2]: http://www.uisdc.com/3-typography-tips-for-designer
[Link 3]: https://www.zhihu.com/question/19587406
[Link 4]: http://baike.baidu.com/link?url=xNMVY2eLXas9EulIXHxSsryk3nr9Shj-DP7WRjEnJ3Ar1Px7sVvnSU8LSMCmiiKzG4EbK_XWHoYcFQKiud7w2mEuaIdiA3xeujBCzDVsJ6-9V9GT1D_7yBY9DpGoSgb0PvZEQTUXrMcyVUBamt6MgK
[loading]: http://huaban.com/pins/2255947/
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWU5NzVkNWYwOTgzZjU1M2IuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20210520/de9db0668d72498f8bf569ec26634a2e.png
[github_mip-experiment]: https://github.com/mipengine/mip-extensions/tree/master/src/mip-experiment
[API]: http://tongji.baidu.com/open/api/more?p=guide_trackEvent
[Link 5]: https://m.baidu.com/s?word=123
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWQwYmVmNmZjYTE0YTA5OTUuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20210520/1478258db65149dcb9db528970fc5104.png
[jquery _-github]: https://github.com/customd/jquery-visible
[- github]: https://github.com/vvo/in-viewport
[google]: https://www.google.com.hk/?gfe_rd=cr&ei=grnUWLClNa6M8QfBrL6ADQ&gws_rd=ssl#safe=strict&q=http+request+analysis&*
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWJjZDk2NjE3NWE1YzJjMGQuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20210520/f59513401aba4073a1d9d7f5399bea9c.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWY5MTM0MTMwZjVkNzMyMTguanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20210520/d99f8d93d16643d6ad4156922c125d82.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjAzNzMzLWY0OTVkYmRiOTk3NTk0MDAuanBnP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMjQw]: /images/20210520/00445d9f71ae4850a0b6b55dd50f3d3d.png
[mip-experiment]: https://www.mipengine.org/doc/3-widget/3-customize-widget/experiment-widget.html
[MIP]: https://www.mipengine.org/doc/02-what-is-mip.html
[mip-pix]: https://www.mipengine.org/doc/3-widget/2-inner-widget/pix-widget.html
[MIP 1]: https://www.mipengine.org/
[Jenny_L]: https://github.com/jennyliang220
[Jenny_L 1]: http://www.jianshu.com/p/49068751ce0f