Web SDK埋點API功能使用方法-全域採集與增長分析-阿里雲

根據埋點方案，選擇正確的埋點API。

1 如何查看埋點方案

在進行埋點前，需要確定在哪裡埋點、埋哪些點等，即需要梳理清楚明確的埋點需求。在QuickTracking平台中將明確的埋點需求稱為埋點方案，並為埋點方案設計了規範模板。如下：

在埋點方案中，明確的所需埋點內容有：

1、事件主體：指“誰”觸發了這個事件，分為裝置ID和帳號ID，上報的事件務必具備其中之一。

裝置ID：在H5中一般為QT自動產生，若H5頁面嵌入在小程式中，則裝置ID需要設定為小程式的裝置ID。
帳號ID：用戶端使用者登入後帳號標識，當一個使用者在不同的裝置進行登入時，裝置ID會發生變化，但是帳號ID不會發生變化。例如一個使用者使用手機和pad分別登入。

2、使用者屬性：針對帳號ID的屬性，例如帳號ID為“testdemo@111”的使用者，“生日”為“1999-02-13”，“會員等級”為“鉑金”等。“生日”和“會員”等級就為使用者屬性。

3、渠道屬性：廣告投放的屬性，例如投放渠道、投放方式、投放內容等。

4、全域屬性：在全域設定一次後，每一個事件都會攜帶的屬性

5、頁面瀏覽事件：頁面載入時上報的事件（埋點方案中頁面編碼和事件編碼相等，也是標記為藍色的事件）

6、點擊、曝光、自訂事件：用戶端使用者與用戶端發生任意互動時上報的事件。

2 設定裝置ID&帳號ID

2.1 裝置ID設定

Web裝置ID有Quicktracking自動產生和開發人員手動上傳兩種方式，預設為Quicktracking自動產生：

自動產生：預設邏輯，網站的裝置ID只有瀏覽器發生變化或使用者主動清除cookie和緩衝時，裝置ID會重建，使用者的瀏覽器和IP地址不變的情況下，重建的裝置ID不會發生變化。
手動上傳：上傳方式為賦值給"_dev_id"，上傳的長度要在24-36字元。

// 如採集使用者ID是非同步行為，需要先阻止SDK上報，設定BLOCK埋點
aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['_hold', 'BLOCK']
});

// 設定 _dev_id 
aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['_dev_id', '自訂裝置ID']
});

// 因為採集使用者ID是非同步行為，故需要先設定BLOCK，再設定START
// 設定_hold=START後，事先被block住的日誌會攜帶上使用者資訊逐條發出
aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['_hold', 'START']
});

2.2 帳號ID設定

在使用者登入時，以及登入態進入H5時，都需要設定帳號ID。因為設定後的每一條日誌都將攜帶帳號ID，但退出H5再進入後觸發的事件不會攜帶帳號ID。所以需要在使用者登入時，以及登入態進入H5時設定帳號ID。

//使用者登入時，擷取到使用者登入帳號資訊 or 使用者已登入，通過cookie或者localstorage擷取使用者登入帳號
function demoLogin() {
    /*************************如果同步情境***********************************/
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_user_id', '使用者的帳號id']
    });

    /******************如果是非同步情境,並且日誌必須依賴使用者帳號***********************/
    //先通過設定_hold=BLOCK阻塞採集上報
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_hold', 'BLOCK']
    });
    ...
    function callback() {
        //擷取非同步回調結果中的使用者帳號id
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_user_id', '使用者的帳號id']
        });
        //再通過設定_hold=START允許採集上報
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_hold', 'START']
        });
    };
    ...
};
//使用者登出時，重設使用者帳號id
function demoLogOff() {
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['_user_id', '']
    });
};

2.3 裝置ID和帳號ID擷取

裝置ID的擷取

SDK自動產生的裝置ID擷取方式如下：

在當前網域名稱的cookie下儲存名為cna的欄位，可以通過解析document.cookie擷取

通過_dev_id方式自訂上傳的裝置ID擷取方式如下：

開發人員通過setMetaInfo設定_dev_id可以自訂裝置ID，可通過aplus.getMetaInfo('_dev_id')讀取

帳號ID的擷取

開發人員通過setMetaInfo設定_user_id可以自訂使用者帳號ID，可通過aplus.getMetaInfo('_user_id')擷取

3 設定使用者屬性

通過預製事件編碼 $$_user_profile 上報使用者屬性，事件類型為其他事件。

