A/B Testing SDK 依赖于神策分析 SDK v1.15.24 及以上版本,在使用前请确保已经成功集成神策分析 SDK,并进行了 SDK 初始化,详情可参考 SDK 集成 (Web)

1. 编程试验

1.1. 集成和初始化 SDK

首先您需要使用同步方式初始化神策分析 SDK。初始化神策分析 SDK 完成之后,再初始化 A/B Testing SDK。在 A/B Testing SDK 初始化时需要传入请求分流试验的地址,请联系运营人员获取(创建试验后,下载 SDK 说明文档)。

同步引入方式:

// 神策埋点 SDK 初始化
<script charset='UTF-8' src="在 github 下载新版本的 sensorsdata.min.js"></script>
<script>
    var sensors = window['sensorsDataAnalytic201505'];
    sensors.init({
        server_url: "数据接收地址" 
    });
    sensors.quick('autoTrack');
</script>
<script src="在 GitHub 下载新版本的 abtest.min.js"></script>
<script>
    var abtest = sensors.use('SensorsABTest',{
         url:"分流试验请求地址",
   		 multilink: false
    });
</script>
JS


import 引入方式:

import abtest from '在 github 下载新版本的 abtest.esm.min.js';
import sensors from '在 github 下载新版本的 sensorsdata.es6.min.js';

sensors.use('SensorsABTest',{
       url:'分流试验请求地址',
   	   multilink: false
 });


sensors.init({
  server_url: '数据接收地址'
});
sensors.quick('autoTrack'); //用于采集 $pageview 事件。 
JS

H5 页面嵌入 App 并开启了 App 打通 H5,需要在客户端集成 iOS A/B Testing SDK  Android A/B Testing SDK 并初始化

1.2. 获取试验变量

初始化 SDK 之后,通过 API 获取具体试验的变量值,根据获取试验变量值的方式,可分为下面三种策略:

  • fetchCacheABTest :读取本地缓存,缓存不存在时使用默认值
  • asyncFetchABTest 忽略本地缓存,从服务端获取数据
  • fastFetchABTest 优先读取本地缓存,缓存不存在时从服务端获取数据

如何确定应该选择哪个API获取试验变量值?

1.一般情况下,我们推荐使用fastFetchABTest获取试验变量值。

2.如果您对性能有要求,可以使用fetchCacheABTest, 只从本地缓存中获取变量值,但可能导致用户无法及时命中最新的试验。

3.如果您进行时间片轮转试验,且对时效性有要求,可以使用asyncFetchABTest 获取试验变量值,但会存在一定的网络延迟。

1. 请确保对A/B分流返回的 result 结果 & 接口中使用的默认值,都做了正常的业务逻辑处理!

2. 请确保默认值 default_value 和当前试验值类型相同。比如参数对应试验值为 Int 类型,则传入的 default_value 也必须是 Int 类型,同时返回的试验结果 result 也是 Int 类型

以 fastFetchABTest 为例,可在相应的业务逻辑中添加如下代码:

// abtest 为初始化 A/B Testing SDK 时指定的全局变量
// Number 类型试验(第二个参数 0,表示未命中试验时,会返回此默认值,请根据业务需要更改此处的值)
abtest.fastFetchABTest({
    param_name:"具体的试验参数",
    default_value:0,
    value_type:"Number",
	timeout_milliseconds: 3000, // 获取试验结果的超时时间,超时后返回 default_value,默认 3000ms
    callback: function(result){
     // TODO 请根据 result 进行自己的试验
    }
});
JS

1.3. 携带自定义属性获取试验变量

v0.1.2 及以上版本 支持自定义属性扩充受众筛选能力,可以通过 API 添加自定义属性获取具体试验的变量值,根据获取试验变量值的方式,可分为下面 2 种策略:

  • asyncFetchABTest 忽略本地缓存,从服务端获取数据
  • fastFetchABTest 优先读取本地缓存,缓存不存在时从服务端获取数据

请确保对A/B分流返回的 result 结果 & 接口中使用的默认值,都做了正常的业务逻辑处理!

 fastFetchABTest 为例,可在相应的业务逻辑中添加如下代码:

// abtest 为初始化 A/B Testing 插件时指定的全局变量
// Number 类型试验(第二个参数 0,表示未命中试验时,会返回此默认值,请根据业务需要更改此处的值)
abtest.fastFetchABTest({
    param_name:"具体的试验参数",
    default_value:0,
    value_type:"Number",
	timeout_milliseconds: 3000, // 获取试验结果的超时时间,超时后返回 default_value,默认 3000ms
	custom_properties: { // 自定义属性 
      '自定义属性对应英文名': "自定义属性对应 value"
    },
    callback: function(result){
     // TODO 请根据 result 进行自己的试验
    }
});
JS

自定义属性值支持字符串、字符串数组、数值、布尔和日期时间格式,并且属性名支持英文、数字、下划线,且不能以数字开头

1.4. 获取设备主体试验变量

SDK支持使用设备主体进行分流。需要您在初始化SDK时,将匿名ID设置为公共属性。初始化并设置公共属性的具体方式如下:

