前端如何统计用户在一个页面上的停留时长？-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端如何统计用户在一个页面上的停留时长？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前面笔者写了一篇关于前端如何对点位的 click 事件和 impression 事件埋点的文章浅谈前端如何做无痕埋点？前端的埋点不仅仅是这两个事件埋点，此外还有 uv（user view，即多少用户访问了当前页面）、pv（page view，即当前页面被访问了多少次）、用户停留时长。今天我们来聊聊如何计算用户在页面上的停留时长。

需求分析

要统计停留时长，我们需要知道以下两点信息：

用户进入页面的时间 entryTime
用户离开页面的时间 leaveTime

则用户停留时长 stayTime = leaveTime - entryTime

如何判定用户进入页面？

1、DOMContentLoaded 事件或 onload 事件

用户访通过 url 访问一个页面，页面会开始加载对应的 html 文件，html 文件中如果有 css、js、图片等其他资源文件，则会对这些文件发起请求，最后渲染出完整的页面展示给用户。在这个过程中，会触发两个事件：DOMContentLoaded 和 onload。

DOMContentLoaded 事件在 html 文件加载并解析完成后触发，此时页面上的其他资源（图片、css等）可能未加载完成；onload 事件会在页面上所有的资源都加载完成后触发，包括 html、图片、css等等。所以事件触发顺序是：DOMContentLoaded -> onload，所以我们可以在两个事件中的任何一个记录用户进入页面的时间，看具体需求。代码如下：

let entryTime,leaveTime
window.addEventListener('DOMContentLoaded',function() {
   // 进入页面的时间戳
   entryTime = new Date().getTime()
 })
 // 或
 window.addEventListener('load',function() {
   // 进入页面的时间戳
   entryTime = new Date().getTime()
 })

2、pageshow 事件

顾名思义，pageshow 事件就是在页面可见的时候触发（即页面第一次加载和刷新时触发），代码如下：

window.addEventListener('pageshow', function() {
   // 进入页面的时间戳
   entryTime = new Date().getTime()
})

如何判定用户离开页面？

1、unload 事件

当用户关闭当前页面时会触发 **unload **事件，我们可以在 unload 事件中记录用户离开时的时间戳，代码如下：

 window.addEventListener('unload',function() {
  // 离开页面的时间戳
   leaveTime = new Date().getTime()
 })

2、pagehide 事件

顾名思义，pagehide 事件就是在页面不可见的时候触发，即用户点击跳转其它链接、浏览器前进、后退按钮，或者关闭浏览器选项卡时触发，代码如下：

window.addEventListener('pagehide',function() {
  // 离开页面的时间戳
   leaveTime = new Date().getTime()
})

拓展

上面讲述了打开页面和离开页面会触发的一些事件，此外还有一个 visibilitychange 事件可以监听页面的显示和隐藏，可以在回调函数中通过一个 visibilityState 属性来标识页面的状态。

visibilityState = ‘visible’，页面可见
visibilityState = ‘hidden’，页面不可见

代码如下：

window.addEventListener('visibilitychange',function(e) {
    if (e.target.visibilityState === 'visible') {
      console.log('visible')
    } else if (e.target.visibilityState === 'hidden') {
      // 离开页面的时间戳
      leaveTime = new Date().getTime()
    }
    
})

这里需要注意的时，我们不能在 e.target.visibilityState === ‘visible’ 分支里记录用户进入页面的时间，因为一开始进入页面的时候，visibilitychange 事件并不会触发，只有当我们切换浏览器 tab、最小化浏览器窗口、打开新页面时才会触发。文章来源地址https://www.toymoban.com/news/detail-659960.html

到了这里，关于前端如何统计用户在一个页面上的停留时长？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！