下载 SDK 脚本，解压后放置在小程序中的 hxt/ 目录中。
在 app.js 文件的开头引入 SDK 主文件:
// ESM
import "./hxt/hxt";
// CommonJS
// require("./hxt/hxt");
通过配置文件 hxt/hxt.conf.js 设置 SDK 的一些必要参数:
{
appName: '{APP_NAME}', // 应用名称
appVersion: '{APP_VERSION}', // 应用版本
appCode: '{APP_ID}', // 小程序的AppID
usingPlugins: false, // 如果使用了小程序插件，应设置为 true
requireOpenid: false, // 是否必须设置了 openid 才监测，默认为 false，即无需 openid 即可监测，但用户数可能会不够精准。（建议开启，打开小程序时静默获取openid后调用 hxt.identify 接口标识用户）
autoTrackEvents: false, // 是否开启事件自动采集，默认为 false，即不开启事件自动采集
module: {
basic: {
apiUrl: 'https://t.hypers.com.cn/hxt', // 小程序 SDK 上报地址
appKey: '{APP_KEY}', // Mobile Analytics 管理平台获取的 APP Key
shortUrlApi: 'https://t.hypers.com.cn/goa' // 短链接服务地址
},
}
}
注意：
requireOpenid 选项可以提高监测数据和报告的准确性，启用后监测请求将等到获取openid后才会上报，获取前的动作暂暂存至本地。但务必要注意的是，如启用 requireOpenid 选项，我们建议静默获取 openid ，且在获取openid后立刻调用 hxt.identify({ openid })，避免部分游客的监测数据缺失。至此，最基本的集成已完成，SDK 已支持自动上报应用的开启、页面切换。如果启用了 autoTrackEvents，SDK 还将自动采集上报小程序中的事件回调，详见自动采集事件。
除了基本的应用打开和页面访问的采集外，SDK 还支持自定义的事件的统计分析，例如可以上报某个按钮的点击事件。
在应用的任何地方，都可以通过通过微信小程序的实例对象 App 来取得 SDK 的实例 app.hxt，并调用 SDK 提供的接口。
我们以一个按钮点击事件为例，调用 sendAction 接口发送自定义事件，示例如下：
Page({
buttonEvent() {
// 获取微信小程序实例
const app = getApp();
// 可以根据需要选择以下几种传值方式
// 1. 仅上报事件名称
app.hxt.sendAction('eventName');
// 2. 带自定义属性
app.hxt.sendAction('eventName'， {
prop1: 'propValue1',
prop2: 'propValue1'
});
}
});
注意：
SDK 中默认使用随机生成的 UUID 对设备进行唯一标识，若需要统计登录用户或会员这类的指标，需要使用更准确的用户标识方法。用户在微信小程序在登录时，可以获得 openid 作为用户唯一标识，从而更准确的识别用户身份。
调用 hxt.identify 接口设置用户唯一标识，示例如下：
// 调用小程序的 identify 接口，设置 openid, unionid(若存在)
app.hxt.identify({
openid: 'ohEjxfakmgpilre',
unionid: 'erlipgmkafxjEho',
});
用户唯一标识会被小程序缓存，若用户登出，需要传 null 清除（注意不要指定参数）
app.hxt.identify(null)
hxt.identify 仅用于设置用户的 openid 和 unionid，如果想进一步针对用户属性做分析，可以使用 hxt.setUserInfo 接口设置用户信息。
// 调用小程序的 setUserInfo 接口，设置用户信息
app.hxt.setUserInfo({
cust_id: "100", // 用户唯一标识
mail: "zhangsan@example.com",
gender: "男",
login_type: 'client'
// ... 字段可以扩展
});
同用户唯一标识一样，用户信息也会被小程序缓存，若用户登出，需要传 null 清除用户信息（注意不要指定参数）：
app.hxt.setUserInfo(null);
当 hxt.config.js 中开启了 autoTrackEvents 选项，SDK 会自动采集 wxml 中绑定的事件。
自动采集默认会记录事件触发的页面、事件、组件等信息，你也可以通过给组件设置 dataset 的方式，向自动采集事件传入额外的属性。例如：
<button data-good-id=“1” bind:tap=“buy”>Buy</buy>
在自动上报 buy 回调时，会携带 goodId: 1 属性。
有时，开发者希望在某个页面内发生的所有监测请求携带一些公共的自定义属性，你可以在 Page 对象上添加 hxtPageProps 对象来实现这一点。
Page({
// ...options,
hxtPageProps: {
pageName: '首页' // 监测请求将携带 p_pageName 自定义属性
}
})
hxt.disableTrackType(type)停用指定类型的监测请求。
// 停用页面活动监测
hxt.disableTrackType('activity');
// 停用页面活动监测和自定义事件监测
hxt.disableTrackType(['activity', 'act']);
hxt.disableAllTrackTypes()停用所有类型的监测请求。
hxt.disableTrackShare()停用监测“分享”事件。
hxt.enableTrackType(type)启用指定类型的监测请求。
// 仅启用页面活动监测
hxt.disableAllTrackTypes();
hxt.enableTrackType('activity');
// 启用页面活动监测和自定义事件监测
hxt.enableTrackType(['activity', 'act']);
hxt.enableAllTrackTypes()启用所有类型的监测请求。
hxt.enableTrackShare()启用监测“分享”事件。
hxt.disableTrackQuery()监测请求中不包含页面 query 参数。注：关闭该项将影响utm参数采集，即无法准确知晓用户来源，仅可以根据场景值识别。
hxt.enableTrackQuery()监测请求中包含页面 query 参数。
在 main.js 中引入 hxt，注意要在 Vue 之前引入。
import './hxt/hxt';
import Vue from 'vue';
在 main.js 中引入 hxt。
import './hxt/hxt';
hxt 允许 <web-view> 中的网页通过 js 调用小程序中的 hxt，需用到 hxt-webview.js SDK，集成方法如下。
根据 <web-view> 文档，首先在需要调用 hxt 的网页中引入 JSSDK 1.3.2
hxt-webview.js<script src="path/to/weixin-jssdk.js"></script>
<script src="path/to/hxt-webview.js"></script>
<web-view> 组件绑定 bindmessage 事件<web-view src="..." bindmessage="handleWebviewMessage"></web-view>
Page({
handleWebviewMessage(e) {
app.hxt.onWebviewMessage(e)
}
})
网页中引入 hxt-webview.js 后，即全局挂载 hxt 对象，它具有与小程序中的 hxt 相同的方法和参数列表。
目前 hxt-webview.js 已支持的接口有 hxt.identify 和 hxt.sendAction。
<script src="path/to/weixin-jssdk.js"></script>
<script src="path/to/hxt-webview.js"></script>
<script>
// ...
hxt.identify({ openid });
hxt.sendAction(actionName, props);
</script>
Webview SDK 使用 wx.miniProgram.postMessage 接口来与小程序内的 hxt 进行通信。如果你的小程序业务本身也使用 postMessage，有时可能会将 hxt 发送的消息当作业务消息处理，从而引发错误。你可以通过判断消息对象上的 type 字段值为 invokeHxt 来区分 hxt 发送的消息。
handleWebviewMessaeg(e) {
app.hxt.onWebviewMessage(e)
const myMessages = e.detail.data.filter(message => {
return !message.type || message.type !== 'invokeHxt'
})
}
检查是否在小程序后台正确添加了 hxt 的请求域名（默认为 https://t.hypers.com.cn）。详见微信开放文档。
如果此时小程序控制台报错：[non-writable] write App is not alloed when using plugins at app.json.(使用小程序插件时可能出现此情况)，请使用 SDK 中导出的 hxt.App 和 hxt.Page 构造器代替小程序原生的 App 和 Page：
// app.js
import hxt from "./hxt/hxt"; // 或 const hxt = require("./hxt/hxt");
// 不再使用原生的 App
// App({
// ...options
// })
// 使用 SDK 提供的 App
hxt.App({
// ...options
});
// page.js
// import hxt from '/hxt/hxt'
// 如果不想重复引入 hxt，你也可以从 app.hxt 上获取 SDK 导出的 Page 构造器
getApp().hxt.Page({
// ...options
});
并在配置 SDK 时设置 usingPlugins: true，详见配置 SDK 一节。
在集成了小程序插件的情况下，需要使用 hxt 导出的 App 和 Page 构造器。
如果需要同时使用除 hxt 以外的其他监测 SDK，并且其文档中也要求使用它们导出的构造器，可使用 hxt.useApp() 和 hxt.usePage() 方法来进行兼容。
// app.js
import hxt from "./hxt/hxt";
import thirdPartySDK from "./utils/3rdPartySDK";
// 传入第三方 SDK 文档中要求使用的 App 构造器
hxt.useApp(thirdPartySDK.App);
// 传入第三方 SDK 文档中要求使用的 Page 构造器
hxt.usePage(thirdPartySDK.Page);
// 最终创建 App 和 Page 时仍然使用 hxt 提供的构造器
hxt.App({
// ...options
});
视频跟踪功能以小程序 SDK 的扩展形式提供，使用小程序 SDK 提供的视频跟踪功能，需要在 SDK 中开启视频监测相关的配置。
视频跟踪功能配置示例如下：
{
appName: '', // 应用名称
appVersion: '', // 应用版本
appCode: '', // 小程序的AppID
locationAccessible: false, // 是否获取位置信息，默认为关闭
module: {
basic: { // 如果不需要小程序 SDK 提供的页面跟踪功能，需要移除掉 basic 对应的配置
apiUrl: 'https://t.hypers.com.cn/hxt', // 小程序 SDK 上报地址
appKey: ""， // Mobile Analytics管理平台获取的 APP Key
},
player:{ // 配置视频跟踪
apiUrl: 'https://t.hypers.com.cn/hvt', // 小程序 SDK 以插件的形式提供，因此需要单独配置
appKey: ""， // Video Analytics管理平台获取的 APP Key
}
}
}
视频初始化，需要传入视频相关信息：
const player = app.hxt.createPlayer({
v_id: "abc",
len: 10000
});
{
v_id:String,
len:Number,
params:{
...
}
}
注意：
| 名称 | 数据类型 | 必填 | 注释 |
|---|---|---|---|
| v_id | String | Y | 媒体视频 ID |
| len | Number | N | 视频总长度 (单位:秒) |
在创建视频以后，使用以下接口分别对视频的做跟踪。
player.start({
// 用于跟踪播放的开始
spend: 0,
progress: 0
});
player.heartbeat({
// 用于播放过程中发送心跳
spend: 20,
progress: 25
});
player.end({
// 用于跟踪播放的结束
spend: 45,
progress: 50
});
{
spend: 20, // 视频播放时长
progress: 25, // 视频播放进度
params:{ // params 为自定义参数，可选
...
}
}
注意：
| 名称 | 数据类型 | 必填 | 注释 |
|---|---|---|---|
| spend | String | Y | 视频播放时长 |
| progress | Number | N | 视频播放进度 |
| upid | Number | String | N | 视频播放进度 |
| lag_ts | Number | N | 用户播放直播视频时间和当前实际直播时间相比的偏移时间 |
现在有很多视频媒体在视频上做了许多交互功能，比如：点赞、发弹幕、直播视频的献花、视频上点击了广告等等, 我们提供了对些用户行为进行跟踪的方法。
player.sendAction('eventName'， {
prop1: 'propValue1',
prop2: 'propValue1'
});
视频设置用户唯一标识的方法与小程序 SDK 相同，均为调用 app.hxt.identify(identInfo)，具体用法参考小程序 SDK 文档。