标签：nowTime 用户 停留 localStorage let openPageCount 页面
页面停留时间（Time on Page）简称 Tp，是网站分析中很常见的一个指标，用于反映用户在某些页面上停留时间的长短，传统的Tp统计方法会存在一定的统计盲区，比如无法监控单页应用，没有考虑用户切换Tab、最小化窗口等操作场景。基于上述背景，重新调研和实现了精确统计页面停留时长的方案，需要 兼容单页应用和多页应用，并且不耦合或入侵业务代码。
虽然百度统计之类的也可以记录用户的浏览行为，但是这类统计是全部跟踪用户，而无法精确的跟踪到注册的用户之前一系列的行为，而我们只需要针对注册用户进行有目的性的行为分析。。。
针对哪些应用？
- 多页面应用
- 单页面应用（本文以vue为例子）
对于单页应用内部的跳转可以转化为两个问题：
- 监听路由变化
- 判断变化的URL是否为不同页面 。
首先确定一下需求：
- 用户一进来，记录用户进入页面的开始时间；
- 用户在新的标签页打开页面，如果其他标签页已经打开了页面，这时候的开始时间还是算第一次进入的页面的时间；
- 用户关闭该网页的全部标签页时，需要记录关闭的结束时间，调用接口传数据给后台；
如何监听页面的进入和离开
对于常规页面的 首次加载、页面关闭、刷新 等操作都可以通过 window.onload 和window.onbeforeunload 事件来监听页面进入和离开，浏览器前进后退可以通过 pageshow 和 pagehide 处理。
- load / beforeunload
- pageshow / pagehide
首先，进入页面的时候，浏览器会调用onload事件,浏览器关闭时，浏览器会调用beforeunload事件，可以从这两个事件入手。
但是这里有几个问题，那就是浏览器刷新的时候，也会调用beforeunload,还有就是如何知道用户在其它标签页也打开了网页呢？
有什么可以记录浏览器是否刷新呢？这时候我想到了sessionStorage。
sessionStorage，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。也就是说数据存储在sessionStorage中，在当前标签页会一直存在。
首先在初次进入页面时在onload事件中往sessionStorage存入一个标识
window.addEventListener("load",function(){
if(sessionStorage.getItem("flag")){
return;
}
sessionStorage.setItem("flag", true);
})
上面说的还有一个问题，就是如何统计用户打开了多个标签页呢？
在本地缓存中，localStorage中的数据是整个网站都可以共享的，也就是具有相同域名、ip的网站，localStorage里的数据在不同标签页中也是相同的。
这时候可以往localStorage里存一个计数器，当用户进入页面时，计数器加1，当用户离开页面时计数器减1。当计数器为0时，标志页面全部关闭，此时可以记录页面关闭的结束时间。同时访问网站的开始时间也存到localStorage中。
window.addEventListener("load",function(){
let nowTime = getNowTime()
let openPageCount = localStorage.getItem("openPageCount")
openPageCount += 1
localStorage.setItem("openPageCount",openPageCount)
//其实说明是页面是刷新后加载的，不应该统计开始时间
if(sessionStorage.getItem("flag")){
return;
}
localStorage.setItem("startTime",nowTime)
sessionStorage.setItem("flag", true);
})
window.addEventListener("beforeunload",function(){
let nowTime = getNowTime()
let openPageCount = localStorage.getItem("openPageCount")
openPageCount -= 1
localStorage.setItem("endTime",nowTime)
localStorage.setItem("openPageCount",openPageCount)
if(openPageCount == 0){
//说明页面全部关闭，这时候可以传数据给后台
}
})
function getNowTime(){
let nowTime = new Date().getTime()
return nowTime
}
这里还有个问题，就是用户意外关掉电脑或者突然断电了，这时候是不会执行beforeunload是不会执行，此时这个数据是不正确，是应该抛弃的。
要解决这个问题，可以往localStorage里存一个刷新时间，每30秒更新这个刷新时间，用户加载网站时，读取这个刷新时间，如果当前时间和这个刷新时间相差大于1分钟，说明数据有断层，此时应该抛弃这一条记录数据。
window.addEventListener("load",function(){
let nowTime = getNowTime()
let openPageCount = localStorage.getItem("openPageCount")
openPageCount = openPageCount ? parseInt(openPageCount) : 0
openPageCount += 1
localStorage.setItem("openPageCount",openPageCount)
refreshTime()
let isRightTime = compareRefreshTime()
//其实说明是页面是刷新后加载的，不需要统计开始时间
if(sessionStorage.getItem("flag") && isRightTime){
return;
}
localStorage.setItem("startTime",nowTime)
localStorage.setItem("refreshTime",nowTime)
sessionStorage.setItem("flag", true);
})
window.addEventListener("beforeunload",function(){
let nowTime = getNowTime()
let openPageCount = localStorage.getItem("openPageCount")
openPageCount -= 1
localStorage.setItem("endTime",nowTime)
localStorage.setItem("openPageCount",openPageCount)
if(openPageCount == 0){
//说明页面全部关闭，这时候可以传数据给后台
}
})
function getNowTime(){
let nowTime = new Date().getTime()
return nowTime
}
function compareRefreshTime(){
let nowTime = getNowTime()
let refreshTime = localStorage.getItem("refreshTime")
return nowTime - refreshTime < 60 * 1000
}
function refreshTime(){
setTimeout(refreshTime ,30 * 1000)
let nowTime = getNowTime()
localStorage.setItem("refreshTime",nowTime)
}
如何监听页面活跃状态切换？
可以通过 Page Visibility API 以及在 window 上声明 onblur/onfocus 事件来处理。
Page Visibility API
一个网页的可见状态可以通过 Page Visibility API 获取，比如当用户 切换浏览器Tab、最小化窗口、电脑睡眠 的时候，系统API会派发一个当前页面可见状态变化的 visibilitychange 事件，然后在事件绑定函数中通过 document.hidden 或者 document.visibilityState 读取当前状态。
document.addEventListener('visibilitychange', function (event) {
console.log(document.hidden, document.visibilityState)
})
onblur/onfocus
可以通过 Page Visibility API 以及在 window 上声明 onblur/onfocus 事件来处理。对于PC端来说，除了监听上述相关事件外，还可以考虑监听鼠标行为，比如当一定时间内鼠标没有操作则认为用户处于非活跃状态。
什么时机上报数据
页面离开时上报
对于页面刷新或者关闭窗口触发的操作可能会造成数据丢失
下次打开页面时上报
会丢失历史访问记录中的最后一个页面数据
目前采用的方案2，对于单页内部跳转是即时上报，对于单页/多页应用触发 window.onbeforeunload 事件的时候会把当前页面数据暂存在 localStorage 中，当用户下次进入页面的时候会把暂存数据上报。有个细节问题，如果用户下次打开页面是在第二天，对于统计当天的活跃时长会有一定的误差，所以在数据上报的同时会把该条数据的页面进入时间/离开时间带上。
以上就是统计用户停留网站时长思路的全部代码。
对于页面停留时长的定义可能在不同场景会有差异，比如内部业务系统或者OA系统，产品可能更关心用户在页面的活跃时长；而对于资讯类型的产品，页面可见时长会更有价值。单一的数据对业务分析是有限的，所以在具体的代码实过程中我们会把停留时长分三个指标，这样能更好的帮助产品/运营分析。
- active 页面活跃时长
- visible 页面可见时长 //仅支持Desktop
- duration 页面总停留时长
标签：nowTime,用户,停留,localStorage,let,openPageCount,页面 来源： https://blog.csdn.net/weixin_45731450/article/details/114746433
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。