Web SDK - Quick Tracking - Alibaba Cloud Documentation Center

Required operations for using the QuickTracking Web/H5 SDK.

1. Reference and initialize the SDK

1.1 Basic information about the SDK

SDK name

The version number.

The md5 value.

QuickTracking Web A/B Testing SDK

Latest version: 1.0.0

Updates:

Support web abtest sdk programming test function

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 Integration Code Details

The A/B Testing SDK depends on Web SDK V2.4.0 or later. Before you use the Quick Tracking Statistics SDK, make sure that you have successfully integrated the Quick Tracking Statistics SDK and initialized the SDK. For more information, see Import & Initialize SDK.

2. Programming experiment

2.1 Integration and initialization

You must initialize the Quick Tracking SDK in synchronous mode. After you initialize the QuickTracking statistics SDK, initialize the QuickTracking A/B Testing SDK. When you initialize the Quick Tracking A/B Testing SDK, you must specify the URL of the request diversion test. Contact the operation personnel to obtain the URL.

Synchronous introduction method

<html>
  <head>
    <script src="Copy the SDK link" charset="UTF-8" id="beacon-aplus"> in the 'Management Console-Collect Information' module in the QuickTracking background
    </script>
    <script>
      aplus.initParams({
        appKey: "The unique identifier of the application created in the 'Management Console-Application List' module in the QuickTracking background",
        trackDomain: "Copy the receipt service address in the 'Management Console-Collect Information' module in the QuickTracking background",
        // Enable the statistics SDK for detailed logs.
        DEBUG: true,
        // Set global properties.
        globalproperty: {
          n: 1,
          s: "s",
          arr: ["1", "2", "3"]
        },
      });
    </script>
    <script src="Copy the SDK link" charset="UTF-8" id="beacon-aplus-ab"> in the 'Management Console-Collect Information' module in the QuickTracking background
    </script>
    <script>
      aplus.use('qt_abtest', {
        // abtest to distribute the experiment request URL. 
        // Format: The collection service set by the statistics SDK /abtest_results?appkey=The unique identifier of the application.
        url: `${trackDomain}/abtest_results?appkey=${appKey}`,
        // Specify whether to encrypt the cached data.
        need_encrypt_data: true,
        // Specifies whether to enable the detailed logging of the ABSDK.
        enableLog: true,
        // The SDK proactively polls the gap of the latest experiment results. The default value is 10 minutes.
        update_interval_milliseconds: 60*10*1000 
      });
    </script>
  </head>
</html>

2.2 Acquisition of experimental variables

Initialize the QuickTracking ABTest SDK, through the API to obtain a specific test variable value, according to the test variable value of the way, can be divided into the following three strategies:

fetchABTestFromCache: Read the local cache. If the cache does not exist, the default value is used.
fetchABTestFromServer: Ignore local cache and get data from server
fetchABTestFromCacheThenServer: First read the local cache, cache does not exist from the server to obtain data

Description

API name	Scenarios
fetchABTestFromCache	If you have requirements on query performance, you can use fetchABTestFromCache API to obtain variable values only from the local cache. The disadvantage is that the latest experimental results cannot be hit in time.
fetchABTestFromServer	If you want to perform a time slice rotation experiment and have requirements on the timeliness of the experiment, you can use fetchABTestFromServer API to obtain the experimental variable values. The disadvantage is that there may be a certain network latency.
fetchABTestFromCacheThenServer	By default, we recommend that you use this API to take into account the query performance and timeliness. This API preferentially obtains variable values from the local cache. If the local cache does not hit the result, the latest data of the AB experiment server is queried.

2.3 API Introduction

fetchABTestFromCache

const result = aplus.qt_abtest.fetchABTestFromCache({
  param_name: "experiment parameter name",
  value_type: "Experiment value type",
  default_value: "Default result value of experiment parameters",
})

Request parameters

Parameter	Parameter	Default value	Description	Remarks
param_name	string	undefined	Experiment Parameter Name	Required parameter. You must set a non-empty string.
value_type	String	The value can only be "NUMBER" \| "STRING" \| "BOOLEAN" \| One of the four types of "JSON"	Experimental value type	Required parameter. You must set one of the preceding four types
default_value	string \| number \| boolean \| object \| null \| undefined	undefined	Default result values for experiment parameters	Required parameters, which must be consistent with the current experimental value result type. If the experiment value corresponding to the parameter is of the NUMBER type, the input default_value must also be of the number type, and the returned result experiment result is also of the number type.

Important

Note: Make sure that the default values used in the /B offload interface are processed properly.

Response parameters

Parameter	Parameter	Default value	Description	Remarks
result	string \| number \| boolean \| object \| undefined	undefined	Experimental parameter result value	the specified experiment result value must be of the same type as the experiment value. otherwise, the sdk considers the experiment result as abnormal. At the same time, please note that the results returned by result have made normal business logic judgment in the business.

