Tracker 跟踪者

# 立刻开始

由于不同平台底层 API 的差异性，以及Tracker自身功能的通用性。因此，TrackerSDK 采用分层的方式实现。底层 TrackerCore 只包含跟平台无关的基础功能，针对不同平台，分别基于 TrackerCore 基础类型进行继承，扩展出了适用于浏览器平台的 TrackerWeb 和 小程序平台的 TrackerMini

不同平台的 SDK 版本其 API 是几乎相同的，只是增加了一些可配置项。例如 Web 平台 SDK 你可以选择是否打开 SDK 内置的错误监听功能

下面分别介绍各版本的接入方式。接入完成后，可以进入 Dashboard (opens new window) 管理控制台进行事件追踪和相关数据查看。

# 申请 appId

登录 Dashboard (opens new window) 控制台，进入 项目管理 菜单，创建一个新的应用，获取 appId。

同时注意，由于 SDK 进行请求时的域名为 api.tracker.limefe.com，进行了 CORS白名单控制。因此，目前您本地测试时，需使用 localhost:8xxx 或 api.tracker.limefe.com 的子域名进行测试联调。正式环境若是其他域名，需提前添加 CORS 白名单。

# 项目中引入 SDK

  • webpack 方式使用
tnpm install @limefe/tracker-sdk

// web版本
import TrackerWeb from '@limefe/tracker-sdk/dist/web/tracker'
// core版本
import TrackerCore from '@limefe/tracker-sdk/dist/core/tracker'
// 小程序版本
import TrackerMini from '@limefe/tracker-sdk/dist/mini/tracker'

# 创建 Tracker 实例

const options = {}
const tracker = new TrackerCore(options)

注意: Tracker 有一个 env 环境的概念。通常情况下我们使用的都是 production 环境，因此无需关心。但如果您使用的是 webpack 等打包工具，如果你通过 DefinePlugin 设置了 NODE_ENV 环境变量，则 Tracker 会采用该变量进行编译。此时你可以通过 Tracker 构造函数的 options 强制指定 env 参数如下:

options = {
    env: 'prodution'
}
new Tracker(options)

# 设置页面上下文基础参数

tracker.set('appId', 'abcdef') // appId是必填的
tracker.set('userId', '123456') // userId也是必填的

完成以上 2 个参数设置后，Tracker 所有设置都已就绪。

tips:

Tracker 是以 上下文 为单位记录访问的。如果 Tracker 运行在一个传统的 HTML 直出页面当中，此时每次切换页面等于 Tracker 重新初始化，因此 一个页面等于一个上下文。而如果你是处于 SPA 单页应用当中，而又期望在切换单页路由时也切换一个上下文，那么你需要在路由切换时主动调用 resetContext 方法 来生成一个新的页面上下文。否则，你在整个单页应用期间的所有事件都会记录在 同一个页面访问上下文 当中。

# 调用 send 函数发送事件

const eventInfo = {
    type: 'pageEnter',
    name: '页面进入',
    params: {
        duration: 230
    }
}
tracker.send(eventInfo)

Tracker 中的事件信息包含有 3 个固定的参数 type name 和 params。

  • type 表示事件类型。这个是枚举值，包括 pageEnter click error ajax console 和 json 。不同的事件类型意味着不同的事件params结构，也意味着在管理控制台用不同的形式的 UI 展现
  • name 表示事件名称。这决定了管理控制台每个 事件节点 的名字。如果不传入该字段，则使用 type 来展现事件名
  • params 表示事件的具体内容。对于内置 type (如pageEnter、click这些) 都有约定好的 params 数据结构；而对于自定义的上报，可以搭配 json 这个事件类型，在params传入任何对象。 params 参数在管理控制台会以 JSON折叠块 的方式展示 UI。

这里的最佳实践是: 当你期望上报的事件属于 pageEnter click error ajax console 这几个事件类型，则使用这几种 type；如果你上报的事件信息并不属于以上几种类型，则使用 json 类型，然后在 params 字段上任意填入自己事件相关信息即可。

内置事件类型的 params 数据结构，请查看 事件类型 文档

# Network 面板确认

sdk 接入完毕后，可以打开自己的页面确认下是否有 getmode、report 接口的请求发出，且 report 接口返回的响应是 {status: 0, msg: "ok"}

# dashboard 控制台查看

接入就此完毕，大功告成! 此时可以登录 tracker 控制台 (opens new window)，输入 userId 查看是否已经可以查到用户操作行为的时间线等信息

dashboard

Last Updated: 10/11/2020, 10:04:46 PM

SDK API →