New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

testin-ab

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

testin-ab

### API参考

  • 1.5.0
  • npm
  • Socket score

Version published
Weekly downloads
2
Maintainers
1
Weekly downloads
 
Created
Source

Web/H5 SDK集成文档

API参考

Web/H5 SDK API文档

兼容性

支持市面上所有的主流浏览器,包括IE8及其以上版本。

Demo演示

此Demo是对登录按钮的文字进行A/B测试,有两个版本: 版本一"立即登录"和版本二“点击登录”。

Demo地址:https://ab.testin.cn/demo/login.html

注意:访问Demo地址,如果看到的是版本一,那么再次访问时,看到的依旧是版本一。即同一个用户,一旦分配到某个版本,再次访问时,看到的仍旧会是同一个版本。如果想看到版本二,那么要换个设备, 再访问Demo地址。

下载Web/H5 SDK

独立版本

直接下载并用 <script> 标签引入:

testin-ab-v4.0.8.js(请点击“右键另存为”)

最后更新:2017/09/13

使用SDK

加载SDK

<html>
  <head>
  </head>
  <body>
    <!-- 假设开发者将下载后的SDK放到libs目录下 -->
    <script src="libs/testin-ab.js"></script>
  </body>
</html>

SDK库文件加载之后,本页面会得到一个全局对象testinAB。所有的API都是由testinAB对象提供的。

初始化SDK

调用init方法来完成初始化。

var appKey = 'TESTIN_xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
testinAB.init(appKey);

其中appKey 是在登录 Testin后台创建应用之后获得的该“应用”的授权标识,可在网站应用列表页面找到, 如下图所示:

init方法除appKey之外还有一个可选参数clientId, clientId是一个唯一的ID,用来代表一个独立访客,可根据需要定义,例如使用内部会员ID或者随机生成等方法。

如果没有指定clientId, SDK将自动生成一个随机的 clientId,并存储在cookie中,之后该浏览器中的调用都将使用该 clientId。

根据“实验变量”展示对应实验版本

在编程模式中“实验变量”的值控制展示的内容或程序的逻辑。一般情况下,不同实验版本应有不同的变量值。实验变量值应由相关人员在后台提前录入,如下图“版本管理”部分:

上图显示了当前实验有两个版本:原始版本和版本一。有一个变量loginTxt,在原始版本中,变量loginTxt的值为"立即登录",在版本一中,变量loginTxt的值为"点击登录"。

根据变量值来显示相应的内容分两步:

  1. 获得变量值, 是通过调用getVars方法来完成的;

  2. 提供callback函数,在回调函数中根据变量值,显示不同的页面内容:

var appKey = 'TESTIN_xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
testinAB.init(appKey);
testinAB.setDefVars({
    loginTxt: '立即登录' //设置变量loginTxt的默认值为'立即登录'
});
testinAB.getVars(function(vars) {
    //假设页面中有个按钮的id是btn,且用到了jquery,通过A/B测试来设置按钮的文字
    $('#btn').html(vars.get('loginTxt'));//通过变量loginTxt的值来设置按钮的文字
});

其中,loginTxt 即是“变量“,应与上图中红框处的变量名保持一致,上面的示例代码在获取变量后,给按钮设置了文字。

注意:getVars方法内部会向后台服务器发请求,所以一定要在回调函数中去拿变量值。另外,要给变量设置个默认值,这样在网络异常或获取变量失败时将使用默认值,默认值生效时用户会看到默认的原始版本。

上报指标

指标用于衡量不同版本实验结果的好坏,Testin A/B测试后台中的实验图表基于上报的指标数据生成。指标应由相关人员在后台提前录入,如下图所示:

假设要统计按钮的点击次数。将上图中的指标settingClick传入函数track实现上报指标, 每次累加1:

var appKey = 'TESTIN_xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
testinAB.init(appKey);
testinAB.setDefVars({
    loginTxt: '立即登录' //设置变量loginTxt的默认值为'立即登录'
});
testinAB.getVars(function(vars) {
    //假设页面中有个按钮的id是btn,且用到了jquery,通过A/B测试来设置按钮的文字
    $('#btn').html(vars.get('loginTxt'));//通过变量loginTxt的值来设置按钮的文字
});
$('#btn').click(function() {
    testinAB.track('settingClick', 1); //上报指标settingClick, 每次累加1
});

