web前端数据埋点方案

最新推荐文章于 2024-08-27 11:06:55 发布

C+ 安口木

最新推荐文章于 2024-08-27 11:06:55 发布

阅读量961

点赞数

分类专栏：前端开发文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_50367873/article/details/119920766

版权

前端开发专栏收录该内容

143 篇文章 12 订阅

订阅专栏

本文介绍了如何利用JavaScript监听用户在页面上的停留时长、点击事件、请求响应时长。通过window.onload、window.onbeforeunload、pageshow、pagehide等事件处理页面的进入和离开，并在单页面应用中结合路由变化进行监控。同时，文章提供了全局封装的Ajax请求拦截以计算请求响应时间。通过对这些数据的记录和分析，可以有效地统计用户活跃度和页面性能。

摘要由CSDN通过智能技术生成

逻辑图：
在这里插入图片描述
监听多页面用户停留时长

let stopTime
window.onpageshow = ()=>{
  stopTime = new Date().getTime()
}
window.onpagehide = ()=>{
  stopTime = new Date().getTime() - stopTime
  localStorage.setItem(window.location.href+'stopTime', stopTime)
}

监听单页面用户停留时长

// 也可放在路由拦截中做
let stopTime
window.addEventListener('onload',(e)=>{
  stopTime = new Date().getTime()
})
window.addEventListener('popstate',()=>{
  let t = new Date().getTime() - stopTime
  stopTime = new Date().getTime()
  localStorage.setItem(window.location.href+'stopTime', stopTime)
})

监听用户点击事件

const myBtn = document.getElementById("myBtn")
myBtn.addEventListener("click", ()=>{
    localStorage.setItem('click', JSON.stringify({"myBtnclick":myBtn,"time":new Date().getTime()}))
})

监听请求响应时长

// 这部分代码应该在全局封装的Ajax中做，或者在前端框架里的http请求与相应拦截中做

let requestTime
// 请求拦截
myAjax.request.use(config => {
   ...
   requestTime = new Date().getTime()
   localStorage.setItem(res.url, JSON.stringify([{"startTime":requestTime,"endTime":0}]))
   ...
}, error => {
   ...
   return Promise.reject(error)
})

// 响应拦截
myAjax.response.use(res => {
   ...
   let data = JSON.parse(localStorage.getItem(res.url))
   let obj = data.requestTime.find(e=>e.startTime === requestTime)
   obj.endTime = new Date().getTime()
   localStorage.setItem(res.url+requestRandom, JSON.stringify(data))
   ...
}, error => {
   ...
   return Promise.reject(error)
})

分割线=====
计算页面停留时长既如何监控这三个动作，然后在对应触发的事件中记录时间戳，比如要统计活跃停留时长就把 active 区间相加即可，要统计总时长既 tn -t0 。如下图，
在这里插入图片描述
如何监听页面的进入和离开？

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

1、load / beforeunload

2、pageshow / pagehide

对于单页应用内部的跳转可以转化为两个问题：

1、监听路由变化

2、判断变化的URL是否为不同页面。

2.1.1 监听路由变化

目前主流的单页应用大部分都是基于 browserHistory (history api) 或者 hashHistory 来做路由处理，我们可以通过监听路由变化来判断页面是否有可能切换。注意是有可能切换，因为URL发生变化不代表页面一定切换，具体的路由配置是由业务决定的（既URL和页面的匹配规则）。

browserHistory

路由的变化本质都会调用 History.pushState() 或 History.replaceState() ，能监听到这两个事件就能知道。通过 popstate 事件能解决一半问题，因为 popstate 只会在浏览器前进后退的时候触发，当调用 history.pushState() or history.replaceState() 的时候并不会触发。