QT Web&H5 SDK集成文档。

快速集成

登录及创建组织与应用

创建组织

创建应用

去集成SDK

接入SDK

当您得到集成SDK代码地址以后，在页面head标签内加入集成代码，确保aplus_queue不被污染
如果在内网测试环境或者poc阶段，主域名可能还没有申请下来HTTPS证书的场景下，如果出现跨域问题，可离线下载SDK后，本地集成使用

<head>
...
  <script>
   (function(w, d, s, q, i) {
     w[q] = w[q] || [];
     var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
     j.async = true;
     j.id = 'beacon-aplus';
     j.src = 'https://d.alicdn.com/alilog/mlog/aplus/qt平台颁发的sdkId.js';
    //或者
    //j.src = "sdk离线下载后的本地路径";
     f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'aplus_queue', 'qt平台颁发的sdkId');

    //集成应用的appKey
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['appKey', 'xxxxxxx']
    })
    //如果是私有云部署还需要在上面那段JS后面紧接着添加日志域名埋点
    //通常私有云日志服务端域名类似于：quickaplus-web-api.xxx.com.cn
    //收数域名可在 QT后台-管理控制台-采集信息-收数域名中查看
    //并且可以指定收数域名的协议，只支持https或http,端口号可选
    //eg.https://quickaplus-web-api.xxx.com.cn:可选端口号 
    //或 http://quickaplus-web-api.xxx.com.cn:可选端口号
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['aplus-rhost-v', 'quickaplus-web-api.xxx.com.cn']
    });
 /*********************************以下内容选填*********************************/

    //开启调试模式
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['DEBUG', true]
    });

  //设置页面编码和页面标题
  //如果是单页应用，设置pageConfig 【SDK v1.7.7以上】生效
    //若未设置pageConfig
    //页面编码默认为当前页面url，不带参数
    //页面标题默认为document.title
  aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['pageConfig', {
        hashMode: false, //默认为false 为History模式；开启哈希模式为true
        '/': {
          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路由的正则表达式 //（可选）校验动态路由
        }
      }]
    });
  //如果是多页应用，设置aplus-pagename 【SDK v1.8.1以上】生效
  aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['aplus-pagename', "test_pagename"]
    });
 /**********************************分割线********************************/
  </script>
</head>

元数据API（用于读/写SDK配置）

setMetaInfo

用于变更SDK的默认设置，API如下：

// API
aplus_queue.push({
 action: 'aplus.setMetaInfo',
  arguments: [metaName, metaValue]
});

// 示例 --- 设置全局属性
aplus_queue.push({
 action: 'aplus.setMetaInfo',
  arguments: ['globalproperty', {a: 1, b: 2}]
});
// globalproperty == {a: 1, b: 2}

字段含义：

metaName 为可配置的元数据项，可配置的 meta项见下文列表
metaValue 为对应的元配置项取值

appendMetaInfo

用于追加SDK的配置信息，仅适用于metaValue为数组类型或对象

目前支持的 metaName 及 metaValue见，附表1

// API
aplus_queue.push({
 action: 'aplus.appendMetaInfo',
  arguments: [metaName, metaValue]
});

// 示例 --- 追加全局属性
aplus_queue.push({
 action: 'aplus.appendMetaInfo',
  arguments: ['globalproperty', {c: 1, d: 2}]
});
// globalproperty == {a: 1, b: 2, c: 1, d: 2}

getMetaInfo

用于动态获取 SDK 的当前配置

// API
aplus.getMetaInfo(metaName);

// 示例 --- 获取全局属性
aplus.getMetaInfo('globalproperty');

全局属性

globalproperty字段为SDK预制的代表全局属性的metaName，设置了全局属性后，页面事件和自定义事件都会在日志协议内包含全局属性

SDK会自动解析URL参数中以“utm_”开头的参数，并将其写入到全局属性中

// 例如当前url为：https://www.example.com?utm_source=aliyun&utm_content=test
// 此时上报的事件中全局属性除了自定义参数外，还有以下两个参数：
{
  ...,
 globalproperty: {
   utm_source: 'aliyun',
    utm_content: 'test',
    ...customProps
  },
  ...
}

事件上报