在上報使用者屬性之前，需要先設定_user_id上報使用者帳號，否則QuickTracking流量分析對使用者屬性不會進行關聯計算。確認上報使用者的帳號ID後，上報使用者屬性樣本如下：

//樣本
aplus_queue.push({
    'action': 'aplus.record',
    'arguments': ['$$_user_profile', 'OTHER', {
        name: 'sss',      //使用者屬性1
        gender: 'male',   //使用者屬性2     
        class: '3',       //使用者屬性3
    }]
});

上述內容中，2、3、4、8、9行不能發生任何變化，僅可自訂5、6、7行。

4 渠道屬性

渠道屬性的生命週期預設和瀏覽器tab頁面的SessionStorage即會話的儲存生命週期相同，支援按天為單位自訂utm參數到期時間（v2.0.7及以上版本支援），結果儲存在cookie中，最大時間設定以各瀏覽器支援的cookie實際最大到期時間說明為準。

設定方式：

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

H5渠道參數情境分別為：

4.1 H5連結喚起App、小程式和H5頁面

渠道屬性無需進行任何埋點，但是需要喚起小程式或App的URL中攜帶這些渠道屬性，且屬性key務必以“utm_”開頭，因為SDK識別的關鍵字為“utm_”。例如：

qaplus/product?utm_channel=gzh

PS：如果渠道屬性已經與市面上渠道投放公司進行了合作，無法使用utm_開頭，可以使用全域屬性API將渠道屬性進行埋點上報（屬性key依然需要以“utm_”開頭）。

4.2 H5連結喚起應用市場下載並啟動App

該情境下，如果僅是H5連結中攜帶“utm_”參數，已經無法做到下載App後的啟動事件攜帶“utm_”參數。所以需要進行“H5喚起事件”與“App啟動事件”做關於“IP地址和瀏覽器UserAgent”的模糊比對。

當使用者在H5中點擊「喚起/下載App」的按鈕時，上報“應用喚起事件（$$_app_link）”，在事件中需要攜帶喚起App的appkey和渠道屬性。

//樣本
aplus_queue.push({
    action: 'aplus.recordAppLink',
    arguments: [{
        targetAppKey: '要喚起的應用appKey',  // 必填，要喚起的應用appKey
        custom1: 'custom1', // 選填，自訂參數
        ...
    }]
})

App下載後的第一次啟動事件“應用啟用事件（$$_app_install）”由QT App SDK自動採集上報。
QT系統進行應用喚起事件（$$_app_link）和應用啟用事件（$$_app_install）關於“IP地址和瀏覽器UserAgent”的模糊比對。您使用時，可以直接在app應用中分析“應用啟用（預置）”的渠道屬性即可。

5 全域屬性

全域屬性的生命週期為首次設定全域屬性API開始，到瀏覽器tab頁面關閉、或者瀏覽器關閉、或者多頁應用瀏覽器URL發生變化。

5.1 設定追加全域屬性（aplus.appendMetaInfo）

使用aplus.appendMetaInfo進行全域屬性上報時，如果和已經存在的全域屬性key重複，則更新已有值；如果和已經存在的全域屬性key不一致，則插入新的全域屬性。

介面：

aplus_queue.push({
    action: 'aplus.appendMetaInfo',  //追加全域屬性
    arguments: ['globalproperty', {
        xxx: xxx,
    }]
});

樣本：

aplus_queue.push({
    action: 'aplus.appendMetaInfo', //追加全域屬性
    arguments: ['globalproperty', {
        a: 3,
        b: 4
    }]
});
//當前globalproperty為a:3和b:4

aplus_queue.push({
    action: 'aplus.appendMetaInfo', //追加全域屬性
    arguments: ['globalproperty', {
        b: 2,
        d: 4
    }]
});
//當前globalproperty為a:3、b:2和d:4

全域屬性設定後，將跟隨之後觸發的每一條事件記錄上報。生命週期僅為API調用開始到H5頁面關閉。

5.2 設定覆蓋全域屬性（aplus.setMetaInfo）

使用aplus.setMetaInfo進行全域屬性上報時，僅會以最後一次上報為準。即先清空已有全部全域屬性，再將本次setMetaInfo()設定的全域屬性放入。

警告

請確認該方式符合商務邏輯再使用，常見使用情境為「清空」全域屬性，請慎用該方式。

注意，使用該方法也會覆蓋掉渠道屬性！！！

