监控用户在当前页面的停留时间

我们希望知道一个用户在当前这个页面停留的时间,这中间要考虑到用户通过切换浏览器tab的情况,把所有用户动作都记录下来。

const tracers = []
// 进入
tracers.push({
  type: 'enter',
  time: Date.now(),
})
// 切屏
const visibilitychangeFn = () => {
  if (document.visibilityState === 'hidden') {
    tracers.push({
      type: 'focusout',
      time: Date.now(),
      url: window.location.href,
      requestId: this.getRequestId(),
    })
  }
  else {
    tracers.push({
      type: 'focusin',
      time: Date.now(),
    })
  }
}
document.addEventListener('visibilitychange', visibilitychangeFn)
// 离开
const unloadFn = () => {
  tracers.push({
    type: 'leave',
    time: Date.now(),
    url: window.location.href,
    requestId: this.getRequestId(),
  })
  record({
    type: 'usertracer',
    tracers,
    stay: tracers[tracers.length - 1].time - tracers[0].time,
  })
}
window.addEventListener('beforeunload', unloadFn)

function record(info) {}

通过一个traces数组,记录了用户从进入这个页面,在这个页面停留、切换tab,到最后离开这个页面的时间。