注意:如果点击按钮的同时,页面会进行跳转,那么应该提供回调函数,在回调函数中进行跳转,否则,后台将收不到上报的指标。

var appKey = 'TESTIN_xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
testinAB.init(appKey);
testinAB.setDefVars({
    loginTxt: '立即登录' //设置变量loginTxt的默认值为'立即登录'
});
testinAB.getVars(function(vars) {
    //假设页面中有个按钮的id是btn,且用到了jquery,通过A/B测试来设置按钮的文字
    $('#btn').html(vars.get('loginTxt'));//通过变量loginTxt的值来设置按钮的文字
});
$('#btn').click(function() {
    //上报指标settingClick, 每次累加1
    testinAB.track('settingClick', 1, function() {
        location.href = 'http://www.abc.com'; //在回调函数中进行跳转,否则,后台将收不到上报的指标
    });
});

集成调试

在开始运行实验前,Testin A/B 测试平台支持用户通过后台的”集成调试“,强制进入指定的实验版本,用来检测代码集成和实时验证数据是否正确(详见集成调试)。如果确认已正确集成SDK,就可以安排应用上线,并通过“运行控制”功能来开始实验,实验开始后就可以实时查看实验结果。注意:测试数据并不会计入实验结果。

在网址输入框中输入需要预览的页面地址,点击保存,然后点击进入调试,就跳转到需要进行调试的实验版本。为了更好的说明,如下图所示,如果实验有两个版本:原始版本、版本一。点击“进入调试“按钮后,会打开新窗口展示原始版本页面。接下来,可以在新窗口打开的页面中进行操作。如果测试数据实时发生对应变化,就说明Web/H5 SDK已成功集成。

注:请确保appKey,实验变量字符串,指标字符串与后台截图处一一对应,否则可能出现异常或无实验数据情况。

开始实验

恭喜您完成了Testin A/B测试Web/H5 SDK的集成工作,请通知产品或相关AB测试人员,点下“开始实验”按钮吧!

基于受众分组的定向实验

默认情况下,A/B测试会基于全部用户进行A/B测试实验。如果需要从所有用户中选出特定的用户参与A/B测试,比如只想要男性用户,或30岁以下的用户参与实验等,需要调用相关SDK的API。Testin A/B Web/H5 SDK 会自动把浏览器类型、语言等用户标签自动上传,您也可以根据需要给当前用户打上自定义标签,进而将不符合受众分组条件的用户排除在此次实验之外。

注:受众分组条件应在后台提前录入完毕,如下图"运行控制"中的“定向用户”部分所示:

点击“添加”即可新建用户分组:

在“新建受众”中,点击“自定义条件”以添加新的受众分组,例如下图“userClass”是key,它的value等于“gold”的用户就属于这个分组,会参加到A/B测试中,所有不符合该受众分组条件的用户都不会参与该实验。

注:请一定要在getVars方法之前调用setTags方法,否则定向实验不会生效。

var appKey = 'TESTIN_xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
testinAB.init(appKey);
testinAB.setDefVars({
    loginTxt: '立即登录' //设置变量loginTxt的默认值为'立即登录'
});

//自定义受众条件
testinAB.setTags({
    userClass: 'gold'
});

testinAB.getVars(function(vars) {

});

Web/H5 可视化SDK集成

仅需在第一次集成SDK时添加相关代码,之后进行的每一个可视化模式的A/B测试实验,产品和运营只需要通过可视化的操作方式就可以完成新版本编辑、指标埋点、新版本上线、对比新老版本数据、产品决策等整个A/B测试流程。

<html>
  <head>
  </head>
  <body>
    <!-- 假设开发者将下载后的SDK放到libs目录下 -->
    <script src="libs/testin-ab.js"></script>
    <script>
        testinAB.init('your AppKey');
        testinAB.getVars();
    </script>
  </body>
</html>

API参考

Web/H5 SDK API文档

FAQs

Package last updated on 25 Sep 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc