js统计页面停留时长

前言

页面停留时间简称为Tp 是网站分析中的一个指标 用于反映用户在某些页面的停留时间的长短

---

我们可以把页面的生命周期分为三个动作 进入 活跃状态切换 离开

一、如何监听页面的进入和离开

对于常规页面的 首次加载 页面关闭 刷新 等都可以通过 window.onload 和 window.onbeforeunload 来监听 页面的进入和离开 浏览器的前进和后退通过 pageshow和 pagehide处理

对于单页面应用 的内部跳转 可以转化为俩个问题
监听路由变化 判断URL是否为不页面

监听路由变化

路由变化的本质都会调用Histtory.pushState()或 History.replaceState()
通过 popstate 事件能解决一般的问题 因为他只会在浏览器前进后退的时候触发 调用 hittory.pushState() or history.replaceState() 不会触发
这个时候需要 Monkeypeatch 解决 运行时重写 history.pushState 和 history.replaceState 方法

let _wr =  function (type) {  
  let orig = window.history[type]
  return  function () {
    let rv = orig.apply(this, arguments)
    let e = new Event(type.toLowerCase())
    e.arguments = arguments
    window.dispatchEvent(e)
    return rv
  }
}
window.history.pushState = _wr('pushState')  
window.history.replaceState = _wr('replaceState')
window.addEventListener('pushstate',  function (event) {})  
window.addEventListener('replacestate',  function (event) {})

hashHistory的实现是基于hash变化 hash变化可以通过hashchange来监听

判断URL是否为不同页面

1. 客户端定义

new Tracer({  
  rules: [
    { path: '/index' },
    { path: '/detail/:id' },
    { path: '/user', query: {tab: 'profile'} }
  ]
)

2. 数据分析平台
   相关事件整理
   
3. Page Visivility API
   一个网页的可见状态 可以通过 Page Visivility API 获取 比如用户切换浏览器tab 最小化窗口 电脑睡眠 系统会派发 单签页面可见状态变化的visibilitychange事件 然后在事件绑定函数中通过document.hidden
   或 document.visibilityState 读取当前状态

document.addEventListener('visibilitychange',  function (event) {  
  console.log(document.hidden, document.visibilityState)
})

什么时候上报数据

1. 页面离开时上报
   对于页面刷新或者关闭窗口触发的操作可能会照成数据丢失
2. 下次打开页面时上报
   会丢失历史访问记录中的最后一个页面数据

单页面应用 最好即时上报