自研前端监控系统总结(SDK篇)-行为监控

对我司自研的前端监控系统的前端SDK进行总结

navigator

使用 window.navigator 可以收集到用户的设备信息，操作系统，浏览器信息...

PV

History 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法进行路由切换，是目前主流的无刷新切换路由方式。与 hashchange 只能改变 # 后面的代码片段相比，History API （pushState、replaceState） 给了前端完全的自由。

PopState 是浏览器返回事件的回调，但是更新路由的 pushState、replaceState 并没有回调事件，因此，还需要分别在 history.pushState() 和 history.replaceState() 方法里处理 URL 的变化。在这里，我们运用到了一种类似 Java 的 AOP 编程思想，对 pushState 和 replaceState 进行改造。

private _initRouterEach () {
    const _oldSend = window.history.replaceState
    window.history.replaceState = function () {
      const e = new Event('replaceState')
      e.arguments = arguments
      window.dispatchEvent(e)
      return _oldSend.apply(this, arguments)
    }
    // 监听路由跳转
    window.addEventListener('replaceState', () => {
      setTimeout(() => {
        this.logPV({
          time: Date.now(),
          path: window.location.href
        })
      }, 0)
    })
    // 监听前进、后退
    window.onpopstate = () => {
      this.logPV({
        time: Date.now(),
        path: window.location.href
      })
    }
  }

页面停留时长

用户进入页面记录一个初始时间，用户离开页面时用当前时间减去初始时间，就是用户停留时长。这个计算逻辑可以放在 beforeunload 事件里做。 

页面跳转来源

通过 document.referrer 属性，可以知道用户是从哪个网站跳转而来。

用户点击

利用 addEventListener() 监听 mousedown、touchstart 事件，我们可以收集用户每一次点击区域的大小，点击坐标在整个页面中的具体位置，点击元素的内容等信息。

export default function onClick() {
    ['mousedown', 'touchstart'].forEach(eventType => {
        let timer
        window.addEventListener(eventType, event => {
            clearTimeout(timer)
            timer = setTimeout(() => {
                const target = event.target
                const { top, left } = target.getBoundingClientRect()
                
               console.log({
                    top,
                    left,
                    eventType,
                    pageHeight: document.documentElement.scrollHeight || document.body.scrollHeight,
                    scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
                    type: 'behavior',
                    subType: 'click',
                    target: target.tagName,
                    paths: event.path?.map(item => item.tagName).filter(Boolean),
                    startTime: event.timeStamp,
                    path: getPageURL(),
                    outerHTML: target.outerHTML,
                    innerHTML: target.innerHTML,
                    width: target.offsetWidth,
                    height: target.offsetHeight,
                    viewport: {
                        width: window.innerWidth,
                        height: window.innerHeight,
                    }
                })
            }, 500)
        })
    })
}