@cktech/tracker

tracker

采用rrweb进行会话录制的前端js库。

目标

记录4个动作(custom event)和3个数据(metadata)，如下：

• Custom Events
  • 页面加载
  • 下单(orderId)
  • 开始支付(orderId)
  • 完成支付(orderId)
• Metadata
  • userId
  • orderId 订单号
  • payTime 支付时间

以上行为统一使用tracker.addAction()方法进行记录，第一个参数为事件名，第二个参数为元数据。

事件名为字符串，可选值为：['页面加载', '下单', '开始支付', '完成支付']
元数据为对象，对象的key的取值有：['userId', 'orderId', 'payTime']

相关代码

页面加载

import getTracker from '@util/tracker'
<script>
export default {
  beforeCreate() {
    this.tracker = getTracker()
  },
  created() {
    this.tracker.start()
    
    this.tracker.addAction('页面加载', {userId:localStorage.getItem('userId')})
  }
}
</script>

下单

const tracker = getTracker()

tracker.addAction('下单', {orderId: '', userId: ''})

开始支付

const tracker = getTracker()

tracker.addAction('开始支付', {orderId:''})

完成支付

const tracker = getTracker()

tracker.addAction('完成支付', {orderId: '', payTime: ''})

todo

• [x] 检测 websocket 断开事件，通过元数据记录这一事件，用于后续数据分析
• [x] 发送请求集成在内部，不需要项目里面配置接口api，通过参数配置接口路径即可
• [x] 手动实现处理自定义事件的压缩逻辑，方便添加自定义事件的时机
• [ ] http接口实现cors或类似行为，这样就可以把发送数据整个集成到tracker内部

用于数据分析的自定义事件名

• session:start (会话开始启动)
• session:started (会话启动成功)

websocket相关

• websocket:establish (开始建立websocket连接)
• websocket:connect (重新建立websocket连接)
• websocket:disabled (客户端不支持websocket)
• websocket:open (websocket连接成功)
• websocket:close (websocket连接关闭)
• websocket:error (websocket错误)

事件相关

• bind:visibilitychange (绑定visibilitychange事件)
• bind:mouseleave (绑定mouseleave事件)
• bind:beforeunload (绑定beforeunload事件)
• unbind:visibilitychange (绑定visibilitychange事件)
• unbind:mouseleave (绑定mouseleave事件)
• unbind:beforeunload (绑定beforeunload事件)
• event:visibilitychange (触发visibilitychange事件)
• event:mouseleave (触发mouseleave事件)
• event:beforeunload (触发beforeunload事件)
• event:full (触发全量快照)

其他

• meta:browser (发送浏览器信息)
• meta:visitorId (发送访客id)
• use:websocket (使用websocket发送数据)
• use:http (使用http发送数据)
• error:internal (tracker内部错误)
• error:saveEvent (保存事件数据出错)
• error:saveMeta (保存元数据出错)