介面：

aplus_queue.push({
    action: 'aplus.setMetaInfo',   //覆蓋全域屬性
    arguments: ['globalproperty', {
        xxx: xxx
    }]
});

樣本：

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['globalproperty', {
        a: 1,
        b: 2
    }]
});
//當前globalproperty為a:1和b:2

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['globalproperty', {
        c: 1,
        d: 2
    }]
});
//當前globalproperty為c:1和d:2,“a:1和b:2不再存在”

5.3 擷取全域屬性

使用 getMetaInfo可以擷取當前所有的全域屬性和渠道屬性。

aplus.getMetaInfo('globalproperty');

請注意：擷取全域屬性需要在sdk初始化完成之後調用

6 頁面瀏覽事件API

1、頁面瀏覽事件分為SDK自動埋點（全埋點）和代碼埋點兩種方式，預設頁面瀏覽事件的全埋點是開啟的。

2、頁面瀏覽事件需要埋點的內容為：

事件編碼：也就是頁面編碼，在頁面瀏覽事件中事件編碼即為頁面編碼。
頁面瀏覽事件的事件屬性：具體屬性見埋點方案

6.1 pageConfig

pageConfig為全域設定頁面的頁面編碼的方式，具體樣本如下：

<head>
  ...
  <script>

      ...sdk整合代碼部分

    //設定頁面編碼和頁面標題
    //設定pageConfig 【SDK v1.7.7以上】生效
    //若未設定pageConfig
    //頁面編碼預設為當前頁面url，不帶參數
    //頁面標題預設為document.title
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['pageConfig', {
        hashMode: false, //預設為false 為History模式；開啟雜湊模式為true
        //僅在hashMode=true條件下生效，預設值為false,如果為true，hash模式下自動pv支援全url相等判斷
        hashAutoPVSupportFullURL: false, 
        '/': {
          pageName: 'home_page_test',
          pageTitle: '首頁',
          skipMe: true //忽略自動上報該頁面的頁面瀏覽事件， 預設為undefined
        },
        '/search': {    //基於location.pathname匹配
          pageName: 'search_page_test',
          pageTitle: '搜尋網頁',
          regRule: /\/search/  //（可選校正動態路由
        },
        '#/hash_page': {  //基於location.hash匹配
          pageName: 'hash_page_test',
          pageTitle: 'hash模式頁面',
          regRule: 一段能匹配當前hash路由的Regex //（可選）校正動態路由
        },
        '/demo.html': {
          pageName: 'demo_test',
          pageTitle: 'Demo測試頁面'
        }
      }]
    });
  </script>
</head>

pageName
- 表示頁面編碼
pageTitle
- 表示頁面標題
skipMe為是否關閉該頁面的自動採集
- true表示關閉，false表示開啟
- 該設定的優先順序高於關閉頁面瀏覽事件自動採集的總開關aplus-disable-apv
hashMode
- 表示自動pv頁面url判斷是否基於hash模式，預設為false
hashAutoPVSupportFullURL
- 表示hash模式下，當url包括參數發生變化時，是否發送自動pv
- 該值預設為false，僅在hashMode=true的前提下設定生效
  - eg. 首先hashMode=true，並且設定該值也為true，當頁面url從www.example.com/#/a?p=111 切換到 www.example.com/#/a?p=222也會發送自動pv
- v2.4.3版本及以上支援

6.2 頁面自動埋點（全埋點）

SDK識別到頁面中SDK的代碼載入完成時，上報頁面瀏覽事件，上報的內容為：

當前用戶端時間
頁面path
頁面編碼（預設為頁面path，如果設定了pageconfig，則取值為映射的page_name）
頁面標題（預設為頁面title，如果設定了pageconfig，則取值為映射的page_title）
頁面停留時間長度：SDK不採集！

6.2.1 頁面自動埋點開關

頁面自動上報預設是開啟的，如果需要關閉自動頁面上報，API如下：

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

如果僅須關閉某一頁面的自動頁面上報，可以在pageconfig中調用skipMe為true關閉。

6.2.2 自訂頁面上報屬性

頁面自動埋點模式下支援頁面的自訂上報屬性，上報的自訂屬性需要放在pageConfig對應頁面配置下的extData裡，當前extData支援設定為函數，或者extData裡某一個欄位設定為函數。

註：支援版本在 v.2.0.17版本及以上

使用樣本：