quicktracking的事件体系分为页面（浏览）事件和自定义事件

页面（浏览）事件PV

sendPV 方法发送一条页面 PV 日志，其 API 定义如下：

aplus_queue.push({
 action: 'aplus.sendPV',
  arguments: [{ is_auto: false }, eventParams]
});

字段含义：

eventParams: 为本次页面事件的扩展参数，其取值为一个 JSON 对象（平铺的简单对象，不能多层嵌套），参数取值支持JavaScript值类型中string、number 、boolean，如果取值为空，传值""即可，数据端同学统一处理

注意：桥接Android环境时，因Java语言不支持JavaScript语言的boolean类型，需要将boolean类型更改为number类型，即 1 代表 true, 0 代表 false

开发者可通过在userdata部分传入page_name来自定义该条页面事件的页面编码，如果已通过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
        '/': {
          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路由的正则表达式 //（可选）校验动态路由
        }
      }]
    });
  //如果是多页应用，设置aplus-pagename 【SDK v1.8.1以上】生效
  aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['aplus-pagename', "test_pagename"]
    });
 /**********************************分割线********************************/
  </script>
</head>

自动PV

无需代码调用，SDK默认选择采集页面浏览事件并上报。

SDK默认提供自动页面事件采集能力，如果需要关闭，需设置 aplus-disable-apv = true 或者 aplus-waiting = MAN（后续将逐渐废弃），示例如下：

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

或

// 关闭自动pv （待弃用）
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-waiting', 'MAN']
});

手动PV

需开发者主动调用sendPV发送页面事件，上报时机由客户自行决定

//示例
aplus_queue.push({
  'action':'aplus.sendPV',
  'arguments':[{ is_auto: false}, {
    //保留字段
    page_name: '自定义当前事件的页面编码',
    page_title: '自定义当前事件的页面标题',
    //可选参数
    // 自定义PV参数key-value键值对
    x: 111,
    y: 222
  }]
});

pv事件一定要发送，否则影响页面浏览指标的计算！

自定义事件

自定义事件包括点击、曝光、其他等除页面事件以外的页面交互事件。其API定义如下：

//API
aplus_queue.push({
 action: 'aplus.record',
  arguments: [eventCode, eventType, eventParams]
});

eventCode：该字段为在Quicktracking管理平台注册的点击、曝光、其他等自定义事件的事件编码，仅支持英文字符串格式，最大长度128位字符
eventType：该字段代表事件类型，为字符串枚举类型，可枚举值如下：
- 'EXP'：曝光事件
- 'CLK'：点击事件
- 'OTHER'：其他事件
eventParams：该字段代表事件的自定义参数。
- 其取值为一个JSON对象（平铺的简单对象，不能多层嵌套），参数取值支持JavaScript值类型中string、number 、boolean，如果取值为空，传值""即可，数据端同学统一处理
- 调用 record api 上报参数时，该次赋值仅对该条事件有效
- 保留属性：uid, spm-url, spm-pre, spm-cnt, pvid, _
  dev_id, _
  anony_id, _
  user_id, _
  user_nick, _session_id
注意：桥接Android环境时，因Java语言不支持JavaScript语言的boolean类型，需要将boolean类型参数传递为更改为number类型，即 1 代表 true, 0 代表 false

保留属性不可作为自定义属性上报

点击事件

手动点击

开发者通过代码aplus.record主动埋点来采集的点击事件，示例如下：

//示例
aplus_queue.push({
  'action':'aplus.record',
  'arguments':['demoEventCode', 'CLK', {
    //保留字段
    page_name: '自定义当前事件的页面编码',
    page_title: '自定义当前事件的页面标题',
    // 如您无事件参数上报，传空对象即可
    x: '111',
    y: '222',
    z: 333,
  }]
});

自动点击

为减少开发者埋点工作量，SDK也支持通过配置部分信息，让SDK自动采集页面内的点击事件，示例如下：

SDK从v1.7.0版本以上开始支持

页面UI部分需更改：

<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
      };
    }
  }]
});

曝光事件

曝光事件用于采集普通流、长列表、轮播图等元素的曝光情况

手动曝光

开发者自己处理合适的曝光时机，然后调用SDK的API上报曝光事件，示例如下：

