Web SDK 集成(A/B Testing)
|
收藏
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>
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 事件。
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 进行自己的试验
}
});
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 进行自己的试验
}
});
自定义属性值支持字符串、字符串数组、数值、布尔和日期时间格式,并且属性名支持英文、数字、下划线,且不能以数字开头。
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>
后续可以使用
- 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>
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>
也可以配置为 Object,增加其他配置项
sensors.use('SensorsABTest',{
url:'分流试验请求地址',
multilink: { //配置为 object 开启多链接试验,且配置多链接试验参数
timeout: 500, //ms,多链接试验触发的超时时间
pass_params: true //boolean,跳转页面是否携带原始页面 url 上的参数
}
});
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
});
2.3. 试验配置项
参数 | 默认值 | 含义 |
---|---|---|
timeout | 500(毫秒) | 多链接试验触发的超时时间 |
pass_params | true | 跳转页面是否携带原始页面 url 上的参数 |
use_mask | true | 是否使用遮罩层 |
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 |
onRedirect | null | 自定义跳转拦截方法。类型: 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>
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
}
})
该功能 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. 文本编辑
支持修改的内容:
- 文本内容:支持文本内容的替换
- 字号大小:支持修改文本字号大小
- 文本颜色:支持修改文本颜色和文本背景颜色
- 文本样式:支持修改文本对齐方式、粗斜体以及下划线
- 文本链接:若编辑的文本为超链接,可替换要跳转的链接地址
3.5.2. 图片编辑
支持修改的内容:
- 图片地址:支持图片的替换
- 图片尺寸:支持修改图片宽高
- 图片描边:支持修改图片边框样式
3.6. 调试试验
3.6.1. 试验基本信息
3.6.2. 设置分组
3.6.3. 编辑试验
注:本文档内容为神策产品使用和技术细节说明文档,不包含适销类条款;具体企业采购产品和技术服务内容,以商业采购合同为准。