<head>
  ...
  <script>

        ...sdk整合代碼部分

    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>

6.3 頁面手動採集

介面

sendPV 方法將發送一條頁面 PV 日誌，其 API 定義如下：

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

其中

pageEventConfig 為頁面事件的配置，只需要寫死{ is_auto: false } 即可
userdata 為本次頁面事件的擴充參數，其取值為一個 JSON 對象（平鋪的簡單對象，不能多層嵌套），若無可傳Null 物件'{}'

樣本：

// 一個簡單的demo
aplus_queue.push({
    'action': 'aplus.sendPV',
    'arguments': [{
        is_auto: false
    }, {

        page_title: "首頁", //預設為pageConfig中的值，如果這裡設定了，則為這裡設定的值 (非必傳)
        page_name: "yourCurrentPageName", //預設為pageConfig中的值，如果這裡設定了，則為這裡設定的值 (非必傳)

        //如果您設定了duration參數（單位須為毫秒），QuickTracking會做為分析時的「事件屬性-時間長度（s）」處理
        duration: 1111111,

        //自訂事件屬性
        x: 111,
        y: 222
    }]
});

頁面標題（page_title）預設為pageConfig中的值，如果這裡設定了，則為這裡設定的值；

頁面編碼（page_name）預設為pageConfig中的值，如果這裡設定了，則為這裡設定的值；

7 事件埋點

除了頁面瀏覽事件外的事件都使用'action':'aplus.record'進行埋點，事件需要埋點的內容有：

事件編碼：

事件屬性：

頁面編碼（可選）：SDK預設採集頁面path，如果頁面path在pageConfig中進行了映射，並設定了page_name，則取值為pageConfig中的page_name。如果在事件埋點時，在事件屬性中設定了page_name，則取值為事件屬性中的page_name。也就是取值優先順序為

事件屬性中的page_name > pageConfig中的page_name > 頁面path

頁面標題（可選）：SDK預設採集頁面title，如果頁面path在pageConfig中進行了映射，並設定了page_title，則取值為pageConfig中的page_title。如果在事件埋點時，在事件屬性中設定了page_title，則取值為事件屬性中的page_title。也就是取值優先順序為

事件屬性中的page_title > pageConfig中的page_title > 頁面title

事件埋點分為SDK自動埋點（全埋點）和代碼埋點兩種方式，預設點擊和曝光的全埋點是關閉的。

請注意：

在 App 中，資料類型是強型別的，必須保證資料類型的正確性。但是在 H5 中，資料類型是弱類型的，可以使用任何資料類型。因此當H5嵌入App時，如果 H5 中的資料類型與 App 中的資料類型不一致，比如 null 類型，可能會導致報錯，所以建議您在 H5 中使用合適的類型來傳遞資料，例如：number\string\字串數組等。

事件屬性可以是如下幾種類型之一：String、 Number、字串數組。

7.1 曝光事件

EXP特指曝光事件

aplus_queue.push({
    'action': 'aplus.record',
    'arguments': ['埋點方案中的事件編碼', 'EXP', {
        x: '111',
        y: '222',
        z: 333,
        page_name: "demoPageName", //您當前頁面的自訂頁面編碼（非必傳）
    }]
});

7.2 點擊事件

CLK特指點擊事件

aplus_queue.push({
    'action': 'aplus.record',
    'arguments': ['埋點方案中的事件編碼', 'CLK', {
        x: '111',
        y: '222',
        z: 333,
        page_name: "demoPageName", //您當前頁面的自訂頁面編碼（非必傳）
    }]
});

7.3 OTHER 其他事件埋點

OTHER特指除點擊和曝光事件外的其他自訂事件

aplus_queue.push({
    'action': 'aplus.record',
    'arguments': ['埋點方案中的事件編碼', 'OTHER', {
        x: '111',
        y: '222',
        z: 333,
        page_name: "demoPageName", //您當前頁面的自訂頁面編碼（非必傳）
    }]
});

7.4 自動曝光（全埋點）

由SDK內部協助開發人員處理曝光時機，並自動採集元素曝光行為。觸發時機為控制項展示在可視地區內面積超過50%，時間超過300ms。