//示例
aplus_queue.push({
  'action':'aplus.record',
  'arguments':['demoEventCode', 'EXP', {
    //保留字段
    page_name: '自定义当前事件的页面编码',
    page_title: '自定义当前事件的页面标题',
    //事件属性
    x: '111',
    y: '222',
    z: 333
  }]
});

自动曝光

由SDK内部帮助开发者处理曝光时机，并自动采集元素曝光行为，示例如下：

SDK 从v1.7.0版本以上开始支持

默认曝光规则是当元素部分有30%的面积出现在视口内，并且出现时长超过500ms及以上

页面UI部分需更改：

<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通过预制事件编码$$_user_profile上报用户属性，事件类型为其他事件

在上报用户属性之前，需要先设置_user_id上报用户账号，否则QuickTracking流量分析对用户属性不会进行关联计算，示例如下：

注意：SDK没有对_user_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", null]
  });
};

确认上报了用户账号ID后，上报用户属性示例如下：

//示例
aplus_queue.push({
  action:'aplus.record',
  arguments:['$$_user_profile', 'OTHER', {
    name: 'sss',      //用户属性1
    gender: 'male',   //用户属性2     
    class: '3',       //用户属性3   
  }]
});

字段含义如点击事件，其中eventType值为OTHER，不可更改

调用$$_user_profile之前，请确保调用setMetaInfo设置 _user_id，否则用户属性不会进行关联计算

应用唤起事件

在页面唤起app时，可以使用该事件做统计

//示例
aplus_queue.push({
  action:'aplus.recordAppLink',
  arguments:[{
    targetAppKey: '64632267',  // 必填，要唤起的应用appKey
    custom1: 'custom1', // 选填，自定义参数
    ...
  }]
});

全埋点

全埋点采集的事件

自动页面事件，见章节事件上报 - 页面事件 - 自动pv
自动点击事件，见章节事件上报 - 自定义事件 - 点击事件 - 自动点击
自动曝光事件，见章节事件上报 - 自定义事件 - 曝光事件 - 自动曝光
控件的点击事件，默认采集 a\button\input\textarea 这4个元素的点击事件，同时支持扩展

全埋点开关

通过设置aplus-autotrack-enabled 为true，开启全埋点功能，默认为关闭

aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-autotrack-enabled', true] //开启全埋点功能
});

全埋点控件配置

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
  }]
});

注：element_capture_enable 从SDK1.9.8版本开始支持，默认值为false（冒泡模式）

全埋点事件的属性上报

同自动事件的属性上报，借助html数据属性上报

<body>
  <div id="root">
    <!-- 如果需要传递参数，通过html的数据属性传递 data-*的方式 -->
    <button data-aparam="1">测试点击</button>
  </div>
</body>

单个控件关闭全埋点事件上报

如果期望关闭某个控件的事件上报，通过添加控件属性aplus-autotrack-off为true关闭上报

<body>
  <div id="root">
    <!-- 如果需要传递参数，通过html的数据属性传递 data-*的方式 -->
    <button data-aparam="1" aplus-autotrack-off="true">
      配置了aplus-autotrack-off的组件不上报
    </button>
  </div>
</body>

单个控件自定义事件编码

<button data-clk-logkey="demoEventCode">通过data-clk-logkey自定义事件编码</button>

全埋点本地配置开关

关闭自动页面事件采集，默认为false，状态为允许自动页面事件采集

aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-disable-apv', true] //关闭页面事件自动采集
});

可视化埋点及分析

可视化埋点

确认SDK是否支持Web可视化埋点
接入SDK后，追加配置地址信息

aplus_queue.push({
 action: 'aplus.setMetaInfo',
  arguments: ['aplus-vt-cfg-url', '<已发布的配置CDN-JSON地址>']
});

注：配置地址信息必须在管理后台-可视化埋点-配置埋点发布后才能获得，例如：https://alidt.alicdn.com/alilog/vt/web/34338956/12102105279051.json

可视化分析

集成了可视化埋点，不需要额外做集成可视化分析的操作

注：必须使用自动点击、自动曝光上报数据

