How to select the correct tracking API - Quick Tracking - Alibaba Cloud Documentation Center

Select the correct tracking API based on the tracking scheme.

1. How do I view a tracking plan?

Before tracking, it is necessary to determine where to track and which to track, that is, it is necessary to sort out the clear requirements for tracking. In the QuickTracking platform, the explicit requirements of the tracking are called the tracking plan, and a specification template is designed for the tracking plan. Examples:

In the tracking plan, the required tracking are as follows:

1. Event subject: the "who" triggered the event. The event can be divided into device ID and account ID. The event must have one of them.

Device ID: is generally automatically generated for QT in H5. If the H5 page is embedded in an applet, the device ID needs to be set to the device ID of the applet.
Account ID: the account ID of the client user after logging in. When a user logs in from different devices, the device ID changes, but the account ID does not change. For example, a user uses a mobile phone and a pad to log in separately.

2. User property: for the property of account ID, for example, the user with account ID of "testdemo@111", "birthday" of "1999-02-13", "member level" of "platinum", etc. The "birthday" and "membership" ratings are user propertys.

3. Channel property: propertys of advertisement delivery, such as delivery channel, delivery method, and delivery content.

4. Global property: the property carried by each event after global setting once

5. Page browsing event: the event reported when the page is loaded (the page code is equal to the event code in the tracking scheme, and it is also an event marked in blue)

6. Click, exposure, and custom events: events reported when the client user interacts with the client.

2. Set the device ID and account ID

2.1 Device ID Settings

Web device IDs can be automatically generated by Quicktracking or manually uploaded by developers. Default value: Automatically generated by Quicktracking.

Automatically generated: By default, the device ID of a website is regenerated only when the browser changes or the user clears cookies and caches. If the browser and IP address of the user remain unchanged, the regenerated device ID does not change.
Manual upload: Assign value to _dev_id. The length of the upload must be 24 to 36 characters.

// If the user ID is tracked asynchronously, you must prevent the SDK from being reported and set the BLOCK tracking.
aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['_hold', 'BLOCK']
});

// Set the_dev_id parameter. 
aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['_dev_id', 'Custom device ID']
});

// Because the trackion of user IDs is asynchronous, you need to set BLOCK first, and then set START.
// After_hold=START is set, logs that are previously blocked will be sent one by one with user information.
aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['_hold', 'START']
});

2.2 Account ID Settings

You must specify an account ID when you log on or log on to H5. This is because each log after setting will carry the account ID, but the event triggered after you exit H5 and then enter H5 will not carry the account ID. Therefore, you need to set the account ID when you log on to the H5 instance or when you log on to the H5 instance.

