Web SDK_全域采集与增长分析(Quick Tracking)-阿里云帮助中心

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

1.引用和初始化SDK

1.1sdk基本信息

SDK 名称

版本号

md5值

QuickTracking Web A/B Testing SDK

最新版本：1.0.0

更新日志：

支持web abtest sdk编程试验功能

qt_ab_h5.umd.js：

b3f8836fbc054cefe4842108499ef4ba

qt_ab_h5.cjs.js：

668d546f4a7476abcec7eb2f88eb25d4

qt_ab_h5.iife.js：

c61412b2c075d91ed5a153603eb05dc2

qt_ab_h5.amd.js：

b3f8836fbc054cefe4842108499ef4ba

1.2集成代码明细

A/B Testing SDK 依赖Web SDKv2.4.0及以上版本，在使用前请确保已经成功集成QuickTracking 统计SDK，并进行了SDK初始化，详情可参考引入&初始化SDK。

2.编程实验

2.1集成与初始化SDK

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

同步引入方式

<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.3API 介绍

fetchABTestFromCache

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返回的结果在业务中都做了正常的业务逻辑判断

使用示例

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

fetchABTestFromServer

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返回的结果在业务中都做了正常的业务逻辑判断

使用示例

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

fetchABTestFromCacheThenServer

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返回的结果在业务中都做了正常的业务逻辑判断

使用示例

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