<body>
    <div id="root">
        <h1 class="title">demo</h1>
        <!-- 如果需要傳遞參數，通過html的資料屬性傳遞 data-*的方式,請使用小寫字母組合定義參數 -->
        <button class="autoexp-component-css"
            data-pagename="自訂當前事件的頁面編碼"
            data-page_title="自訂當前事件的頁面標題">測試曝光</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={'讀書'}
                data-itemzoon={'abc'}
                data-itemid={'a_product_id'}
                data-promotioninformation={'abc'}
                data-pagename={'首頁'}>全埋點-自動曝光</List.Item>

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

SDK 配置部分：

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-auto-exp', [
        //採集button元素的曝光行為
        {
            cssSelector: '.autoexp-component-css', // 你要曝光的元素class 
            logkey: 'auto-exp-id',   // 埋點方案中對應的事件編碼
            props: ['data-pagename', 'data-page_title'], // 你要曝光的元素身上自訂屬性
        },
        //採集列表元素的曝光行為
        {
            cssSelector: '.autoexp-list-item',
            logkey: 'auto-exp-item', // 埋點方案中對應的事件編碼
            props: ['data-name'], // 自動曝光會攜帶item的name欄位
        },
    ],
    ],
});

//自動曝光的前置回呼函數，用於支援定製化參數上報，如駝峰寫法等（html資料屬性預設只支援小寫）
//1.9.25版本及以上支援
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
            };
        }
    }]
});

如果是元素內滾動（某個區塊內有捲軸）則需要增加positionSelector配置，參考以下代碼

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-auto-exp', [{
        positionSelector: '.content-wrap',  // 你的捲軸元素class
        cssSelector: '.autoclk-app-option', // 你要曝光的元素class 
        logkey: 'auto-exp-id',  // 埋點方案中對應的事件編碼
        props: ['data-name'], // 元素身上自訂屬性
    },
    ],
    ],
});

SDK在單頁應用中，當存在頁面離開後又返回的情境時，會再次重複上報曝光事件，如果需要關閉此預設行為，可以通過設定：

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

aplus-exposure-event-can-repeat metaInfo的預設值是true，即支援重複上報曝光事件.

備忘：aplus-exposure-event-can-repeat API僅在v1.10.2版本及以上生效，該版本以下自動曝光事件的預設行為仍然是單頁應用只要頁面不被重新載入，頁面已曝光的元素，再次回到當前頁面時不會再次曝光。

7.5 自動點擊（全埋點）

從1.7.0開始，為減少開發人員埋點工作量，SDK也支援通過配置部分資訊，讓SDK自動採集頁面內的點擊事件。

<body>
    <div id="root">
        <h1 class="title">Demo</h1>
        <!-- 1.首先定位待上報事件的html元素的class -->
        <!-- 2.如果需要傳遞參數，通過html的資料屬性傳遞 data-*的方式,請使用小寫字母組合定義參數 -->
        <button
            class='autoclk-component-css'
            data-aparam="1"
            data-pagename="自訂當前事件的頁面編碼"
            data-page_title="自訂當前事件的頁面標題">
            測試點擊
        </button>
        <li
            className='autotrack_clk_web'
            data-itemname='讀書'
            data-itemzoon='abc'
            data-itemid='a_product_id'
            data-promotioninformation='abc'
            data-pagename='首頁'>自動點擊</li>
    </div>
</body>

SDK 配置部分：

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-auto-clk', [{
        cssSelector: '.autoclk-component-css', //元素的class 
        logkey: 'auto-clk-id',  //埋點方案中對應的事件編碼
        props: ['data-aparam', 'data-pagename', 'data-page_title'], // 元素身上自訂屬性
    },
    ],
    ],
});

//自動點擊的前置回呼函數，用於支援定製化參數上報，如駝峰寫法等（html資料屬性預設只支援小寫）
//1.9.25版本及以上支援
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 任意控制項點擊自動捕獲（全埋點）

7.6.1 全埋點開關

通過設定aplus-autotrack-enabled 為true，開啟全埋點功能，預設為開啟，指定為false關閉本地全埋點功能

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

7.6.2 全埋點控制項配置

web sdk 預設只採集 a、button、textarea、input 這4個html控制項的點擊事件，如若需要額外採集其他類型控制項，可通過額外配置aplus-autotrack-config進行配置

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-autotrack-config', {
        collect_tags: {
            li: true, //採集<li/>控制項
            img: true,//採集<img/>控制項
            svg: true,//採集<svg/>控制項
            div: true,//採集<div/>控制項
            span: true,//採集<span/>控制項
            path: true,//採集<path/>控制項
            p: true //採集<p/>控制項
        },
        collect_input: true, //採集input框輸入的內容，預設不採集,
        element_capture_enable: true //全埋點控制項點擊支援事件捕獲模式，預設為冒泡模式，值為false
    }]
});

