让产品有效迭代，前端A/B Testing的简单实现

A/B Testing简介

互联网产品的迭代速度很快，往往一周一小发布，一月一大发布，产品提出的种种需求，哪些改动是提升产品体验的，哪些是阻碍产品进步的，如果没有数据可以参考，仅仅是靠拍脑袋的话，对产品成功与否来说是及其不严谨的，产品的成功不能只靠运气或者可能，而是要以数据为依据，靠数据说话，A/B Testing是众多数据中的一种。

所谓A/B Testing是可以帮产品快速检验变化有效的一种手段，比如PC站点的导航栏开始在左边，一次产品迭代将它改到了右边，如何检测这次简单的改动是否有效，如何判断转换率的提升，当然我们可以检测上线后转换率的变化，但是这种检测不是最严谨的做法，更好的方法可能是：

将用户平均分成两组，一组使用旧的产品，一组使用新的产品，然后通过两组用户的数据对比，最终得出这次改动是不是有效的

这里的几个特点是：

① 至少有两个版本（一般来说两个即可）

② 可动态控制到每个版本的流量

③ 能够检测到每个版本的转换率，能收集数据

通过阅读本文，可以了解到一个简单的A/B Testing的前端实现方案的实现（多数A/B Testing还是基于服务器端的）

文中是我个人的一些框架&业务开发经验，希望对各位有用，也希望各位多多支持讨论，指出文中不足以及提出您的一些建议。

代码地址：https://github.com/yexiaochai/mvc/

建议对此文有兴趣的朋友先看这两篇博客：

【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知

【组件化开发】前端进阶篇之如何编写可维护可升级的代码

前端实现

做代码实现的时候，首先抓住一个关键点：关注不同版本转换率的变化，我们这里的转换率便是订单提交数据，所以这里可以得到一个结论（不同项目不一样）

在创建订单的时候需要记录该次订单来源于A方案还是B方案，这样的话我们最终可以得到一个数据：

A方案今天创建了多少订单，B方案今天创建了多少订单，然后在微调不同方案的流量，这样便能对比出这次改动是否有意义了

PS：一般来说，A/B Testing针对的是大流量页面

本来A/B Testing可能还需要保证一个用户进入一个页面总是采用上次的方案，这个实现需要看你项目实际需要

根据以下需求，我得出了代码要求：

① 有方案可以让新老页面同时可访问

② 有方案控制新老页面的访问比例

③ 有方案得到各个页面（方案）最终产生订单的数据

这里我们依旧以list产品列表页为例，我们可能还需要记录进入不同方案的PV，这里可以使用百度统计类产品，自定义事件完成，我们这里不予关注

两个方案同时存在

我们这里完成的第一个功能是两个方案同时存在，这里我们做了一个事情：将原有的pages复制了一份出来，作为过去版本：

因为框架的便宜，我们可以在实例化时候做简单操作便可以实现两套代码同时可访问，比如我们这里让url带一个plan=b便访问老代码，我们这里做一个变化是将下面工具栏的位置放上去：

当然我不得不说这次改动十分傻逼，但是我们也料不到产品会如何出招啊，这里仅仅是举个例子，我们这里只是简单的改了下main.js的代码：

复制代码

1 (function () {

2 var project = './';

3 var viewRoot = 'pages';

6 //这里仅仅需要对list页做A/B Testing

7 var viewMapping = {};

8 var ver = 'ver/1.0.0/';

9 var APath = 'pages/list/list';

10 var BPath = ver + APath;

11 viewRoot = ver + viewRoot;

13 //默认最新方案

14 viewMapping.list = APath;

15 if (_.getUrlParam().plan && _.getUrlParam().plan == 'b') {

16 viewMapping.list = BPath;

17 project = './' + ver;

18 }

20 require.config({

21 paths: {

22 //BUS相关模板根目录

23 IndexPath: project + 'pages/index',

24 ListPath: project + 'pages/list',

25 CityPath: project + 'pages/city',

27 TemplatePath: project + 'templates',

29 BusStore: project + 'model/bus.store',

30 BusModel: project + 'model/bus.model'

31 }

32 });

33 require(['AbstractApp', 'UIHeader'], function (APP, UIHeader) {

35 window.APP = new APP({

36 //配置A/B Testing

37 viewMapping: viewMapping,

38 UIHeader: UIHeader,

39 viewRootPath: viewRoot

40 });

41 window.APP.initApp();

42 });

43 })();

复制代码

控制流量

我们这里要做的第二件事情是控制流量，这里如果想用户第二次依旧保持上一次的方案，可以使用localsorage，我们这里边简单的使用随机数控制吧，这里将上述代码做了一个优化：

复制代码

