QuikieApps

反应 AB测试:用法,安装等

什么是React AB测试?

在某些时候,我们需要将同一网页的两个变体同时提供给网站访问者的不同群体,以进行比较。此过程称为React AB测试或拆分测试。您网站上的访问者越多,您扩展业务的机会就越多。 A / B测试可确定您的网站是否有更多访问者。转化率是网站可以吸引访问者对您网站的注意力的速率。如果您希望您的企业获得更高的转化率,那么您的网站应该可以正常运行。

A / B测试通常会检查哪个版本更好,然后将其指定为实现更高转化率的来源。稍后,这个特定的变体将帮助您以更好的方式优化网站,以获得出色的结果。

转化指标对于不同的网站是唯一的。如果您的网站是电子商务网站,则在a / b测试期间将考虑销售总数。对于B2B网站,要考虑生成合格的潜在客户。

为什么要进行AB测试?

A / B测试有助于理解CRO(转化率优化)。借助于此,您可以从用户那里获得定性和定量的见解。这样可以轻松了解您的客户要求并改善您的网站。使用a / b测试,可以:

解决访客的痛点

访客访问您的网站以实现特定目标并了解您的产品详细信息。消费者可能会发现的一些基本问题,

这些都会导致您的网站获得不好的评价。最终,它将增加摩擦并影响您的转化率。您可以检查从访问者那里收到的评论,并使用它们来提高网站效率和功能。收集来自不同来源的数据,并检查您落后于其他方面的哪些部分,并尝试弥补这些故障。

 

从现有流量中获得更高的投资回报率

有时,获取任何优质流量的成本很高。通过A / B测试,您可以以更少的钱提高转换率。即使很小的变化也可以产生出色的结果。

降低跳出率

检查跳出率很重要,因为它会判断您的表现。太多选择,期望不匹配是导致跳出率提高的众多原因中的一些。为了解决这个问题,您需要测试网站上的各种变体,并找到最好的。

进行低风险的修改

最好在您的网站中进行必要的更改,而不是修改整个网站。借助A / B测试,可以轻松完成此操作,因为它可以让您以最小的变化获得最大的输出。这也将降低危害您当前转换率的风险。

实现统计和重大改进

由于完全由数据驱动,因此很容易确定赢家和输家。我们可以通过检查用户或访客大部分时间在哪里度过来检查用户的优先级。

 

有益地重新设计您的网站

改善网站任何特定部分的决定应始终基于数据驱动的A / B测试。即使其他版本上线,也要继续进行测试,直到您确定已为访问者提供了最优化,最有效的网站版本。

安装:

react-ab-test仅与两个版本兼容。反应0.14倍和反应0.15倍。

它是通过npm安装的,

npm安装react-ab-test。 

用法:

在这里,我们将看到react ab测试的基本用法及其少量组件。

 

独立组件

varExperiment = require(“ react-ab-test / lib / Experiment”);

varVariant = require(“ react-ab-test / lib / Variant”);

var \ emitter == require(“ react-ab-test / lib / emitter”);

 

varApp = 反应.createClass({

onButtonClick:功能{e} {

this.refs.experiment.win();

},

渲染:function(){

返回<div>

<实验ref =“实验” name =“我的示例”>

<Variant name=”A”>

<div>Section A</div>

</Variant>

<Variant name=”B”>

<div>Section B</div>

</Variant>

</Experiment>

<button onClick = {this.onButtonClick}>Emit a win</button>

</div>;

}

});

 

generator.addPlayListener(function(experimentName,variantName){

console.log(“显示实验”,“ experimentName”,“ variant”,“ variantName”和“’”);

});

 

generator.addWinListener(function(experimentName,variantName){

console.log(单击了``Variant''+``variantName +''``experiment''+``experimentName +``'');

});

 

协调多个组成部分

varExperiment = require(“ react-ab-test / lib / Experiment”);

varVariant = require(“ react-ab-test / lib / Variant”);

var \ emitter == require(“ react-ab-test / lib / emitter”);

 

generator.defineVariants(“我的示例”,[[A],“ B”,“ C”]));

 