7.6.3 全埋時間點事件的屬性上報

同自動事件的屬性上報，藉助html資料屬性上報

<body>
    <div id="root">
        <!-- 如果需要傳遞參數，通過html的資料屬性傳遞 data-*的方式 -->
        <button data-aparam="1">測試點擊</button>
    </div>
</body>

7.6.4 單個控制項關閉全埋時間點事件上報

如果期望關閉某個控制項的事件上報，通過添加控制項屬性aplus-autotrack-off為true關閉上報

<body>
    <div id="root">
        <!-- 如果需要傳遞參數，通過html的資料屬性傳遞 data-*的方式 -->
        <button data-aparam="1" aplus-autotrack-off="true">
            配置了aplus-autotrack-off的組件不上報
        </button>
    </div>
</body>

7.6.5 單個控制項自訂事件編碼

通過data-clk-logkey自訂事件編碼

<button data-clk-logkey="demoEventCode">通過data-clk-logkey自訂事件編碼</button>

8 熱力圖

8.1 熱力圖能力開關

SDK預設關閉熱力圖能力，如需開啟，請通過如下配置：

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

或者

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

8.2熱力圖事件採樣率

熱力圖事件採樣率最小支援千分位小數

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-rate-ahot', 0.001] //熱力圖事件採樣率，最小支援千分位小數
});

或者

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

9 分享裂變

分享裂變是增長駭客策略的一個關鍵概念，它依靠使用者之間的社交聯絡來實現資訊的相互傳遞，從而促進新使用者的擷取。

完成分享裂變的SDK功能整合，您將可以使用QuickTracking平台分享趨勢模型，通過分享迴流相關指標衡量營銷活動的拉新效益。

支援查看TOP分享使用者和不同分享迴流層級的分享迴流效果指標。
支援迴流指標靈活組合配置，查看最具裂變拉新能力和分享迴流轉化能力的TOP使用者，追蹤使用者分享裂變鏈路與分享迴流關係，快速定位關鍵意見消費者。

9.1 擷取來源分享參數

window.aplus.getRefShareParams();

版本要求

H5 sdk v2.2.0版本及以上

功能

當被分享人開啟分享人的 H5時，用於擷取來源分享id 和來源分享 url 的 API

請求參數

無

返回參數

Object 參數

參數	類型	預設值	含義	備忘
$$_ref_share_url	String	""	不包含分享 id 的來源分享 url	無
$$_ref_share_id	String	""	來源分享 id	無

調用樣本

基於 promise 傳回值情境

// promise 傳回值情境
function onShare(options) {
    const {
        $$_ref_share_url,
        $$_ref_share_id
    } = window.aplus.getRefShareParams();
    const promise = window.aplus.requestShareParams({
        title: '分享活動頁',
        path: 'https://www.taobao.com/productId?utm_test=test',
        campaign: '這是一個分享活動',
        shareId: $$_ref_share_id
    }).then(res => {
        const { $sid } = res;
        if ($sid) {
            window.aplus.record("$$_share", "CLK", {
                $$_share_title: "這是一個分享標題",
                $$_share_id: $sid,
                $$_share_campaign_id: "這是一個自訂分享活動",
                $$_share_type: "使用者自訂分享平台",
                $$_share_url: "這是一個分享url"
            });
        } else {
            console.log("分享參數擷取失敗"); //具體報錯原因，DEBUG 模式下，console控制台會列印
        }
    });
}

基於 callback 傳回值情境

// callback 傳回值情境
function onShare() {
    const {
        $$_ref_share_url,
        $$_ref_share_id
    } = window.aplus.getRefShareParams();

    window.aplus.requestShareParams({
        title: '分享活動頁',
        path: '/pages/share/shareCampaign?utm_test=test',
        campaign: '這是一個分享活動',
        shareId: $$_ref_share_id
    }, (res) => {
        const { $sid } = res;
        if ($sid) {
            window.aplus.record("$$_share", "CLK", {
                $$_share_title: "這是一個分享標題",
                $$_share_id: $sid,
                $$_share_campaign_id: "這是一個自訂分享活動",
                $$_share_type: "使用者自訂分享目標平台",
                $$_share_url: "這是一個分享url"
            });
        } else {
            console.log("分享參數擷取失敗"); //具體報錯原因，DEBUG 模式下，console控制台會列印
        }
    });
}

