集成与使用Web SDK进行编程实验-全域采集与增长分析-阿里云-全域采集与增长分析(Quick Tracking)-阿里云帮助中心

使用QuickTracking Web/H5 SDK必备操作。

1.引用和初始化SDK

Quick Tracking A/BTest SDK本身不直接采集个人信息，其功能完全依赖 Quick Tracking 统计分析SDK提供的行为数据。在使用前请确保已经成功集成Quick Tracking 统计分析 Web SDKv2.4.0及以上版本，并进行了SDK初始化，详情可参考引入&初始化SDK。

1.1sdk基本信息

SDK 名称

版本号

md5值

QuickTracking Web A/B Testing SDK

最新版本：1.0.6

qt_ab_h5.umd.js：

0018c143e3488905a87bcaa2f85f5815

qt_ab_h5.cjs.js：

3690b5aa9897457ffeeeeef5b473ba76

qt_ab_h5.esm.js：

711266047b8879cc708972820e8bd55d

qt_ab_h5.iife.js：

c9a28f667edf29338c41fd8229acc19b

qt_ab_h5.amd.js：

c52caa2a5aade63cfa6faf66bd7a3610

1.2SDK获取方式

线上集成

npm 线上地址：quicktracking-js-abtest

下载ABSDK到项目中：

npm i @lydaas/quicktracking-js-abtest

本地集成

在QuickTracking平台中「管理控制台-采集信息」模块下获取,导入到项目中。

2.编程实验

2.1集成与初始化SDK

首先您需要使用同步方式初始化Quick Tracking 统计分析SDK。初始化Quick Tracking 统计分析SDK完成之后，再初始化Quick Tracking A/B Testing SDK。在QuickTracking A/B Testing SDK初始化时需要传入请求分流试验的地址，请联系运营人员获取。

同步引入方式

qt

<html>
  <head>
    <script src="在QuickTracking后台的'管理控制台-采集信息'模块中复制SDK链接" charset="UTF-8" id="beacon-aplus">
    </script>
    <script>
      qt.initParams({
        appKey: "在QuickTracking后台的'管理控制台-应用列表'模块中创建的应用唯一标识",
        trackDomain: "在QuickTracking后台的'管理控制台-采集信息'模块中复制收数服务地址",
        //开启统计SDK详细日志
        DEBUG: true,
        //设置全局属性
        globalproperty: {
          n: 1,
          s: "s",
          arr: ["1", "2", "3"]
        },
      });
    </script>
    <script src="在QuickTracking后台的'管理控制台-采集信息'模块中复制SDK链接" charset="UTF-8" id="beacon-aplus-ab">
    </script>
    <script>
      qt.use('qt_abtest', {
        // abtest分流实验请求地址 
        // 格式：统计SDK设置的收数服务/abtest_results?appkey=应用唯一标识
        url: `${trackDomain}/abtest_results?appkey=${appKey}`,
        // 是否加密缓存数据
        need_encrypt_data: true,
        // 是否开启ABSDK详细日志
        enableLog: true,
        //sdk 主动轮询最新实验结果间隔时间，默认10分钟
        update_interval_milliseconds: 60*10*1000 
      });
    </script>
  </head>
</html>

aplus（待废弃）

<html>
  <head>
    <script src="在QuickTracking后台的'管理控制台-采集信息'模块中复制SDK链接" charset="UTF-8" id="beacon-aplus">
    </script>
    <script>
      aplus.initParams({
        appKey: "在QuickTracking后台的'管理控制台-应用列表'模块中创建的应用唯一标识",
        trackDomain: "在QuickTracking后台的'管理控制台-采集信息'模块中复制收数服务地址",
        //开启统计SDK详细日志
        DEBUG: true,
        //设置全局属性
        globalproperty: {
          n: 1,
          s: "s",
          arr: ["1", "2", "3"]
        },
      });
    </script>
    <script src="在QuickTracking后台的'管理控制台-采集信息'模块中复制SDK链接" charset="UTF-8" id="beacon-aplus-ab">
    </script>
    <script>
      aplus.use('qt_abtest', {
        // abtest分流实验请求地址 
        // 格式：统计SDK设置的收数服务/abtest_results?appkey=应用唯一标识
        url: `${trackDomain}/abtest_results?appkey=${appKey}`,
        // 是否加密缓存数据
        need_encrypt_data: true,
        // 是否开启ABSDK详细日志
        enableLog: true,
        //sdk 主动轮询最新实验结果间隔时间，默认10分钟
        update_interval_milliseconds: 60*10*1000 
      });
    </script>
  </head>
