全部产品
阿里云办公

进阶场景

更新时间:2018-07-13 09:28:38

本文介绍了一些更复杂场景中的 SDK 用法。

SPA 页面上报

SPA(Single Page Application)即单页面应用。在此类型的应用中,页面只会刷新一次。传统的方式只会在页面加载完成后上报一次 PV,而无法统计到各个子页面的 PV,也无法让其他类型的日志聚类到对应的子页面。

SDK 提供了 SPA 页面的两种处理方式:

1. 开启 SPA 自动解析

此方法适用于大部分以 URL hash 作为路由的单页面应用场景。

在初始化的配置项中,设置enableSPAtrue,即会开启页面的 hashchange 事件监听(触发重新上报 PV),并将 URL hash 作为其他数据上报中的 page 字段。

enableSPA相配套的还有<Function>parseHash(参见 SDK 配置项)。

2. 完全手动上报

此方法可用于所有的单页面应用场景。如果第一种方法无法满足,则可用此方法。

SDK 提供了setPage方法来手动更新数据上报时的 page name。调用此方法时,默认会重新上报页面 PV。

示例

  1. // 监听应用路由变更事件
  2. app.on('routeChange', function (next) {
  3. __bl.setPage(next.name);
  4. });

数据预上报

场景一:在页面刚刚加载时,有一些数据需要上报,此时 SDK 可能还未完成初始化(或者不确定是否已完成初始化)。

场景二:在应用的初始化逻辑中调用setConfig方法,但由于 SDK 是异步加载的,此时可能还未加载完成。

解决办法:SDK 在__bl对象上增加了一个pipe属性,用于将预调用的信息缓存到此变量中。

例如:

  1. __bl.pipe = [
  2. // 将当前页面的html也作为一个api上报
  3. ['api', '/index.html', true, performance.now, 'SUCCESS'],
  4. // SDK初始化完成后即开启SPA自动解析
  5. ['setConfig', {enableSPA: true}]
  6. ];

如果只上报单条数据,也可以直接写成:

  1. __bl.pipe = ['msg', '我是另一个普通的消息'];

其中数组的第 0 个表示方法名,后面依次是入参。SDK 初始化完成后,就会将预先挂载到 window.__bl.pipe 上的方法及参数依次调用。

注意:在 SDK 初始化完成前,如果多次设置 __bl.pipe 的值,只会以最后一次为准。

pipe也可以用于 SDK 初始化完成后调用(支持 IE9 及以上)。如果不能确定 SDK 是否初始化完成,又不想添加太多判断逻辑,则可以使用此方式。

示例:

单页面应用中,设置autoSend: false后,在应用初始化后上报第一次 PV,此时并不确定 SDK 是否初始化完成。

  1. // 设置页面name为'homepage',并且上报PV
  2. __bl.pipe = ['setPage', 'homepage'];
本文导读目录