// When a user logs on, the logon account information is obtained or the user has logged on. You can obtain the logon account by using the cookie or localstorage.
function demoLogin() {
    /*************************** IF SYNCHRONIZING SCENE ************************************* /
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_user_id', 'Account id']
    });

    /******************** If it is an asynchronous scenario and logs must depend on the user account ******************************* /
    // Set_hold=BLOCK to block trackion and reporting.
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_hold', 'BLOCK']
    });
    ...
    function callback() {
        // Obtain the user account ID in the asynchronous callback result.
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_user_id', 'Account id']
        });
        // Set_hold=START to allow trackion and reporting.
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_hold', 'START']
        });
    };
    ...
};
// Reset the user account ID when the user logs off.
function demoLogOff() {
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_user_id', '']
    });
};

2.3 Device ID and account ID

Obtain the device ID

You can use one of the following methods to obtain the device ID that is automatically generated by the SDK:

A field named cna is stored in the cookie of the current domain. You can parse the document.cookie file to obtain the value of the cna field.

You can use the_dev_id method to obtain the ID of the uploaded device as follows:

Developers can use setMetaInfo to set_dev_id to customize the device ID, which can be read aplus.getMetaInfo('_dev_id')

Obtain an account ID

You can use setMetaInfo to set_user_id to customize the ID of a user account. You can obtain the ID by using aplus.getMetaInfo('_user_id')

3. Set user propertys

Reports user propertys by using pre-built event code $$_user_profile. The event type is other events.

Before you report user propertys, you must set _user_id to report user accounts. Otherwise, Quick Tracking does not perform correlation calculation on user propertys. After you confirm the account ID of the reporting user, an example of reporting user propertys is as follows:

// Sample code
aplus_queue.push({
    'action': 'aplus.record',
    'arguments': ['$$_user_profile', 'OTHER', {
        name: 'sss', // User property 1
        gender: 'male', // User property 2     
        class: '3', // User property 3
    }]
});

In the preceding content, rows 2, 3, 4, 8, and 9 cannot be changed. Only rows 5, 6, and 7 can be customized.

4 Channel propertys

By default, the lifecycle of a channel property is the same as that of a session on the SessionStorage tab of the browser. You can customize the expiration time of the UTM parameter by day (supported by V2.0.7 and later ). The result is stored in a cookie. The maximum expiration time is set based on the actual maximum expiration time of cookies supported by each browser.

Setting method:

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-utm-expire-days', '1']
});

H5 channel parameter scenarios are as follows:

4.1 H5 links evoke apps, mini programs and H5 pages

Channel propertys do not need to be tracked, but the URL of the mini program or app must contain these channel propertys, and the property key must start with "utm_" because the keyword recognized by the SDK is "utm_". Root causes:

qaplus/product?utm_channel=gzh

PS: If you have cooperated with a channel delivery company on the market and cannot start with utm_, you can use the Global propertys API to report the channel propertys. (The property key must start with utm_).

4.2 The H5 link arouses the application market to download and launch the application

In this scenario, if only the "utm_parameter" is included in the H5 URL, the "utm_parameter" cannot be included in the startup event after the app is downloaded. Therefore, it is necessary to perform fuzzy matching between the "H5 arousal event" and "App startup event" on the IP address and browser User Agent.

When a user clicks the 「Call /Download App」 button in H5, an "app call event ($$_app_link)" is reported. In the event, the appkey and channel property of the call app must be included.

// Sample code
aplus_queue.push({
    action: 'aplus.recordAppLink',
    arguments: [{
        targetAppKey: 'Application appKey', // Required. The appKey of the application to be evoked.
        custom1: 'custom1', // Optional. The custom parameter.
        ...
    }]
})

The "app activation event ($$_app_install)"" is automatically tracked and reported by the QT App SDK.
The QT system performs fuzzy matching between the application evocation event ($$_app_link) and the application activation event ($$_app_install) on the "IP address and browser UserAgent". When you use it, you can directly analyze the channel propertys of "application activation (preset)" in the app application.

5 Global propertys

The lifecycle of a global property starts when the first global property API operation is set. When the browser tab page is closed, the browser is closed, or the browser URL of a multi-page application is changed.

5.1 Set append global propertys (aplus.appendMetaInfo)

When you use aplus.appendMetaInfo to report global propertys, if the key of the global property is the same as that of an existing global property, the existing value is updated. If the key of the global property is different from that of an existing global property, a new global property is inserted.

API:

aplus_queue.push({
    action: 'aplus.appendMetaInfo', // Append a global property
    arguments: ['globalproperty', {
        xxx: xxx,
    }]
});

Examples:

aplus_queue.push({
    action: 'aplus.appendMetaInfo', // Append a global property
    arguments: ['globalproperty', {
        a: 3,
        b: 4
    }]
});
// The current globalproperty is a:3 and b:4

aplus_queue.push({
    action: 'aplus.appendMetaInfo', // Append a global property
    arguments: ['globalproperty', {
        b: 2,
        d: 4
    }]
});
// The current globalproperty is a:3, b:2, and d:4

After the global property is set, every event log that is triggered is reported. The lifecycle only starts when the H5 page is closed.

5.2 Set overrides global propertys (aplus.setMetaInfo)

When you use aplus.setMetaInfo to report global propertys, only the last report takes precedence. That is, all existing global propertys are cleared first, and then the global propertys set by this setMetaInfo() are put into.

Warning

Make sure that this method meets the business logic before you use it. In common scenarios, 「clear」 global propertys.

Note that using this method will also overwrite the channel property! ! !

Interface:

aplus_queue.push({
    action: 'aplus.setMetaInfo', // Overwrite the global property
    arguments: ['globalproperty', {
        xxx: xxx
    }]
});

Example

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['globalproperty', {
        a: 1,
        b: 2
    }]
});
// The current globalproperty is a:1 and b:2

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['globalproperty', {
        c: 1,
        d: 2
    }]
});
// The current globalproperty is c:1 and d:2, "a:1 and b:2 no longer exist"

5.3 Get Global propertys

You can use getMetaInfo to obtain all global propertys and channel propertys.

aplus.getMetaInfo('globalproperty');

Note: To obtain global propertys, you must call the operation after the SDK is initialized.

6 Page Browsing Event API

1. Page browsing events are divided into two methods: SDK automatic tracking (auto-tracking) and code tracking. By default, the auto-tracking is enabled.

2. The following content needs to be embedded for page browsing events:

Event code: the page code. In a page browsing event, the event code is the page code.
Event propertys of page browsing events: see the tracking plan for specific propertys.

6.1 pageConfig

pageConfig is used to globally set the page encoding mode of the page, as shown in the following example:

<head>
  ...
  <script>

      ... sdk integration code section

    // Set the page encoding and page title.
    // Set pageConfig [SDK v1.7.7 or later] to take effect.
    // If pageConfig is not set
    // The page encoding is the current page URL by default, without parameters.
    // The default page title is document.title.
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['pageConfig', {
        hashMode: false, // Default value: false. This parameter specifies the history mode. If the hash mode is enabled, this parameter specifies the true value.
        // This parameter takes effect only when the hashMode parameter is set to true. Default value: false. If the value is set to true, all URLs are equal to each other.
        hashAutoPVSupportFullURL: false, 
        '/': {
          pageName: 'home_page_test',
          pageTitle: 'Homepage',
          skipMe: true // Ignore the page browsing events that are automatically reported for the page. The default value is undefined.
        },
        '/search': { // Match based on location.pathname
          pageName: 'search_page_test',
          pageTitle: 'Search page',
          regRule: // \/search // (optional to verify dynamic routing
        },
        '#/hash_page': { // match based on location.hash
          pageName: 'hash_page_test',
          pageTitle: 'Page in hash mode',
          regRule: a regular expression that matches the current hash route // (optional) to verify the dynamic route.
        },
        '/demo.html': {
          pageName: 'demo_test',
          pageTitle: 'Demo test page'
        }
      }]
    });
  </script>
</head>

pageName
- Indicates the page encoding
pageTitle
- Indicates the page title
skipMe is whether to disable automatic tracking for this page
- true indicates that it is disabled, and false indicates that it is enabled.
- This setting has a higher priority than the master switch aplus-disable-apv that disables automatic tracking of page browsing events
hashMode
- Indicates whether the pv page url is automatically determined based on the hash mode. Default value: false
hashAutoPVSupportFullURL
- Indicates whether to send an automatic pv when the url parameter is changed in hash mode.
- Default value: false. This parameter takes effect only when hashMode is set to true.
  - Eg. First hashMode=true, and set the value to true, when the page url switches from www.example.com/#/a?p=111 to www.example.com/#/a?p=222, it will also send automatic pv
- V2.4.3 and later support

6.2 Page automatic tracking (auto-tracking)

When the SDK recognizes that the code of the SDK in the page is loaded, the page browsing event is reported. The reported content is:

Current Client Time
Page path
Page encoding (The default value is the page path. If pageconfig is set, the value is the page_name of the mapping.)
The title of the page. The default value is the title of the page. If pageconfig is set, the value is the page_title of the mapping.
Page stay duration: The SDK does not track.

6.2.1 Page Automatic Tracking Switch

By default, automatic page reporting is enabled. To disable automatic page reporting, call the following API:

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-disable-apv', true]
});

If you only need to disable automatic page reporting for a page, you can call skipMe to true in pageconfig to disable it.

6.2.2 Report propertys on a custom page

In automatic tracking mode, you can configure custom propertys for a page. You must specify the extData parameter in the pageConfig configuration. You can set extData to a function or specify a field in extData to a function.

Note: Supported versions are v.2.0.17 and later.

Sample code:

<head>
  ...
  <script>

        ... sdk integration code section

    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['pageConfig', {
        '/page1': {
          pageTitle: '',
          pageName: '',
          skipMe: true,
          extData: {
            customData1: 1,
            customData2: 1,
          },
        },
        '/page2': {
          extData: {
            customData1: 1,
            customData2: function () {
              return 1342;
            }
          }
        },
        '/page3': {
          extData: function () {
            return {
              customData1: 1,
              customData2: 1342
            }
          }
        },
      });
  </script>
</head>

Manual tracking of 6.3 pages

API

The sendPV method sends a page PV log. Its API definition is as follows:

aplus_queue.push({
    action: 'aplus.sendPV',
    arguments: [pageEventConfig, userData]
});

Parameters:

The pageEventConfig is the configuration of the page event. You only need to write { is_auto: false }.
userdata is the extended parameter of this page event. Its value is a JSON object (a simple tiled object, which cannot be nested in multiple layers). If no empty object '{}' is available,

Example

// A simple demo
aplus_queue.push({
    'action': 'aplus.sendPV',
    'arguments': [{
        is_auto: false
    }, {

        page_title: "home page", // The default value is the value in the pageConfig parameter. If this parameter is set, the value is set here. This parameter is optional.
        page_name: "yourCurrentPageName", // The default value is the value in pageConfig. If it is set here, it is the value set here (optional).

        // If you set the duration parameter (in milliseconds),QuickTracking is used as the "event property-duration (s)" for analysis.
        duration: 1111111,

        // Customize event propertys.
        x: 111,
        y: 222
    }]
});

By default, the value of the page_title parameter is set to the value of the pageConfig parameter. If the page_title parameter is set, the value of the page_title parameter is set to the value of the pageConfig parameter.

By default, the page_name parameter is set to the value in the pageConfig parameter. If the page_name parameter is set, the page_name parameter is set to the value in the pageConfig parameter.

7 Event tracking

All events except page browsing events are buried by using 'action':'aplus.record'. The following content needs to be tracked:

Event code:

Event propertys:

Page Encoding (optional): By default, the SDK tracks the page path. If the page path is mapped in pageConfig and page_name is set, the value is page_name in pageConfig. If page_name is set in the event property when the event is tracked, the value is set to page_name in the event property. That is, the value priority is

page_name in event propertys> page_name in pageConfig> page path

Page Title: The SDK tracks the title of the page by default. If the page path is mapped in pageConfig and page_title is set, the value is page_title in pageConfig. If you set page_title in the event property when you track an event, the value of the page_title parameter is the same as that of the event property. That is, the value priority is

page_title in event propertys> page_title in pageConfig> page title

Event tracking is divided into SDK automatic tracking (auto-tracking) and code tracking. By default, the auto-tracking of clicks and exposure is disabled.

Please note that:

In apps, data types are strongly typed and must be correct. But in H5, the data type is weakly typed and any data type can be used. Therefore, when H5 is embedded in an app, if the data type in H5 is inconsistent with the data type in the app, such as null, an error may be reported. Therefore, we recommend that you use an appropriate type to pass data in H5, such as number\string \string array.

Event propertys can be of one of the following types: String, Number, and string array.

7.1 Exposure Event

EXP refers specifically to an exposure event

aplus_queue.push({
    'action': 'aplus.record',
    'arguments': ['Event code in the tracking scheme ', 'EXP', {
        x: '111',
        y: '222',
        z: 333,
        page_name: "demoPageName", // The custom page code of the current page. This parameter is not required.
    }]
});

7.2 Click Events

CLK refers specifically to the click event

aplus_queue.push({
    'action': 'aplus.record',
    'arguments': ['Event code in the tracking scheme ', 'CLK', {
        x: '111',
        y: '222',
        z: 333,
        page_name: "demoPageName", // The custom page code of the current page. This parameter is not required.
    }]
});

7.3 Other event tracking

Other custom events except click and exposure events

aplus_queue.push({
    'action': 'aplus.record',
    'arguments': ['Event code in the tracking scheme ', 'OTHER', {
        x: '111',
        y: '222',
        z: 333,
        page_name: "demoPageName", // The custom page code of the current page. This parameter is not required.
    }]
});

7.4 Automatic exposure (auto-tracking)

The SDK internally helps developers handle exposure times and automatically tracks element exposure behaviors. The trigger timing is that the control is displayed in the visible area over 50% ms and the time exceeds 300ms.

<body>
    <div id="root">
        <h1 class="title">demo</h1>
        <! -- If you need to pass parameters, pass data-* through the html data property, please use lowercase letter combinations to define parameters -->
        <button class="autoexp-component-css"
            data-pagename="Customize the page encoding of the current event"
            data-page_title="Customize the page title of the current event"> Test exposure </button>
        <List>
            <List.Item class="autoexp-list-item" data-name={"a"}>a</List.Item>
            <List.Item class="autoexp-list-item" data-name={"b"}>b</List.Item>
            <List.Item class="autoexp-list-item" data-name={"c"}>c</List.Item>
            <List.Item
                class='autotrack_exp_web'
                data-itemname={'Rebook'}
                data-itemzoon={'abc'}
                data-itemid={'a_product_id'}
                data-promotioninformation={'abc'}
                data-pagename={'Homepage'}> Full-tracking-Auto Exposure </List. Item>

        </List>
    </div>
</body>

SDK configuration section:

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-auto-exp', [
        // track the exposure behavior of the button element.
        {
            cssSelector: '.autoexp-component-css', // The class of the element you want to expose. 
            logkey: 'auto-exp-id', // The corresponding event code in the tracking scheme.
            Props: ['data-pagename', 'data-page_title'], // The custom property on the element you want to expose.
        },
        // track the exposure behavior of list elements.
        {
            cssSelector: '.autoexp-list-item',
            logkey: 'auto-exp-item', // The corresponding event code in the tracking scheme.
            props: ['data-name'], // The name field of the item that is included in the automatic exposure.
        },
    ],
    ],
});

// The preceding callback function for automatic exposure, which is used to support customized parameter reporting, such as hump writing (HTML data property only supports lowercase by default).
// Version 1.9.25 and later are supported.
aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-auto-exp-userfn', function (e) {
        if (e.className.indexOf('autotrack_exp_web') != -1) {
            var dataset = e.dataset;
            var obj = {};
            obj.itemID = dataset.itemid;
            obj.itemName = dataset.itemname;
            obj.itemZoon = dataset.itemzoon;
            obj.promotionInformation = dataset.promotioninformation;
            obj.pageName = dataset.pagename;
            return {
                userdata: obj
            };
        }
    }]
});

If you scroll within an element (with a scroll bar in a block), you need to add a positionSelector configuration, refer to the following code

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-auto-exp', [{
        positionSelector: '.content-wrap', // your scrollbar element class
        cssSelector: '.autoclk-app-option', // The class of the element you want to expose. 
        logkey: 'auto-exp-id', // The corresponding event code in the tracking scheme.
        props: ['data-name'], // The custom propertys of the element.
    },
    ],
    ],
});

In a single-page application, the SDK repeatedly reports exposure events when a page leaves and then returns. To disable this default behavior, you can set the following settings:

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-exposure-event-can-repeat', false]
});

The default value of the aplus-exposure-event-can-repeat metaInfo is true, that is, repeated reporting of exposure events is supported.

Note: The aplus-exposure-event-can-repeat API only takes effect in version v1.10.2 and above. The default behavior of automatic exposure events below this version is still single-page application. As long as the page is not reloaded, the exposed elements of the page will not be exposed again when returning to the current page.

7.5 Automatic click (auto-tracking)

Starting from 1.7.0, to reduce the workload of developers, the SDK also allows you to configure some information so that the SDK can automatically track click events on the page.

<body>
    <div id="root">
        <h1 class="title">Demo</h1>
        <! -- 1. First locate the class of the html element to report the event -->
        <! -- 2. If you need to pass parameters, pass data-* through the html data property, please use lowercase letter combinations to define parameters -->
        <button
            class='autoclk-component-css'
            data-aparam="1"
            data-pagename="Customize the page encoding of the current event"
            data-page_title="Customize the page title for the current event">
            Test Click
        </button>
        <li
            className='autotrack_clk_web'
            data-itemname='Reading Stude'
            data-itemzoon='abc'
            data-itemid='a_product_id'
            data-promotioninformation='abc'
            data-pagename='homepage'> automatic click </li>
    </div>
</body>

SDK configuration section:

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-auto-clk', [{
        cssSelector: '.autoclk-component-css', // The class of the element. 
        logkey: 'auto-clk-id', // The corresponding event code in the tracking scheme.
        props: ['data-aparam, 'data-pagename, 'data-page_title'], // The custom property on the element.
    },
    ],
    ],
});

// The pre-callback function for automatic clicks. It is used to support customized parameter reporting, such as hump writing. By default, HTML data propertys support only lowercase.
// Version 1.9.25 and later are supported.
aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-auto-clk-userfn', function (e) {
        if (e.className.indexOf('autotrack_clk_web') != -1) {
            var dataset = e.dataset;
            var obj = {};
            obj.itemID = dataset.itemid;
            obj.itemName = dataset.itemname;
            obj.itemZoon = dataset.itemzoon;
            obj.promotionInformation = dataset.promotioninformation;
            obj.pageName = dataset.pagename;
            return {
                userdata: obj
            };
        }
    }]
});

7.6 automatic capture of any control click (auto-tracking)

7.6.1 Fully buried switch

You can set the aplus-autotrack-enabled parameter to true to enable the full tracking feature. By default, this feature is enabled. Set the value to false to disable the local auto-tracking function.

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-autotrack-enabled', true]
});

7.6.2 Auto-tracking control configuration

by default, the web sdk tracks only the click events of the four html controls a, button, textarea, and input. if you need to track other types of controls, you can configure them through the additional configuration aplus-autotrack-config

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-autotrack-config', {
        track_tags: {
            li: true, // track the <li/> control
            img: true,// track the <img/> control.
            svg: true,// track the <svg/> control.
            div: true,// track the <div/> control.
            span: true,// track the <span/> control.
            path: true,// track the <path/> control.
            p: true // track the <p/> control
        },
        track_input: true, // track the input content in the input box. By default,
        element_capture_enable: true // The event capture mode is supported for all-tracking control clicks. The default mode is bubble mode and the value is false.
    }]
});

7.6.3 Report the property of auto-tracking events

Same as property reporting for automatic events, with the help of html data property reporting

<body>
    <div id="root">
        <! -- If you need to pass parameters, pass data-* through the html data property -->
        <button data-aparam="1"> Test Click </button>
    </div>
</body>

7.6.4 Disable auto-tracking event reporting for a single control

If you want to disable event reporting for a control, disable reporting by adding a control property aplus-autotrack-off to true

<body>
    <div id="root">
        <! -- If you need to pass parameters, pass data-* through the html data property -->
        <button data-aparam="1" aplus-autotrack-off="true">
            Components configured with aplus-autotrack-off are not reported
        </button>
    </div>
</body>

7.6.5 Custom event encoding for a single control

Customize event encoding by data-clk-logkey

<button data-clk-logkey="demoEventCode"> Customize event coding by data-clk-logkey </button>

8 Heatmap

8.1 Heatmap Capability Switch

By default, the SDK disables the heatmap capability. To enable the capability, configure the following settings:

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-heatmap-enabled', true]
});

<meta name="aplus-heatmap-enabled" content="1">

8.2 Heatmap Event sampling rate

Heatmap Event sample rate Minimum Supported thousands separator Decimal

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-rate-ahot', 0.001] // heatmap the event sample rate. The minimum number of decimals supported is thousands separator.
});

<meta name="aplus-rate-ahot" content="0.001">

9 Sharing fission

Sharing fission is a key concept of the growth hacking strategy. It relies on the social connection between users to realize the mutual transmission of information, so as to promote the acquisition of new users.

After completing the integration of the SDK function of sharing fission, you will be able to use the QuickTracking platform to share trend models and measure the pull-up benefits of marketing activities by sharing recurring-related indicators.

Supports viewing the recurring effect metrics of the top sharing users and different sharing recurring hierarchies.
Supports flexible combination and configuration of recurring indicators, views top users with the most fission pull-up capability and sharing recurring conversion capability, tracks the relationship between users sharing fission links and sharing recurring, and quickly locates key opinion consumers.

9.1 Obtain sharing source parameters

window.aplus.getRefShareParams();

Supported versions

H5 SDK v2.2.0 or later

Function

API used to obtain the source sharing id and source sharing url when the shared person opens the H5 of the sharer

Request parameters

N/A

Response parameters

Object parameters

Parameter	Parameter	Default value	Description	Remarks
$$_ref_share_url	String	""	Source share url that does not contain the share id	N/A
$$_ref_share_id	String	""	source sharing id	N/A

Call example

Scenarios based on promise return values

// Promise return value scenario
function onShare(options) {
    const {
        $$_ref_share_url,
        $$_ref_share_id
    } = window.aplus.getRefShareParams();
    const promise = window.aplus.requestShareParams({
        title: 'Share activity page',
        path: 'https://www.taobao.com/productId?utm_test=test',
        campaign: 'This is a sharing campaign',
        shareId: $$_ref_share_id
    }).then(res => {
        const { $sid } = res;
        if ($sid) {
            window.aplus.record("$$_share", "CLK", {
                $$_ share_title: "This is a shared title",
                $$_share_id: $sid,
                $$_share_campaign_id: "This is a custom sharing activity",
                $$_ share_type: "User-defined sharing platform",
                $$_ share_url: "This is a share url"
            });
        } else {
            console.log("Failed to obtain the shared parameters"); // Specify the cause of the error. In the DEBUG mode, the console returns a value.
        }
    });
}

Return value based on callback

// Call the returned value.
function onShare() {
    const {
        $$_ref_share_url,
        $$_ref_share_id
    } = window.aplus.getRefShareParams();

    window.aplus.requestShareParams({
        title: 'Share activity page',
        path: '/pages/share/shareCampaign?utm_test=test',
        campaign: 'This is a sharing campaign',
        shareId: $$_ref_share_id
    }, (res) => {
        const { $sid } = res;
        if ($sid) {
            window.aplus.record("$$_share", "CLK", {
                $$_ share_title: "This is a shared title",
                $$_share_id: $sid,
                $$_share_campaign_id: "This is a custom sharing activity",
                $$_ share_type: "User-defined sharing target platform",
                $$_ share_url: "This is a share url"
            });
        } else {
            console.log("Failed to obtain the shared parameters"); // Specify the cause of the error. In the DEBUG mode, the console returns a value.
        }
    });
}

9.2 Request sharing parameters

window.aplus.requestShareParams(Object params, Function callback);

Version

H5 SDK v2.2.0 or later

Function

request is used to build the share ID required for the sharing chain

Request parameters

Parameter

Default value

Description

Remarks

params

Object

N/A

Share the API for obtaining parameters

Required parameter

url: the path of the shared page. String type. Default value: location.href

Optional

campaign: the identity of the shared campaign. String type, the default value is undefined, the maximum length is 4*1024 characters

title: Share the title. String type, the default value is undefined, the maximum length is 4*1024 length

shareId: the ID of the source share. String type. Default value: undefined.

callback

Function

undefined

The callback function returned for the API that does not support the promise

If the callback parameter is not specified, the shared parameter acquisition API returns result as a promise by default.

If the callback parameter has a value and is a callback parameter, the callback function returns the shared parameter to obtain the request result of the API.

Response parameters

If the request parameters does not contain a callback, the Promise.resolve(Object result); is returned

Parameter	Parameter	Default value	Description	Remarks
$sid	String	undefined	Share Id, which represents the unique identifier of the sharing behavior of the sharing subject	N/A

If the request parameters contains a callback, return Object result

Parameter	Parameter	Default value	Description	Remarks
$sid	String	undefined	The ID of the share. The ID is the unique identifier of the share subject.	N/A

Call example

Scenarios based on promise return values

// Promise return value scenario

function onShare(options) {
    const promise = window.aplus.requestShareParams({
        title: 'Share activity page',
        path: 'https://www.taobao.com/productId?utm_test=test',
        campaign: 'This is a sharing campaign',
        shareId: "This is a source share id"
    }).then(res => {
        const { $sid } = res;
        if ($sid) {
            window.aplus.record("$$_share", "CLK", {
                $$_ share_title: "This is a shared title",
                $$_share_id: $sid,
                $$_share_campaign_id: "This is a custom sharing activity",
                $$_ share_type: "User-defined sharing target platform",
                $$_ share_url: "This is a share url"
            });
        } else {
            console.log("Failed to obtain the shared parameters"); // Specify the cause of the error. In the DEBUG mode, the console returns a value.
        }
    });
}

Return value based on callback

function onShare() {
    window.aplus.requestShareParams({
        title: 'Share activity page',
        path: '/pages/share/shareCampaign?utm_test=test',
        campaign: 'This is a sharing campaign',
        shareId: "This is a source share id"
    }, (res) => {
        const { $sid } = res;
        if ($sid) {
            window.aplus.record("$$_share", "CLK", {
                $$_ share_title: "This is a shared title",
                $$_share_id: $sid,
                $$_share_campaign_id: "This is a custom sharing activity",
                $$_ share_type: "User-defined sharing target platform",
                $$_ share_url: "This is a share url"
            });
        } else {
            console.log("Failed to obtain the shared parameters"); // Specify the cause of the error. In the DEBUG mode, the console returns a value.
        }
    });
}

9.3 Report sharing events

Report the sharing event by using the preset event coding $$_share. The event type is click event (CLK)

Example

window.aplus.record("$$_share", "CLK", {
    $$_ share_title: "This is a shared title",
    $$_ share_id: "Share ID obtained through the request sharing parameter API",
    $$_share_campaign_id: "This is a custom sharing activity",
    $$_ share_type: "User-defined sharing target platform",
    $$_ share_url: "This is a share url"
});

Please note that the evoked link needs to carry the key "$sid" and the value is the sharing Id parameter, such as https://example.aliyun.com/path/to/content?$sid=123456"

H5 link evokes other application examples:

const {
    $$_ref_share_url,
    $$_ref_share_id
} = window.aplus.getRefShareParams();

window.aplus.requestShareParams({
    title: 'Share activity page',
    path: '/pages/share/shareCampaign?utm_test=test',
    campaign: 'This is a sharing campaign',
    shareId: $$_ref_share_id
}, (res) => {
    const { $sid } = res;
    if ($sid) {
        window.aplus.record("$$_share", "CLK", {
            $$_ share_title: "This is a shared title",
            $$_share_id: $sid,
            $$_share_campaign_id: "This is a custom sharing activity",
            $$_ share_type: "User-defined sharing target platform",
            $$_ share_url: "This is a share url"
        });

        setTimeout(() => {
            var urlScheme = "https://example.aliyun.com/path/to/content?utm_source=utm_test&$sid=" + $sid;
            window.location.href = urlScheme;
        }, 1000)
    } else {
        console.log("Failed to obtain the shared parameters"); // Specify the cause of the error. In the DEBUG mode, the console returns a value.
    }
});