</html>

2.2获取实验变量

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

fetchABTestFromCache ：读取本地缓存，缓存不存在时使用默认值
fetchABTestFromServer ：忽略本地缓存，从服务端获取数据
fetchABTestFromCacheThenServer ：优先读取本地缓存，缓存不存在时从服务端获取数据

使用场景说明

API名称	场景说明
fetchABTestFromCache	如果对查询性能有要求，可以使用fetchABTestFromCache API 只从本地缓存获取变量值，缺点是无法及时命中最新的实验结果
fetchABTestFromServer	如果您进行时间片轮转实验，且对实验的时效性有要求，可以使用fetchABTestFromServer API 获取实验变量值，缺点是可能会存在一定的网络延迟
fetchABTestFromCacheThenServer	默认情况下，建议使用此API，兼顾查询性能和时效性考虑，该API会优先从本地缓存获取变量值，如果本地缓存不命中结果，则查询AB实验服务端最新数据

2.3获取AB属性

API 名称	场景说明
onABTestResultChange	AB SDK本地缓存实验结果数据变化时候触发的回调函数

使用示例

qt

//方式1 
qt.use('qt_abtest', {
      url: `${trackDomain}/abtest_results?appkey=${appkey}`,
      need_encrypt_data: true,
      enableLog: true,
      onABTestResultChange:(res)=>{
        console.log('res1',res);
        /** 返回结果数据示例
        [
          {"gid": xxx, "expid": xxx,}, 
          {"gid": xxx, "expid": xxx,},
          ...
        ]
    **/
      },
      update_interval_milliseconds: 2000,
    })
//方式2
qt.qt_abtest.onABTestResultChange = (res)=>{
      console.log('res2',res);
      /** 结果数据示例
        [
          {"gid": xxx, "expid": xxx,}, 
          {"gid": xxx, "expid": xxx,},
          ...
        ]
    **/
 }

aplus（待废弃）

//方式1 
aplus.use('qt_abtest', {
      url: `${trackDomain}/abtest_results?appkey=${appkey}`,
      need_encrypt_data: true,
      enableLog: true,
      onABTestResultChange:(res)=>{
        console.log('res1',res);
        /** 返回结果数据示例
        [
          {"gid": xxx, "expid": xxx,}, 
          {"gid": xxx, "expid": xxx,},
          ...
        ]
    **/
      },
      update_interval_milliseconds: 2000,
    })
//方式2
aplus.qt_abtest.onABTestResultChange = (res)=>{
      console.log('res2',res);
      /** 结果数据示例
        [
          {"gid": xxx, "expid": xxx,}, 
          {"gid": xxx, "expid": xxx,},
          ...
        ]
    **/
 }

2.4API 介绍

返回参数与说明

接口请求后会返回实验数据和实验信息详情参考：

result = 
{
    "expid" = "114"; // 实验id
    "gid" = "201"; // 实验组id
    "value" = ""; // 返回值
}

参数说明

参数	类型	默认值	含义	备注
value	String \| Boolean \| Integer \| JSONObject	undefined	实验参数结果值	设置的实验结果值必须要和实验值类型一致，否则sdk会认为是异常实验结果。同时请注意result返回的结果在业务中都做了正常的业务逻辑判断
expid	String	""	实验iD
gid	String	""	实验组iD

fetchABTestFromCache

qt

const result = qt.qt_abtest.fetchABTestFromCache({
  param_name: "实验参数名",
  value_type: "实验值类型",
  default_value: "实验参数默认结果值",
})

aplus（待废弃）