确认SDK是否支持投屏，不支持投屏的SDK无法进行可视化分析
确认SDK版本是否支持自动点击和自动曝光，不支持自动点击和自动曝光无法进行可视化分析
配置SPM
1. 配置页面级别
  spm（spmB）
  1. 通过给body标签添加自定义属性data-pagename

<body data-pagename=${页面编码}></body>

手动调用API设置spmB

aplus_queue.push({
    action: 'aplus.setPageName',
    arguments: [${页面编码}]
});

自动点击配置
spm（spmC、spmD）通过每一自动点击配置项的spmC和spmD属性来配置spm

aplus_queue.push({
  action:'aplus.setMetaInfo',
  arguments:['aplus-auto-clk',[{
    cssSelector:'.header',
    logkey:'banner-clk',
    spmC:"header", 
    spmD:"banner" 
  }]]
});

自动曝光配置
spm（spmC、spmD）通过每一自动曝光配置项的spmC和spmD属性来配置spm

aplus_queue.push({
  action:'aplus.setMetaInfo',
  arguments:['aplus-auto-exp',[{
    cssSelector:'.header',
    logkey:'banner-exp',
    spmC:"header", 
    spmD:"banner" 
  }]]
});

自定义属性配置
spm（spmC、spmD）

// data-spmc（spmC）
// data-spmd（spmD）
<body data-pagename=${页面编码}>
  <div data-spmc="c111">
    <a href="链接1" data-spmd="d1" />
    <a href="链接2" data-spmd="d2" />
  </div>
  <div data-spmc="c222">
    <a href="链接3" data-spmd="d1" />
    <a href="链接4" data-spmd="d2" />
  </div>
</body>

与QuickAudience打通

小程序端

// webview.js
Page({
  data: {
    url: ''
   },
  onLoad: function (options) {
    let URL = 'https://example/demo.html' 必填项
    //如果是异步获取,需配合BLOCK/START使用，或增加延时获取
    let openid = '业务方接口获得的openid';
    this.setData({
      url: URL + `?od=${openid}`;
    });
  }
});
// webview.wxml
<web-view src="{{ url }}"></web-view>

H5端

<head>
  <script>
  	... 
		//quicktracking web sdk集成代码
		...
    //getQueryString函数目前需要开发者自己实现
    var openid = getQueryString('od');
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['openid', openid]
    });
  </script>
</head>

H5内嵌App、小程序

内嵌App

双发

需要先集成QuickTracking Native SDK，然后Web JS SDK 默认会将请求日志同时发送给Native和Web通道各一份。

场景1：只通过Web采集数据，分析口径都走Native

这种场景下，需要将颁发给native app的appkey赋值给Web SDK，通过设置

<script>
...
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['appKey', '同app相同的appKey']
})
...
</script>

优点：

数据都流向同一个native app端的appkey，web端的新增用户、账号数据能够以app纬度进行使用

缺点：

1.设备ID、事件属性无法打通

2.session计算会受影响，因为不同端session计算逻辑不同

场景2：既分析Web数据，又分析Web带给的Native数据

同时在QuickTracking申请Web应用appkey 和 native应用的appkey然后，然后将Web端的appkey赋值给web sdk,数据同时发送给app 和 web。

<script>
...
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['appKey', 'web应用的appkey']
})
...
</script>

优点：

单独分析各端的数据都会更准确

缺点：

数据会双发，造成一定的流量成本

单发

如果只想发给native sdk，需要配置

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

这样就会关闭Web 采集通道，采集日志仅通过native采集通道上报。实现设备ID、appkey及事件属性的一致，实现H5和APP数据天然融合分析

内嵌小程序

由于小程序本身的限制，小程序不支持桥接的逻辑，为了实现小程序与H5的数据打通，需要

将小程序的匿名ID（openid 或 unionid）通过URL的方式传递给H5，然后H5端将其设置为设备ID，达到统一用户标识的目的
将小程序主体的QuickTracking 颁发的appKey，传递给H5，实现数据链路融通

小程序端