var Component1 = 反应.createClass({

渲染:function(){

返回<实验名称=“我的示例”>

<Variant name=”A”>

<div>Section A</div>

</Variant>

<Variant name=”B”>

<div>Section B</div>

</Variant>

</Experiment>;

}

});

 

var Component2 = 反应.createClass({

渲染:function(){

返回<实验名称=“我的示例”>

<Variant name=”A”>

<div>Subsection A</div>

</Variant>

<Variant name=”B”>

<div>Subsection B</div>

</Variant>

<Variant name=”C”>

<div>Subsection C</div>

</Variant>

</Experiment>;

}

});

 

var Component3 = 反应.createClass({

onButtonClick:功能{e} {

generator.emitWin(“我的示例”);

},

渲染:function(){

返回<button onClick = {this.onButtonClick}>Emit a win</button>;

}

});

 

varApp = 反应.createClass({

渲染:function(){

返回<div>

<Component1 />

<Component2 />

<Component3 />

</div>;

}

});

 

generator.addPlayListener(function(experimentName,variantName){

console.log(“显示实验”,“ experimentName”,“ variant”,“ variantName”和“’”);

});

 

generator.addWinListener(function(experimentName,variantName){

console.log(单击了“ Variant” +“ variantName” +“实验”“ +” experimentName +“”);

});

加权变量

varExperiment = require(“ react-ab-test / lib / Experiment”);

varVariant = require(“ react-ab-test / lib / Variant”);

var \ emitter == require(“ react-ab-test / lib / emitter”);

 

generator.defineVariants(“我的示例”,[[A],“ B”,“ C”],[10、40、40]);

 

varApp = 反应.createClass({

渲染:function(){

返回<div>

<实验ref =“实验” name =“我的示例”>

<Variant name=”A”>

<div>Section A</div>

</Variant>

<Variant name=”B”>

<div>Section B</div>

</Variant>

<Variant name=”C”>

<div>Section C</div>

</Variant>

</Experiment>

</div>;

}

});

调试

varExperiment = require(“ react-ab-test / lib / Experiment”);

varVariant = require(“ react-ab-test / lib / Variant”);

varexperimentDebugger = require(“ react-ab-test / lib / debugger”);

 

ExperimentDebugger.enable();

 

varApp = 反应.createClass({

渲染:function(){

返回<div>

<实验ref =“实验” name =“我的示例”>

<Variant name=”A”>

<div>Section A</div>

</Variant>

<Variant name=”B”>

<div>Section B</div>

</Variant>

</Experiment>

</div>;

}

});

 

服务器渲染

require(“ babel / register”)({only:// jsx /});

var express = require('express');

var \ session \ = require('express-session');

varReact = require(“ react”);

varReactDOMServer = require(“ react-dom / server”);

var Component = require(``./Component.jsx'');

varʻAbEmitter == require(“ react-ab-test / lib / emitter”)

varapp = express();

app.set('view engine','ejs');

app.use(session({

秘密:“键盘猫”,

重新保存:错误,

saveUninitialized:true

}));

app.get(‘/’,function(req,res){

varreactElement = 反应.createElement(Component,{userIdentifier:req.sessionID});

var reactString = 反应DOMServer.renderToString(reactElement);

abEmitter.rewind();

res.render(“模板”,{

sessionID:req.sessionID,

reactOutput:反应字符串

});

});

app.use(express.static('www'));

app.listen(8080);

 

结论:

AB测试是测试站点效率的非常有效的工具。轻松了解您的积压并相应地进行改进。它决定您的网站是否有更多访问者。转化率是网站可以吸引访问者对您网站的注意力的速率。借助于此,您可以从用户那里获得定性和定量的见解。使用a / b测试可以解决访问者的痛点,获得更好的投资回报率,降低跳出率,进行低风险的修改,实现统计上的显着改善以及对网站进行有益的重新设计。我们还看到了a / b测试工具在不同组件上的一些用法,例如独立,协调多个,调试,加权变量,服务器渲染。

 

 

Exit mobile version