引入&初始化SDK

更新时间:
复制为 MD 格式

使用web/h5 SDK必备操作,缺少任一操作都会造成数据的缺失

SDK基本信息

SDK名称

版本号

md5

QuickTracking Web SDK

最新版本:2.4.25

更新日志:Web SDK 更新日志

qt_web.umd.js:cb036261b8f0996ef4dd3abfe26796bb

qt_web.cjs.js:f67788cee3bca2a357e9d7152a7d7e24

qt_web.iife.js:9562dd302dce901242ceb0c3efc3fc63

qt_web.amd.js:e5dd1994abc6c2da3096ef1bfc62e5db

操作说明

1.快速集成

QuickTracking后台,为每一个Web应用生成了专属的集成代码,可以根据产品内的引导进行集成。

产品路径

Quick Tracking「首页」-「管理控制台」,在「管理控制台」进入「组织列表」功能,组织列表展示当前已创建的组织,找到应用归属组织,点击「管理应用」功能跳转到「应用管理]页面,在已创建好的应用里点击去「去集成」。image

点击「去集成」按钮跳转到新页面可以获取专属集成代码,点击下一步按引导进入到「集成校验」,确认集成是否成功。image

2 集成代码明细

如果因为特定原因,无法抵达上述页面,需要观看文档才可以进行集成,具体集成代码如下:

2.1 参数准备

appkey:在应用列表中获取

收数域名:在“管理控制台-采集信息”模块中获取

SDK链接:在“管理控制台-采集信息”模块中获取

2.2 SDK引入&初始化

当您得到集成SDK代码地址以后,在页面head标签内加入集成代码,确保aplus_queue不被污染

(function(w, d, s, q) { 
 w[q] =w[q] || []; 
 var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s); 
 j.async=true; 
 j.id='beacon-aplus'; 
 j.src='SDK链接'; 
 f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'aplus_queue');

设置域名和appkey,以下代码紧跟SDK引入代码

//集成应用的appKey
aplus_queue.push({ 
    action: 'aplus.setMetaInfo', 
    arguments: ['appKey', '您的appkey'] 
});

//如果是私有云部署还需要在上面那段JS后面紧接着添加日志域名埋点
//通常私有云日志服务端域名类似于:xxx-web-api.xxx.com.cn, 具体域名在“管理控制台-采集信息”模块中获取
aplus_queue.push({ 
    action: 'aplus.setMetaInfo', 
    arguments: ['trackDomain', '您的收数域名']  
});

2.3 SDK初始化状态监听

SDK提供了初始化状态的监听,如果您有依赖SDK初始化完成上报埋点的场景,可以添加aplusReady的监听

示例代码:

aplus_queue.push({
    action: "aplus.aplus_pubsub.subscribe",
    arguments: ["aplusReady", function(status) {
        if (status === 'complete') {
        }
    }]
})

2.4 SDK获取事件上报状态的回调

SDK提供了获取事件上报状态的回调,如果您有依赖SDK获取事件上报状态回调的场景,可以开启POST模式并添加aplus-error-listener的监听

获取错误结果新增属性

取值及含义

默认值

aplus-post-mode

  • true :代表开启post模式开启post模式之后配置aplus-error-listener后即可获取错误信息

  • false : 代表关闭post模式,无法获取错误信息

false

aplus-error-listener

  • 错误回调callback

null

回调说明:

开启aplus-post-mode后可以通过aplus_error_listener属性或onError方法获取接口错误回调信息

错误回调参数

类型

取值及含义

err

string

network错误原因

data

string

上报内容

url

string

上报的url

示例代码:

// 开启 POST 模式
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-post-mode', true],
});
// 开启错误监听
aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus_error_listener', (err,data,url)=>{
    // err network错误码
    // data 上报内容
    // url 上报的url
  }]
});

二次上报:

方法

参数

retrySendData

url:上报的url

data:上报的data

示例代码:

//触发二次上报
aplus_queue.push({
  action: 'aplus.retrySendData',
  arguments: [url, data] //上报的url,上报的data
});
  
// 第二种
aplus.retrySendData(url, data)//上报的url,上报的data
  • 使用建议(非必要不使用):仅用于错误追溯,严禁用于核心业务逻辑上报,严禁在高频循环中使用。

  • 同步阻塞 :XHR 请求属于标准网络请求,非浏览器托管行为,即便异步也会占用网络资源。

  • 性能问题 :不具备 sendBeacon 的“离页发送”特性,页面关闭时请求会被中止,无法保证 100% 到达。

  • 网络环境依赖 :在网络环境较差的情况下,二次上报很可能仍然失败,无法解决根本问题。

  • 浏览器兼容性 :不同浏览器对 XHR 的实现可能存在差异,导致在某些浏览器中无法正常工作。

3 常见问题

3.1 如何获取离线SDK?

QuickTracking后台的“管理控制台-采集信息”模块中获取SDK链接后,点击SDK链接并“ctrl+s”或者“command+s”进行下载保存。