前端埋点的简单实现

要记录用户的浏览轨迹

知道用户都浏览了哪些页面，在每个页面都停留了多长时间，还有比如用户所用的手机型号等个人信息

个人信息获取的接口如下：

在用户刚进入时获取用户信息

3.安装 js-cookie 插件

npm install js-cookie --save

4.在main.js中引入

5.利用路由导航实现对不同页面的浏览的时间的记录

// 用于记录每次路由跳转时候的事件，只记录两个
let time = []
// console.log(Cookie.get('webPoint'))
router.beforeEach((to, from, next) => {
  let startTime = new Date().getTime()
  if (time.length < 2) {
    // 模拟队列，保证队列中每次只有两个元素
    time.push(startTime)
  }
  if (time.length === 2) {
    let stopTime = time[1] - time[0]
    let baseRes = {
      browse_time: stopTime,
      start_time: time[0],
      end_time: time[1],
      browse_point: Cookie.get('webPoint')
    }

    if (from.name === 'videoPlay') {
      let path = from.path.split('/')[2]
      let pathJson = JSON.parse(path)
      let res = {
        browse_type: 1,
        movie_id: pathJson.show_name,
        ...baseRes
      }
      console.log('res1', res)
      axios.post('http://192.168.0.188:8006/movie-info/', {
        ...res
      }).then(res => { console.log(res) })
    } else if (from.name === 'goods') {
      let res = {
        browse_type: 2,
        goods_id: parseInt(from.params.id),
        ...baseRes
      }
      console.log('res2', res)
      axios.post('http://192.168.0.188:8006/goods-info/', {
        ...res
      }).then(res => { console.log(res) })
    } else if (from.name === 'infoDetail') {
      let res = {
        browse_type: 3,
        msg_id: parseInt(from.params.id),
        ...baseRes
      }
      console.log('res3', res)
      axios.post('http://192.168.0.188:8006/msg-info/', {
        ...res
      }).then(res => { console.log(res) })
    } else {
      let res = {
        browse_type: 4,
        url: from.path,
        ...baseRes
      }
      console.log('res4', res)
      axios.post('http://192.168.0.188:8006/additional-info/', {
        ...res
      }).then(res => { console.log(res) })
    }
    time.shift()
  }
  next()
})

大概就是这个样子

具体的因为涉及到隐私不能够透露哦！

前端埋点的简单实现

猜你喜欢