A/B测试是开发人员和产品团队了解用户如何不同地使用他们的工具的一种常见方式。
例如,如果一个团队正在推出一个新的功能,它想知道这个功能是否做了它想做的事情--增加参与度、注册、购买,等等。通过在实验中测试新功能,他们将能够确定新功能对用户体验的影响与对照组的精确方式。
在我的网站Solitaired,我们持续进行A/B测试。我们测试新的功能(使用油漆门),新的游戏,和新的布局。我们的A/B测试从10%开始,然后在我们看到积极的参与时扩大我们的测试。
对我们来说,一个大问题是首先建立A/B测试。当然,有一些工具声称可以使A/B测试变得简单--如Optimizely和Google Optimize。
然而,这些工具的主要重点是客户端--意味着A/B测试的变化发生在页面加载之后。虽然易用性是客户端测试的好处之一,但客户端测试也有一些主要缺点。
- 当A/B测试开始时,页面会闪烁
- 主要局限于视觉变化,如文字、颜色等。
- 多页面测试几乎不可能
这就是为什么大多数应用或严肃的A/B测试团队使用服务器端测试。服务器端测试在设置上有点棘手(但不是那么棘手),但有一些额外的好处。
- 提高速度,没有页面上的闪动
- 多页面/多步骤测试
- 能够与后端数据库同步
我们对我们的A/B测试软件足够满意,所以我们将其开源。在这里,我们将走过如何使用我们的中间件为Node.js应用程序进行A/B测试。
安装A/B测试中间件
要求
- Node和Express
- 用于会话管理的Express-session
你可以先安装npm库,easy-abtest。
npm install easy-abtest
然后将该包添加到你的app.js 文件中。
const abtest = require('easy-abtest');
在你的文件中再往下,用options 参数添加中间件(我们将在下面讨论这个问题)。
let options = {
enabled: true,
name: 'experiment-ID-here',
buckets: [
{variant: 0, weight: 0.40},
{variant: 1, weight: 0.60}
]
}
app.use(abtest(options));
注意:如果你使用express.static ,在它后面添加中间件代码。否则,它将在每个静态资产调用中运行。
选项对象可以描述如下。
enabled(Boolean): 这是为了让你可以轻松地打开或关闭你的A/B测试代码name:实验名称。这是一个你可以添加的蛞蝓,如果你使用谷歌分析或Mixpanel,你需要将他们的蛞蝓添加到这个字段中buckets:这是好东西。这是一个数组,你在这里描述你的变体。每个变体都是一个对象,有以下几个键。variant:0用于控制,1用于第一个单元,2用于第二个,以此类推。只有0桶是真正需要的,但你也应该有一个实验单元weight: 这是这个单元应该占用的流量的百分比。例如,0.1的值等于10%。你所有的权重加起来应该是百分之百。
现在,当一个新用户来到你的应用程序,中间件将运行并为用户的会话分配一个桶。它还会将桶分配给本地变量,这些变量可以在你的视图模板中使用。
- 在你的路由器中。
req.session.test - 在你的视图中。
abTest
通过在你的路由器和你的视图中都可用,桶可以被用来以任何你想要的方式分割你的用户,例如。
- 如果你想向你的控制用户发送一个视图模板,而向你的实验单元发送一个不同的模板,你可以调用不同的
render()功能。
if (req.session.test.bucket == 0) {
return res.render('index');
} else if (req.session.test.bucket == 1) {
return res.render('index-new');
}
- 如果你想在视图中向你的用户显示不同的标题,你也可以这么做。
in homepage.pug
if abTest.bucket == 0
h1 The best thing since sliced bread.
else if abTest.bucket == 1
h1 The best thing since apple pie.
这就是设置方面的问题了。通过对后台、视图模板和客户端的访问,你可以以任何你想要的方式对你的测试进行测试。(例如, Mojomox 的团队 使用 easy-abtest 来计算出在多页面体验中给用户的步骤顺序)。)
将测试系统连接到报告系统
尽管你现在可以在你的应用程序中运行A/B测试,但你仍然需要知道哪些测试获胜。这意味着你需要将你的实验连接到一些报告的后端。我在下面提出了几个建议。
连接到谷歌分析
比方说,你想跟踪一个实验是否比另一个实验产生了更多的按钮点击率。
你可以通过将A/B测试桶的数据以JSON对象的形式添加到视图中,然后推送相应的事件,就可以轻松做到这一点。
script.
let abTest = !{JSON.stringify(abTest)};
if abTest.bucket == 0
button#cta Click here now
else if abTest.bucket == 1
button#cta Start today!
script.
$('#cta').on('click', function() {
gtag('event', abTest.bucket, {
'event_category': abTest.name,
'event_label': 'start today'
});
});
如果你想为你的A/B测试产品使用Google Optimize,你只需要按照这里的教程,在中间件选项中使用Optimize Experiment ID作为实验的slug。
创建你自己的数据库
同样地,你可以在你自己编写的数据库表中跟踪事件。请记住,可能会发生大量的交易。无论如何,你应该在你的表中包括以下字段。
- 实验名称
- 桶的变体
- 值(例如,1代表 "一键点击")。
- 日期/时间
总结
服务器端的A/B测试对客户端显然是有利的,但在过去,它需要考虑如何设置。有了easy-abtest中间件,你可以轻松地将A/B测试整合到你的应用程序中。
你接下来要测试什么?产品涨价,或者是一个新的标志?有了A/B测试,你可以不断地进行试验,看看什么是对你的用户和你的业务最好的产品。