// 神策埋点 SDK 初始化
<script charset='UTF-8' src="在 github 下载新版本的 sensorsdata.min.js"></script>
<script>
    var sensors = window['sensorsDataAnalytic201505'];
    sensors.init({
        server_url: "数据接收地址" 
    });
    sensors.quick('autoTrack');
</script>
<script src="在 GitHub 下载新版本的 abtest.min.js"></script>
<script>
    //设备主体分流需要将匿名ID设置为公共属性
    sensors.registerPage({
        "anonymous_id":(sensors.store.getUnionId()).anonymous_id
    })
    var abtest = sensors.use('SensorsABTest',{
         url:"分流试验请求地址",
   		 multilink: false
    });
</script>
JS

后续可以使用

  • fetchCacheABTest :读取本地缓存,缓存不存在时使用默认值
  • asyncFetchABTest 忽略本地缓存,从服务端获取数据
  • fastFetchABTest 优先读取本地缓存,缓存不存在时从服务端获取数据

三种方式同获取试验变量

1.5. 使用示例

// 神策埋点 SDK 初始化
<script charset='UTF-8' src="在 github 下载新版本的 sensorsdata.min.js"></script>
<script>
    var sensors = window['sensorsDataAnalytic201505'];
    sensors.init({
        server_url: "数据接收地址" 
    });
    sensors.quick('autoTrack');
</script>
   
// A/B Testing SDK 初始化
<script src="在 github 下载新版本的 abtest.min.js"></script>
<script>
    var abtest = sensors.use('SensorsABTest',{
          url:'具体的 URL',
   		  multilink: false 
    });
</script>
 
// 获取试验结果
<script>
    abtest.fastFetchABTest({
       param_name:"具体的试验参数",
       default_value:0,
       value_type:"Number",
       callback: function(result){
                // 获取用户命中的试验结果,针对用户可能命中的试验进行处理
                switch(result){
                     case 0:
                         break;
                     case 1:
                         // 试验组 1 的处理逻辑
                         break;
                     case 2:
                         // 试验组 2 的处理逻辑
                         break;
                     // ……
                     // ……
                     default:
                         // 其他情况的处理逻辑
                         break;
                }
       }
});
</script>
JS


1.6. 调试试验

可以通过录入调试设备的方式,把 Web 页面对应的用户加入到指定分组中;加入调试设备后,会强制命中当前试验指定的分组(调试设备在调试状态和正式上线阶段都会生效)。

2. 多链接试验

2.1. 应用场景

  • 市场同学对不同广告落地页进行测试,以期比对各落地页的转化率,选出优胜页面。
  • 运营同学对不同内容页进行测试,尤其是H5活动页,以期比对各活动页带来的 Revenue 情况,从而选出优胜活动页。

2.2. 集成和初始化 SDK

首先您需要使用同步方式初始化神策分析 SDK。初始化神策分析 SDK 完成之后,再初始化 A/B Testing SDK。在 A/B Testing SDK 初始化时需要传入请求分流试验的地址,请联系运营人员获取(创建试验后,下载 SDK 说明文档)。

同步引入方式:

// 神策埋点 SDK 初始化
<script charset='UTF-8' src="在 github 下载新版本的 sensorsdata.min.js"></script>
<script>
    var sensors = window['sensorsDataAnalytic201505'];
    sensors.init({
        server_url: "数据接收地址" 
    });
    sensors.quick('autoTrack');
</script>
<script src="在 GitHub 下载新版本的 abtest.min.js"></script>
// SDK 增加开关,代表是否使用多链接试验 。开关默认开启,开关开启后,该页面使用多链接试验功能
<script>
    var abtest = sensors.use('SensorsABTest',{
         url:"分流试验请求地址",
         // 多链接试验默认开启,若需要关闭,该字段设置为 false 即可
         multilink:true
    });
</script>
JS


也可以配置为 Object,增加其他配置项

sensors.use('SensorsABTest',{
       url:'分流试验请求地址',
       multilink: {         //配置为 object 开启多链接试验,且配置多链接试验参数
          timeout:  500,    //ms,多链接试验触发的超时时间
          pass_params: true   //boolean,跳转页面是否携带原始页面 url 上的参数
       }
});
JS


import 引入方式:

import abtest from '在 github 下载新版本的 abtest.esm.min.js';
import sensors from '在 github 下载新版本的 sensorsdata.es6.min.js';
sensors.init({
  server_url: '数据接收地址'
});
sensors.quick('autoTrack'); //用于采集 $pageview 事件。
sensors.use('SensorsABTest',{
       url:'分流试验请求地址',
       multilink:true
});
JS


2.3. 试验配置项

参数默认值含义
timeout500(毫秒)多链接试验触发的超时时间
pass_paramstrue跳转页面是否携带原始页面 url 上的参数
use_masktrue是否使用遮罩层
control_link_search

default

页面(对照组) url 参数解析方式。'after_hash'  指定在 # 后解析拼接 search 参数,如 'http://example.com/#/index.html?index=77&b=001' ,将合并参数到 ? 后 ,对于 hash 将不做处理  。默认 'default' ,按照 url 标准解析 search 、hash
experiment_link_search