Examples

const result = aplus.qt_abtest.fetchABTestFromCache({
  param_name: "color1",
  value_type: "STRING",
  default_value: "a_string_default_value",
})
// If the experiment result in the local cache is hit
console.log(result); //pink
// Misses the experimental results in the local cache.
console.log(result); //a_string_default_value

fetchABTestFromServer

aplus.qt_abtest.fetchABTestFromServer({
  param_name: "experiment parameter name",
  value_type: "Experiment value type",
  default_value: "Default result value of experiment parameters",
  timeout_milliseconds: "The request timeout period of the streaming experiment server. The default value is 3000, which is 3 seconds."
  callback: (result) => {
    // The business logic processing of the returned value of the experimental result.
    // TODO Please perform your own experiment based on the result
  },
});

Request parameters

Parameter	Parameter	Default value	Description	Remarks
param_name	string	undefined	Experiment Parameter Name	Required parameter. You must set a non-empty string.
value_type	String	The value can only be "NUMBER" \| "STRING" \| "BOOLEAN" \| One of the four types of "JSON"	Experimental value type	Required parameter. You must set one of the preceding four types
default_value	string \| number \| boolean \| object \| null \| undefined	undefined	Default result values for experiment parameters	Required parameters, which must be consistent with the current experimental value result type. If the experiment value corresponding to the parameter is of the NUMBER type, the input default_value must also be of the number type, and the returned result experiment result is also of the number type.
timeout_milliseconds	number \| undefined	3000	The server request timeout period of the shunt experiment.	Optional parameters
callback	Function	N/A	Shunt experiment result value callback function	Required parameter

Important

Note: Make sure that the default values used in the /B offload interface are processed properly.

Response parameters

Parameter	Parameter	Default value	Description	Remarks
result	string \| number \| boolean \| object \| undefined	undefined	Experimental parameter result value	the specified experiment result value must be of the same type as the experiment value. otherwise, the sdk considers the experiment result as abnormal. At the same time, please note that the results returned by result have made normal business logic judgment in the business.

Examples

aplus.qt_abtest.fetchABTestFromServer({
  param_name: "color1",
  value_type: "STRING",
  default_value: "a_string_default_value",
  callback: (result) => {
    // If the experiment result of the server is hit
    console.log(result); //pink
    // The result of the missing experiment.
    console.log(result); //a_string_default_value
  },
})

fetchABTestFromCacheThenServer

aplus.qt_abtest.fetchABTestFromCacheThenServer({
  param_name: "experiment parameter name",
  value_type: "Experiment value type",
  default_value: "Default result value of experiment parameters",
  timeout_milliseconds: "The request timeout period of the streaming experiment server. The default value is 3000, which is 3 seconds."
  callback: (result) => {
    // The business logic processing of the returned value of the experimental result.
    // TODO Please perform your own experiment based on the result
  },
});

Request parameters

Parameter	Parameter	Default value	Description	Remarks
param_name	string	undefined	Experiment Parameter Name	Required parameter. You must set a non-empty string.
value_type	String	The value can only be "NUMBER" \| "STRING" \| "BOOLEAN" \| One of the four types of "JSON"	Experimental value type	Required parameter. You must set one of the preceding four types
default_value	string \| number \| boolean \| object \| null \| undefined	undefined	Default result values for experiment parameters	Required parameters, which must be consistent with the current experimental value result type. If the experiment value corresponding to the parameter is of the NUMBER type, the input default_value must also be of the number type, and the returned result experiment result is also of the number type.
timeout_milliseconds	number \| undefined	3000	The server request timeout period of the shunt experiment.	Optional parameters
callback	Function	N/A	Shunt experiment result value callback function	Required parameter

Important

Note: Make sure that the default values used in the /B offload API are processed properly.

Response parameters

Parameter	Parameter	Default value	Description	Remarks
result	string \| number \| boolean \| object \| undefined	undefined	Experimental parameter result value	the specified experiment result value must be of the same type as the experiment value. otherwise, the sdk considers the experiment result as abnormal. At the same time, please note that the results returned by result have made normal business logic judgment in the business.

Examples

aplus.qt_abtest.fetchABTestFromCacheThenServer({
  param_name: "experiment parameter name",
  value_type: "Experiment value type",
  default_value: "Default result value of experiment parameters",
  timeout_milliseconds: "The request timeout period of the streaming experiment server. The default value is 3000, which is 3 seconds."
  callback: (result) => {
    // If the test result of the local cache or server is hit
    console.log(result); //pink
    // The result of the missing experiment.
    console.log(result); //a_string_default_value
  },
})