1 (function () {

2 var project = './';

3 var viewRoot = 'pages';

5 //这里仅仅需要对list页做A/B Testing

6 var ver = 'ver/1.0.0/';

8 //在这里设置比例参数，数字0-10，默认A方案为10，只使用最新方案

9 //a 方案所占比例为60%

10 var APlan = 6;

12 //产生1-10随机数，如果条件满足则为plan B

13 var abRandom = parseInt(Math.random() * 10);

14 if (abRandom >= APlan) {

15 project = './' + ver;

16 viewRoot = ver + viewRoot;

17 }

19 //如果url强制设置plan=b则使用老方案

20 if (_.getUrlParam().plan && _.getUrlParam().plan == 'b') {

21 project = './' + ver;

22 viewRoot = ver + viewRoot;

23 }

25 require.config({

26 paths: {

27 //BUS相关模板根目录

28 IndexPath: project + 'pages/index',

29 ListPath: project + 'pages/list',

30 CityPath: project + 'pages/city',

32 TemplatePath: project + 'templates',

34 BusStore: project + 'model/bus.store',

35 BusModel: project + 'model/bus.model'

36 }

37 });

38 require(['AbstractApp', 'UIHeader'], function (APP, UIHeader) {

40 window.APP = new APP({

41 UIHeader: UIHeader,

42 viewRootPath: viewRoot

43 });

44 window.APP.initApp();

45 });

46 })();

复制代码

于是我们做到了简单的流量控制，这里控制60%访问最新方案，40%访问老方案。

数据记录

我们这里完成的最后一步便是数据记录了，根据之前我们的接口设计，我们完全可以在此加上一个通用的字段：

PS：这里不懂的请看此篇博客：【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知

head: {

us: '',

version: '1.0.0',

plan: ''

}

我们每次创建订单的时候皆会将此参数传给服务器端，包括版本、渠道，现在现在一个plan服务器端即可收集。

而这个plan的记录方式有多种方案，可以释放全局方法，或者将该参数注入给APP等方案，因为我们这里不会有接口提交，这里便略去。

结语

今天我们简单的介绍了下A/B Testing的概念，并且站在前端的角度对其进行了实现，其中方案还没完全落地到实际项目中，后续落地到项目中去后可能会完善此文吧

重要的事情

如果您觉得这篇博客对您哪怕有一丝丝的帮助，微博求粉博客求赞！！！

本文转自叶小钗博客园博客，原文链接http://www.cnblogs.com/yexiaochai/p/4892777.html，如需转载请自行联系原作者

让产品有效迭代，前端A/B Testing的简单实现相关推荐

课后实践10：以闲鱼为例，梳理产品功能结构迭代路径
课后实践10:以闲鱼为例,梳理产品功能结构&迭代路径 [作业目标] [作业题目] [我的作品] Xmind绘制闲鱼思维导图近1年的关键功能迭代路径本作品为白熊学院2021年的第92期作品, ...
专访小米科技 VR 产品总监马杰思：VR 产品的迭代和技术瓶颈
马杰思,现任小米 VR 产品总监,负责小米 VR 软硬件的产品需求与管理.在小米之前任 HTC Vive中国区行业应用负责人.曾先后在虚拟现实.内容分发.计算机视觉.人工智能等领域从事产品工作.对VR ...
众昂矿业刘金海：萤石是氟化工产品的主要前端原材料
氟化工产业链以萤石为起点,中上游主要为氢氟酸及氟化铝等,并延伸出氟制冷剂.含氟聚合物.含氟精细化学品和无机氟化物四大类,终端产品为空调及汽车用的制冷剂.工业含氟新材料.半导体领域中极其重要的电子级氢氟 ...
Unit testing Cmockery 简单使用
/*********************************************************************** Unit testing Cmockery 简单使用* ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
html前端小知识：制作简单的纯文字图标按钮
今天分享下"html前端小知识:制作简单的纯文字图标按钮"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark ...
阿里云视频直播 web前端[移动端] Aliplayer的简单案例
阿里云视频直播 web前端[移动端] Aliplayer的简单案例最近做了一个功能就是播放后台提供的各种直播视频,格式在未确定的情况下,刚开始以为简单的一个video标签就能播放视频,后面才发现各种 ...
前端表格插件Jquery DataTable简单汉化
前端表格插件Jquery DataTable简单汉化项目需要求,需要用到Jquery DataTable插件,功能强大,可以实现前端数据分页和页面检索,数据10000条类可以考虑.但由于国外插件,页 ...
互联网产品快速迭代下是否需要写详细测试用例
由于自己在互联网电商公司工作,产品需求很多,平台功能迭代很快,有时一个功能需求评审+开发+测试 +上线总共只有1天时间的计划,而且有些紧急需求不允许delay,这时我们如何分配实际执行测试时间和测试用 ...

让产品有效迭代，前端A/B Testing的简单实现

让产品有效迭代，前端A/B Testing的简单实现相关推荐

最新文章

热门文章