default

试验组 url 参数解析方式。'after_hash'  指定在 # 后解析拼接 search 参数,如 'http://example.com/#/index.html?index=77&b=001' ,这种 url 设置此参数为 'after_hash' ,将合并参数到 ? 后 ,对于 hash 将不做处理 。默认 'default' ,按照 url 标准解析 search 、hash
onRedirectnull自定义跳转拦截方法。类型: Function。配置后,命中试验组时,不再自动跳转,需手动根据入参 `url` 跳转至目标页面

2.4. 使用示例

// 神策埋点 SDK 初始化
<script charset='UTF-8' src="在 github 下载新版本的 sensorsdata.min.js"></script>
<script>
    var sensors = window['sensorsDataAnalytic201505'];
    sensors.init({
        server_url: "数据接收地址" 
    });
    sensors.quick('autoTrack');
</script>
   
// A/B Testing SDK 初始化
<script src="在 github 下载新版本的 abtest.min.js"></script>
<script>
    var abtest = sensors.use('SensorsABTest',{
		url:'具体的 URL',
		multilink: {         //配置为 object 开启多链接试验,且配置多链接试验参数
			timeout:  500,     //ms,多链接试验触发的超时时间
          	pass_params: true, //boolean,跳转页面是否携带原始页面 url 上的参数
		 	use_mask: true,    //是否使用遮罩层
		 	control_link_search: 'default', // 页面(对照组) url 参数解析方式
    		experiment_link_search: 'default',  // 试验组 url 参数解析方式
			onRedirect: function(url){          // 自定义跳转拦截方法
			 	console.log("试验链接->", url);
			}
		}     
	});
</script>
JS

2.5. 调试试验

可以通过录入调试设备的方式,把 Web 页面对应的用户加入到指定分组中;加入调试设备后,会强制命中当前试验指定的分组(调试设备在调试状态和正式上线阶段都会生效)。

3. 可视化试验

3.1. 概述

可视化试验是指 通过可视化编辑的方式修改页面元素,无需代码编即可快速进行文本、图片的替换和样式调整,生成不同版本的试验方案。

具体包括文本的内容替换、字号、粗斜体、文本超链接地址以及超链接的打开方式(新窗口/当前窗口);图片的替换、宽高和边框样式等。

3.2. 应用场景

针对单个网页或者营销落地页,进行页面中某些文本、图片的替换和编辑,通过所见即所得的界面操作生成不同版本的试验策略。无需代码编程即可快速发布试验。

3.3. 集成和初始化 SDK

首先您需要使用同步方式初始化神策分析 SDK。初始化神策分析 SDK 完成之后,再初始化 A/B Testing SDK。在 A/B Testing SDK 初始化时需要传入请求分流试验的地址,请联系运营人员获取(创建试验后,下载 SDK 说明文档)。

// 神策埋点 SDK 初始化
<script charset='UTF-8' src="在 github 下载新版本的 sensorsdata.min.js"></script>
<script>
    var sensors = window['sensorsDataAnalytic201505'];
    sensors.init({
        server_url: "数据接收地址"  
    });
    sensors.quick('autoTrack');
</script>
<script src="在 GitHub 下载新版本的 abtest.min.js"></script>
// SDK 增加开关,代表是否使用可视化试验。开关默认关闭,开关开启后,该页面使用可视化试验功能;
 var abtest = sensors.use("SensorsABTest", {
            url: "分流试验请求地址",
            visualize: {
                // 是否开启可视化试验,默认关闭
                enable_visualize: true,
                timeout:  500,    //可视化试验触发的超时时间,默认 500 ms
                use_mask:true   //是否使用遮罩层,默认为 true
             }
  })
JS

该功能 A/B Testing SDK 0.0.7  版本开始支持

3.4. 试验配置项

参数默认值含义

enable_visualize

false

是否开启可视化试验

timeout

500(毫秒)

可视化试验触发的超时时间

use_mask

true

是否使用遮罩层

vabtest_url

神策官方 CDN 链接

vabtest.min.js 文件的地址。可视化实验编辑模式时,网页自动加载该 SDK。

3.5. 试验编辑内容

目前支持编辑的 HTML 元素有 img、a、h1、h2、h3、h4、h5、h6、span、div、li、ol、p、pre、ul、dd、i、dt、b、dl、cite、em、mark、small、strong、sub、sup、u、button、td、title、label;

可编辑的内容如下:

3.5.1. 文本编辑

支持修改的内容:

  1. 文本内容:支持文本内容的替换
  2. 字号大小:支持修改文本字号大小
  3. 文本颜色:支持修改文本颜色和文本背景颜色
  4. 文本样式:支持修改文本对齐方式、粗斜体以及下划线
  5. 文本链接:若编辑的文本为超链接,可替换要跳转的链接地址

3.5.2. 图片编辑

支持修改的内容:

  1. 图片地址:支持图片的替换
  2. 图片尺寸:支持修改图片宽高
  3. 图片描边:支持修改图片边框样式

3.6. 调试试验

3.6.1. 试验基本信息

3.6.2. 设置分组

3.6.3. 编辑试验