9.2 請求分享參數

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

版本

H5 sdk v2.2.0版本及以上

功能

請求用於構建分享鏈需要的分享 id

請求參數

參數

類型

預設值

含義

備忘

params

Object

無

分享參數擷取 API

必傳參數

url：分享頁面路徑。String 類型，預設值為location.href

選擇性參數

campaign：分享活動標識。String 類型，預設值為 undefined，最大長度為 4*1024 個字元

title：分享標題。String類型，預設值為 undefined，最大長度為 4*1024個長度

shareId：來源分享Id。String 類型，預設值為 undefined

callback

Function

undefined

針對不支援 promise API返回的回呼函數

如果 callback 參數不傳，分享參數擷取 API 預設以 promise 形式返回 result.

如果 callback 參數有值，並且是一個回調參數，則通過回呼函數返回分享參數擷取 API 的請求結果

返回參數

如果請求參數不包含 callback，則返回 Promise.resolve(Object result);

參數	類型	預設值	含義	備忘
$sid	String	undefined	分享Id，代表分享主體分享行為的唯一標識	無

如果請求參數含有 callback，返回 Object result

參數	類型	預設值	含義	備忘
$sid	String	undefined	分享Id，代表當前分享主體分享行為的唯一標識	無

調用樣本

基於 promise 傳回值情境

// promise 傳回值情境

function onShare(options) {
    const promise = window.aplus.requestShareParams({
        title: '分享活動頁',
        path: 'https://www.taobao.com/productId?utm_test=test',
        campaign: '這是一個分享活動',
        shareId: "這是一個來源分享id"
    }).then(res => {
        const { $sid } = res;
        if ($sid) {
            window.aplus.record("$$_share", "CLK", {
                $$_share_title: "這是一個分享標題",
                $$_share_id: $sid,
                $$_share_campaign_id: "這是一個自訂分享活動",
                $$_share_type: "使用者自訂分享目標平台",
                $$_share_url: "這是一個分享url"
            });
        } else {
            console.log("分享參數擷取失敗"); //具體報錯原因，DEBUG 模式下，console控制台會列印
        }
    });
}

基於 callback 傳回值情境

function onShare() {
    window.aplus.requestShareParams({
        title: '分享活動頁',
        path: '/pages/share/shareCampaign?utm_test=test',
        campaign: '這是一個分享活動',
        shareId: "這是一個來源分享id"
    }, (res) => {
        const { $sid } = res;
        if ($sid) {
            window.aplus.record("$$_share", "CLK", {
                $$_share_title: "這是一個分享標題",
                $$_share_id: $sid,
                $$_share_campaign_id: "這是一個自訂分享活動",
                $$_share_type: "使用者自訂分享目標平台",
                $$_share_url: "這是一個分享url"
            });
        } else {
            console.log("分享參數擷取失敗"); //具體報錯原因，DEBUG 模式下，console控制台會列印
        }
    });
}

9.3 上報分享事件

通過預置事件編碼 $$_share 上報分享事件，事件類型為點擊事件（CLK）

樣本：

window.aplus.record("$$_share", "CLK", {
    $$_share_title: "這是一個分享標題",
    $$_share_id: "通過請求分享參數API擷取到的分享ID",
    $$_share_campaign_id: "這是一個自訂分享活動",
    $$_share_type: "使用者自訂分享目標平台",
    $$_share_url: "這是一個分享url"
});

請注意：喚起的連結需要攜帶key為"$sid"，value為分享Id的參數，如：https://example.aliyun.com/path/to/content?$sid=123456"

H5連結喚起其他應用樣本：

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

window.aplus.requestShareParams({
    title: '分享活動頁',
    path: '/pages/share/shareCampaign?utm_test=test',
    campaign: '這是一個分享活動',
    shareId: $$_ref_share_id
}, (res) => {
    const { $sid } = res;
    if ($sid) {
        window.aplus.record("$$_share", "CLK", {
            $$_share_title: "這是一個分享標題",
            $$_share_id: $sid,
            $$_share_campaign_id: "這是一個自訂分享活動",
            $$_share_type: "使用者自訂分享目標平台",
            $$_share_url: "這是一個分享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("分享參數擷取失敗"); //具體報錯原因，DEBUG 模式下，console控制台會列印
    }
});