前端用户行为统计

最近工作中有这么一个需要,要在前端页面中插入一段JavaScript脚本,用于统计用户行为.这段脚本的主要目的是统计用户在页面中的停留时间与统计用户在哪些关键DOM标签上进行了操作.然后发向后台服务.

中间用到了 onload与onbeforeunload事件. onunload事件由于兼容性问题没有使用. 因考虑到那些关键的DOM标签可能是利用了JavaScript动态加载而成的,所以利用了事件委托用于统计用户点击的情况,

import axios from 'axios'

/**
 * 发送信息给后台用于统计
 * @param {Object} obj
 * @param {string} url
 */
var fSendMsgToBackEnd = (obj, url) => {
  axios.get('back/server/path', {
    params: JSON.parse(JSON.stringify(obj))
  }).then(respons => {
    return true
  }).catch(e => {
    throw e
  })
}

/**
 * 用于存储信息
 */
var obj = null

/**
 * 用于初始化部分统计信息
 */
window.onload = () => {
  var pageName = window.location.href
  obj = {
    pageName: pageName,
    startTime: new Date().getTime(),
    cookie: document.cookie
  }

  /**
   * 利用事件委托来对行为监控
   * @param {evnet} e
   */
  document.onclick = function (e) {                   // document可以写其它标签,但是这个标签必须是一开始就存在的
    var ev = e || window.event
    var target = ev.target || ev.srcElement
    if (target.className.toLowerCase() === 'dd') {    // 这里可以用于写你所需要的监控的用户操作的标签内容,视自己情况而定
      fSendMsgToBackEnd({control: target.innerHTML}, '/back/server/psth/for/contorlWatch')
    }
  }
}

/**
 * 用于统计页面打开到离开用了多长时间
 * 也可以在obj对象中添加其它所需要的内容
 */
window.onbeforeunload = function () {
  obj.endTime = new Date().getTime()
  obj.watchTime = obj.endTime - obj.startTime
  fSendMsgToBackEnd(obj, 'the/back/server/path/for/pageTime')
}