const result = aplus.qt_abtest.fetchABTestFromCache({
  param_name: "实验参数名",
  value_type: "实验值类型",
  default_value: "实验参数默认结果值",
})

请求参数

参数	类型	默认值	含义	备注
param_name	string	undefined	实验参数名	必传参数，需设置非空字符串。
value_type	字符串类型	取值只能是 "NUMBER" \| "STRING" \| "BOOLEAN" \| "JSON" 四种类型之一	实验值类型	必传参数，需设置上述四种类型之一
default_value	string \| number \| boolean \| object \| null \| undefined	undefined	实验参数默认结果值	必传参数，需和当前实验值结果类型保持一致。如参数对应的实验值类型为NUMBER类型，则传入的default_value也必须是number类型，同时返回的result实验结果也是number类型

重要

注意：请确保对A/B分流接口中使用的默认值，都做了正常的业务逻辑处理！

返回结果

参数	类型	默认值	含义	备注
result	string \| number \| boolean \| object \| undefined	undefined	实验参数结果值	设置的实验结果值必须要和实验值类型一致，否则sdk会认为是异常实验结果。同时请注意result返回的结果在业务中都做了正常的业务逻辑判断

使用示例

qt

const result = qt.qt_abtest.fetchABTestFromCache({
  param_name: "color1",
  value_type: "STRING",
  default_value: "a_string_default_value",
})
//如果命中本地缓存中的实验结果
console.log(result); //{expid: 122,gid: 218,value: '命中的值'}
//未命中本地缓存中的实验结果
console.log(result); //{expid: '',gid: '',value: 'a_string_default_value'}

aplus（待废弃）

const result = aplus.qt_abtest.fetchABTestFromCache({
  param_name: "color1",
  value_type: "STRING",
  default_value: "a_string_default_value",
})
//如果命中本地缓存中的实验结果
console.log(result); //{expid: 122,gid: 218,value: '命中的值'}
//未命中本地缓存中的实验结果
console.log(result); //{expid: '',gid: '',value: 'a_string_default_value'}

fetchABTestFromServer

qt

qt.qt_abtest.fetchABTestFromServer({
  param_name: "实验参数名",
  value_type: "实验值类型",
  default_value: "实验参数默认结果值",
  timeout_milliseconds: "分流实验服务端请求超时时间，默认为3000，即3秒"
  callback: (result) => {
    // 实验结果返回值业务逻辑处理
    // TODO 请根据 result 进行自己的实验
  },
});

aplus（待废弃）

aplus.qt_abtest.fetchABTestFromServer({
  param_name: "实验参数名",
  value_type: "实验值类型",
  default_value: "实验参数默认结果值",
  timeout_milliseconds: "分流实验服务端请求超时时间，默认为3000，即3秒"
  callback: (result) => {
    // 实验结果返回值业务逻辑处理
    // TODO 请根据 result 进行自己的实验
  },
});

请求参数

参数	类型	默认值	含义	备注
param_name	string	undefined	实验参数名	必传参数，需设置非空字符串。
value_type	字符串类型	取值只能是 "NUMBER" \| "STRING" \| "BOOLEAN" \| "JSON" 四种类型之一	实验值类型	必传参数，需设置上述四种类型之一
default_value	string \| number \| boolean \| object \| null \| undefined	undefined	实验参数默认结果值	必传参数，需和当前实验值结果类型保持一致。如参数对应的实验值类型为NUMBER类型，则传入的default_value也必须是number类型，同时返回的result实验结果也是number类型
timeout_milliseconds	number \| undefined	3000	分流实验服务端请求超时时间	非必传参数
callback	Function	无	分流实验结果值回调函数	必传参数

重要

注意：请确保对A/B分流接口中使用的默认值，都做了正常的业务逻辑处理！

返回结果

参数	类型	默认值	含义	备注
result	string \| number \| boolean \| object \| undefined	undefined	实验参数结果值	设置的实验结果值必须要和实验值类型一致，否则sdk会认为是异常实验结果。同时请注意result返回的结果在业务中都做了正常的业务逻辑判断

使用示例

qt

