整合與使用Web SDK進行編程實驗-全域採集與增長分析-阿里雲

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

1.引用和初始化SDK

1.1sdk基本資料

SDK 名稱

版本號碼

md5值

QuickTracking Web A/B Testing SDK

最新版本：1.0.2

更新日誌：

1.0.2:AB實驗資料屬性key值統一

1.0.1:增加擷取有擷取AB屬性的方法

1.0.0:支援web abtest sdk編程實驗功能

qt_ab_h5.umd.js：

256e91fa9cdb48612576651a46f47b57

qt_ab_h5.cjs.js：

5992469d29486bf8e95c1991d75f9133

qt_ab_h5.iife.js：

c9a28f667edf29338c41fd8229acc19b

qt_ab_h5.amd.js：

c52caa2a5aade63cfa6faf66bd7a3610

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.3擷取AB屬性

API 名稱	情境說明
onABTestResultChange	AB SDK本機快取實驗結果資料變化時候觸發的回呼函數

使用樣本

//方式1 
aplus.use('qt_abtest', {
      url: "https://bare1-qlc.aplus.emas-poc.com/abtest_results?appkey=p0x252tg8klhfxqaq478ofni",
      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 介紹

fetchABTestFromCache

const result = aplus.qt_abtest.fetchABTestFromCache({
  param_name: "實驗參數名",
  value_type: "實驗實值型別",
  default_value: "實驗參數預設結果值",
})

請求參數

參數	類型	預設值	含義	備忘
param_name	string	undefined	實驗參數名	必傳參數，需設定非Null 字元串。
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	實驗參數名	必傳參數，需設定非Null 字元串。
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	實驗參數名	必傳參數，需設定非Null 字元串。
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
  },
})