// webview.js
Page({
  data: {
    url: ''
   },
  onLoad: function (options) {
    let URL = 'https://example/demo.html' 必填项
    //如果是异步获取,需配合BLOCK/START使用，或增加延时获取
    let anony_id = getApp().aplus.aplus.getMetaInfo('_anony_id');
    let appkey = getApp().aplus.aplus.getMetaInfo('appKey');
    this.setData({
      url: URL + `?anony_id=${anony_id}&ak=${appkey}`;
    });
  }
});
// webview.wxml
<web-view src="{{ url }}"></web-view>

H5端

首先参照文档章节1集成SDK，然后目前需要由开发者主动获取URL参数来得到小程序端的唯一标识和小程序主体的appKey。

判断当前页面环境，若处于小程序中，则解析页面地址中的参数，获取appKey、openid等参数值
调用setMetaInfo 主动覆盖 _dev_id 和 appKey

参考代码如下

<head>
  <script>
  	... 
		//quicktracking web sdk集成代码
		...
    //getQueryString函数目前需要开发者自己实现
		var dev_id = getQueryString('anony_id');
		var appKey = getQueryString('ak');
		aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['_dev_id', dev_id]
    });

		aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['appKey', appKey]
    });
  </script>
</head>

热力图

热力图能力开关

SDK默认关闭热力图能力，如需打开通过如下配置：

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

或者

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

热力图事件采样率

热力图事件采样率最小支持千分位小数

aplus_queue.push({
    action: 'aplus.setMetaInfo',
    arguments: ['aplus-rate-ahot', 0.001] //热力图事件采样率 最小支持千分位小数
});

或者

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

埋点验证

控制台查看日志

开启DEBUG模式

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

埋点验证平台验证

通过QT埋点验证功能查看数据上报

通过chrome埋点验证工具验证

打开chrome浏览器，打开chrome插件市场，搜索QuickTracking，安装
Quick Tracking扩展

2.打开您应用的埋点页面，例如https://www.umeng.com/，打开chrome开发者工具

在QT域名处输入您自己的QT采集分析平台的地址，eg. POC环境
在应用域名处输入当前埋点页面的二级域名，eg.umeng.com
输入埋点应用的appKey，eg. 友盟官网appKey
登录QT平台后，根据部署形态复制并粘贴cookie Key和cookie value
点击登录

注意：请确保QT采集分析平台处于登录的状态，否则插件会登录失败

3.登录后，如果页面内有QuickTracking的埋点，可通过插件左侧的列表进行查看

附表1：metaName 及 metaValue 对应表