qt.qt_abtest.fetchABTestFromServer({
  param_name: "color1",
  value_type: "STRING",
  default_value: "a_string_default_value",
  callback: (result) => {
    //如果命中服务端的实验结果
    console.log(result); //{expid: 122,gid: 218,value: '命中的值'}
    //未命中实验结果
    console.log(result); //{expid: '',gid: '',value: 'a_string_default_value'}
  },
})

aplus（待废弃）

aplus.qt_abtest.fetchABTestFromServer({
  param_name: "color1",
  value_type: "STRING",
  default_value: "a_string_default_value",
  callback: (result) => {
    //如果命中服务端的实验结果
    console.log(result); //{expid: 122,gid: 218,value: '命中的值'}
    //未命中实验结果
    console.log(result); //{expid: '',gid: '',value: 'a_string_default_value'}
  },
})

fetchABTestFromCacheThenServer

qt

qt.qt_abtest.fetchABTestFromCacheThenServer({
  param_name: "实验参数名",
  value_type: "实验值类型",
  default_value: "实验参数默认结果值",
  timeout_milliseconds: "分流实验服务端请求超时时间，默认为3000，即3秒"
  callback: (result) => {
    // 实验结果返回值业务逻辑处理
    // TODO 请根据 result 进行自己的实验
  },
});

aplus（待废弃）

aplus.qt_abtest.fetchABTestFromCacheThenServer({
  param_name: "实验参数名",
  value_type: "实验值类型",
  default_value: "实验参数默认结果值",
  timeout_milliseconds: "分流实验服务端请求超时时间，默认为3000，即3秒"
  callback: (result) => {
    // 实验结果返回值业务逻辑处理
    // TODO 请根据 result 进行自己的实验
  },
});

请求参数

参数	类型	默认值	含义	备注
param_name	string	undefined	实验参数名	必传参数，需设置非空字符串。
value_type	字符串类型	取值只能是 "NUMBER" \| "STRING" \| "BOOLEAN" \| "JSON" 四种类型之一	实验值类型	必传参数，需设置上述四种类型之一
default_value	string \| number \| boolean \| object \| null \| undefined	undefined	实验参数默认结果值	必传参数，需和当前实验值结果类型保持一致。如参数对应的实验值类型为NUMBER类型，则传入的default_value也必须是number类型，同时返回的result实验结果也是number类型
timeout_milliseconds	number \| undefined	3000	分流实验服务端请求超时时间	非必传参数
callback	Function	无	分流实验结果值回调函数	必传参数

重要

注意：请确保对A/B分流接口中使用的默认值，都做了正常的业务逻辑处理！

返回结果

参数	类型	默认值	含义	备注
result	string \| number \| boolean \| object \| undefined	undefined	实验参数结果值	设置的实验结果值必须要和实验值类型一致，否则sdk会认为是异常实验结果。同时请注意result返回的结果在业务中都做了正常的业务逻辑判断

使用示例

qt

qt.qt_abtest.fetchABTestFromCacheThenServer({
  param_name: "实验参数名",
  value_type: "实验值类型",
  default_value: "实验参数默认结果值",
  timeout_milliseconds: "分流实验服务端请求超时时间，默认为3000，即3秒"
  callback: (result) => {
    //如果命中本地缓存或者服务端的实验结果
    console.log(result); //{expid: 122,gid: 218,value: '命中的值'}
    //未命中实验结果
     console.log(result); //{expid: '',gid: '',value: 'a_string_default_value'}
  },
})

aplus（待废弃）

aplus.qt_abtest.fetchABTestFromCacheThenServer({
  param_name: "实验参数名",
  value_type: "实验值类型",
  default_value: "实验参数默认结果值",
  timeout_milliseconds: "分流实验服务端请求超时时间，默认为3000，即3秒"
  callback: (result) => {
    //如果命中本地缓存或者服务端的实验结果
    console.log(result); //{expid: 122,gid: 218,value: '命中的值'}
    //未命中实验结果
     console.log(result); //{expid: '',gid: '',value: 'a_string_default_value'}
  },
})