sf-tracker

这是瑞安市数字管理发展有限公司的埋点项目，用于在活动、应用中采集用户行为并报告。

安装

npm

npm i sf-tracker

yarn

yarn add sf-tracker

pnpm

pnpm add sf-tracker

基本使用

import { createTracker } from 'sf-tracker'
// 通过默认设置创建追踪器
// 默认设置如下
// 开启心跳，周期为一分钟
// url 为 https://track.rarb.cn/push
// 不启用 debug 和 mock
// 开启 Vue Router 自动记录，默认为全部记录（依然需要注入 router 实例，见“与 Vue Router 配合使用”）
// 开启 CP locationInfo 地理位置自动记录（依然需要注入 CP 实例，见“与天目云 SDK 配合使用”）
const tracker = createTracker({
  appId: '你的应用的 app id',
  userId: '目前登录用户的 user id'
})

// 手动发送
tracker.send({
  type: 'login',
  body: {
    user: 'user'
  }
})
// 手动发送（仅type）
tracker.send({
  type: 'login'
})

与 Vue Router 配合使用

import { createTracker } from 'sf-tracker'
import { createApp } from 'vue'
import { createRouter } from 'vue-router'

const app = createApp(App)
const router = createRouter(/* ... */)
// 创建追踪器
createTracker({
  appId: '你的应用的 app id',
  userId: '目前登录用户的 user id',
  // Vue Router 参数
  // 注册路由守卫
  vueRouter: router
})
// 现在会在切换路由时自动推送

与天目云 SDK 配合使用

import { createTracker } from 'sf-tracker'

// 假设你已经引入了 CP
window.CP.ready({
  // ...CP 初始化参数
  ready: (client_info) => {
    // ...其他事情
    // 创建追踪器
    const tracker = createTracker({
      appId: '你的应用的 app id',
      userId: '目前登录用户的 user id',
      // CP 参数
      // 注册 CP 实例
      CP: window.CP
    })
    // ...其他事情
  }
})

与浙里办 ZWJSBridge 配合使用

import { createTracker } from 'sf-tracker'

// 假设你已经引入了 ZWJSBridge
ZWJSBridge.onReady(() => {
  // ...其他事情
  // 创建追踪器
  const tracker = createTracker({
    appId: '你的应用的 app id',
    userId: '目前登录用户的 user id',
    // ZWJSBridge 参数
    // 注册 ZWJSBridge 实例
    ZWJSBridge: ZWJSBridge
  })
  // ...其他事情
})

• 获取 app id 请从管理员处获取
• user id 的获取见埋点初始化获取用户标识

追踪分享和推送

• 在 createTracker 的时候，会自动检查页面的 url 中有没有 share_from 和 push_from，如果有，则会将其采集。
• 在用户点击分享并生成 url 时，将信息添加到 share_from 查询参数中，如下

function makeShareUrl() {
  const userId = getUserId() // 比如要记录的是 user id
  return `https://yourapp.web.com/?share_from=${userId}#/hash`
  // ！！注意！！
  // 如果你的单页应用使用了 hash router，不要将 share_from 写在 # 后方
  // ！！以下是错误的！！
  // https://yourapp.web.com/#/hash?share_from=${userId}
}

• push_from 同理，你可以在推送 url 时附上推送号用于统计

function makePushUrl() {
  const pushId = getPushId() // 比如要记录的是 push id
  return `https://yourapp.web.com/?push_from=${pushId}#/hash`
}

自定义

import { createTracker } from 'sf-tracker'
const tracker = createTracker({
  appId: '你的应用的 app id',
  userId: '目前登录用户的 user id',
  // 指定发送 url
  url: 'https://mytracker.com',
  // 指定心跳周期，设为 false 关闭心跳，单位毫秒
  heartBeat: 2 * 60 * 1000,
  // Vue Router 相关的设置
  // 如果要传入其他设置，需要以对象的形式传参
  vueRouter: {
    router,
    // 设置是否自动记录 Vue Router 中的路由切换
    // 默认为 'all' ，记录全部路由，设置为
    // 设置为 'meta'，只有 route.meta.track 为 true 的路由会被记录
    // 设置为 'off' 不记录任何路由
    auto: 'meta'
  },
  // 天目云 CP 相关的设置
  // 如果要传入其他设置，需要以对象的形式传参
  CP: {
    CP: window.CP,
    // 设置是否自动记录位置信息，通过 CP.getLocationInfo 获取
    // 默认为 true
    getLocation: false
  },
  // debug 为 ture 时，会适当检查输入参数
  debug: true,
  // mock 为 ture 时，不在网络上发送记录而是在 console 中打印
  mock: true,
  // 默认情况下为单例模式，即只会注册一次 tracker，后面调用的无效，将 singleton 置为 false 取消这个功能
  singleton: false,
  // 默认情况下使用 beacon 发送数据，可以使用这个属性覆盖发送方法
  sendMethod: (url, record) => {
    axios({
      url,
      data: record
    })
  }
})

手动发送（0.6+可用）

import { createTracker } from 'sf-tracker'
const tracker = createTracker({
  appId: '你的应用的 app id',
  userId: '目前登录用户的 user id'
})
// 手动发送
tracker.send({
  type: 'login',
  body: {
    user: 'user'
  }
})
// 手动发送（仅type）
tracker.send({
  type: 'login'
})

自定义发送方式（0.6+可用）

import { createTracker } from 'sf-tracker'
const tracker = createTracker({
  appId: '你的应用的 app id',
  userId: '目前登录用户的 user id',
  sendMethod: (url, record) => {
    // url: 发送地址
    // record: 发送数据
    // 发送实现
  }
})

埋点初始化获取用户标识

​简要描述：通过传入用户信息获得埋点用户标识

接口地址： http://track.rarb.cn/push/init 方法： POST 说明：请求参数系统存在则传递即可，建议请求过期时间<=2秒 避免埋点程序异常影响自己程序

请求参数说明

| 参数名 | 类型 | 是否必填 | 默认值 | 说明 | | --------- | :----: | :------: | :----: | ----------------- | | phone | string | 否 | - | 手机号码 | | openid | string | 否 | - | 微信openID | | accountId | string | 否 | - | 天瑞地安accountId |

返回数据

{
  "msg": "操作成功",
  "code": 200,
  "data": "userCode"
}

返回数据说明

| 参数名 | 类型 | 说明 | | ------ | :----: | :---------------: | | code | number | 200 | | data | string | userCode 用户标识 | | msg | string | 操作反馈 |

路线图

• 单例模式 ✔
• vue 事件自动监听
• 优化参数 ✔