MetaName	元配置说明	metaValue赋值说明	版本支持情况
globalproperty	全局属性，设置全局属性后，此后自定义事件、PV均会携带上报	一级的key-value对象结构举例： aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['globalproperty', { a: 1, b: 2 }] });	v1.7.2
aplus-rhost-v	采集上报域名	xxxxx.com 从v1.9.9版本开始，支持协议指定如 https://xxxxx.com:端口号可选或 http://xxxxx.com:端口号可选	v1.7.0
_dev_id	设置设备唯一标识	默认为服务端下发的cookie，业务方也可以自定义的设备标识	v1.7.0
_user_id	设置userid	业务自定义的登录账号ID	v1.7.0
openid	设置openid	针对微信内h5场景	v1.9.13
_hold	发送Hold信号. 在 SDK整个生命周期内, _hold只能被设置一次	枚举类型, 可用值及说明如下： "START": 开启日志发送 "BLOCK": 阻止日志发送，可以在 BLOCK状态之前，完善发送日志前的准备工作	v1.7.0
aplus-waiting	日志发送时机设置	枚举类型，可用值及说明如下： "1": 等待6秒后尝试发送 "N": N取值为300-3000之间的整数值 , 所有日志指令在SDK初始化完成后的N毫秒内将被hold在指令队列, 直至N毫秒等待结束. "MAN": 取消自动化PV日志采集. 设置为MAN之后, 所有PV日志均需手动触发, 但其他类型的事件日志不受影响	v1.7.0
aplus-auto-exp	自动曝光埋点	[{ //（可选参数）相对滚动的节点class 'positionSelector': '.scroll-view', //（必选参数）待曝光节点class 'cssSelector': '.ball', //（必选参数）待曝光的事件id 'logkey': 'exp-event-id', //（可选参数）待曝光节点待上报的属性 //注：data-pagename为开发者需要自定义页面编码时上报的属性 'props': ['data-tracker', 'data-pagename'], }]	v1.7.0
aplus-auto-clk	自动点击埋点	[{ //（必选参数）待点击节点class 'cssSelector': '.ball', //（必选参数）待点击节点上报的logkey 'logkey': 'clk-event-id', //（可选参数）待点击节点待上报的属性 //注：data-pagename为开发者需要自定义页面编码时上报的属性 'props': ['data-tracker', 'data-pagename'], }]	v1.7.0
aplus-vt-cfg-url	可视化埋点配置	配置地址信息必须在管理后台-可视化埋点-配置埋点发布后才能获得，取值举例，例如：https://alidt.alicdn.com/alilog/vt/web/34338956/12102105279051.json SDK端配置： aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-vt-cfg-url', '已发布的配置地址'] }); 或者 <meta name="aplus-vt-cfg-url" content="已发布的配置地址">	v1.7.0
pageConfig	单页应用设置页面编码	//如果是单页应用，设置pageConfig 【SDK v1.7.7以上】生效 aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['pageConfig', { hashMode: false, //默认为false 为History模式；开启哈希模式为true '/': { 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路由的正则表达式 //（可选）校验动态路由 } }] });	v1.7.7支持pageConfig
aplus-pagename	多页应用设置页面编码	最长128位字符串，不支持中文，例如"test_pagename" //如果是多页应用，设置aplus-pagename aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-pagename', "test_pagename"] });	v1.8.1
aplus-jsbridge-only	桥接开关配置	默认双发，如果想只发给native，设置 aplus-jsbridge-only为true; 示例代码： aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-jsbridge-only', true] });	v1.7.7
aplus-heatmap-enabled	热力图开关	默认关闭，通过设置 aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-heatmap-enabled', true] }); 或者 <meta name="aplus-heatmap-enabled" content="1"> 打开	v1.8.1
aplus-rate-ahot	热力图事件采样率	默认全部采集，值为1，通过设置，示例： aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rate-ahot', 0.001] //支持到小数点后第3位 }); 或者 <meta name="aplus-rate-ahot" content="0.001"> 打开	v1.8.1
aplus-autotrack-enabled	全埋点开关	默认为关闭，取值false，如果想开启全埋点能力，设置 aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-autotrack-enabled', true] });	v1.9.0
aplus-autotrack-config	全埋点配置	全面点功能开启后，默认仅采集button\input\a\textarea等四个元素的采集，如需要支持其他控件的采集能力需设置： eg. 示例 aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-autotrack-config', { collect_tags: { li: true, //采集<li/>控件 img: true,//采集<img/>控件 svg: false,//关闭采集<svg/>控件，默认为关闭 div: true,//采集<div/>控件 span: true,//采集<span/>控件 path: true,//采集<path/>控件 p: true //采集<p/>控件 }, collect_input: true, //采集input框输入的内容，默认不采集 }] });	v1.9.0
aplus-disable-autoevent	是否自动采集自动点击、曝光事件	默认为关闭，取值为false，如需要关闭自动事件采集，需设置： aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-disable-autoevent', true] });	v1.9.0
aplus-auto-clk-userfn	自动点击前置回调函数	默认值为undefined，如需开启，需设置： aplus_queue.push({ action:'aplus.setMetaInfo', arguments: ['aplus-auto-clk-userfn', function(e， selector) { /** * e: DOM元素 * selector: 元素的选择器，取值为自动点击中传入的cssSelector * @return { userdata: 自定义属性对象 } */ }] })	v1.9.25
aplus-auto-exp-userfn	自动曝光前置回调函数	默认值为undefined，如需开启，需设置： aplus_queue.push({ action:'aplus.setMetaInfo', arguments: ['aplus-auto-exp-userfn', function(e， selector) { /** * e: DOM元素 * selector: 元素的选择器，取值为自动点击中传入的cssSelector * @return { userdata: 自定义属性对象 } */ }] })	v1.9.25

附表2：事件编码、事件属性key、页面编码、页面名称长度限制

内容	长度
事件编码	128位
事件属性key	128位
页面编码	128位
页面名称	128位