前言

页面停留时间简称为Tp 是网站分析中的一个指标用于反映用户在某些页面的停留时间的长短

我们可以把页面的生命周期分为三个动作进入活跃状态切换离开

一、如何监听页面的进入和离开

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

对于单页面应用的内部跳转可以转化为俩个问题
监听路由变化判断URL是否为不页面

监听路由变化

路由变化的本质都会调用Histtory.pushState()或 History.replaceState()
通过 popstate 事件能解决一般的问题因为他只会在浏览器前进后退的时候触发调用 hittory.pushState() or history.replaceState() 不会触发
这个时候需要 Monkeypeatch 解决运行时重写 history.pushState 和 history.replaceState 方法

let _wr =  function (type) {  let orig = window.history[type]return  function () {let rv = orig.apply(this, arguments)let e = new Event(type.toLowerCase())e.arguments = argumentswindow.dispatchEvent(e)return rv}
}
window.history.pushState = _wr('pushState')
window.history.replaceState = _wr('replaceState')
window.addEventListener('pushstate',  function (event) {})
window.addEventListener('replacestate',  function (event) {})

hashHistory的实现是基于hash变化 hash变化可以通过hashchange来监听

判断URL是否为不同页面

客户端定义

new Tracer({  rules: [{ path: '/index' },{ path: '/detail/:id' },{ path: '/user', query: {tab: 'profile'} }]
)

数据分析平台
相关事件整理
Page Visivility API
一个网页的可见状态可以通过 Page Visivility API 获取比如用户切换浏览器tab 最小化窗口电脑睡眠系统会派发单签页面可见状态变化的visibilitychange事件然后在事件绑定函数中通过document.hidden
或 document.visibilityState 读取当前状态

document.addEventListener('visibilitychange',  function (event) {  console.log(document.hidden, document.visibilityState)
})

什么时候上报数据

页面离开时上报
对于页面刷新或者关闭窗口触发的操作可能会照成数据丢失
下次打开页面时上报
会丢失历史访问记录中的最后一个页面数据

单页面应用最好即时上报

js统计页面停留时长相关推荐

如何精确统计页面停留时长
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步作者:今日头条技术链接:https://techblog.toutiao.com/2018/06/05/ru- ...
Android 如何正确统计页面停留时长
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/112546517 本文出自[赵彦军的博客] 在Android中经常有统计页面停留时长 ...
react利用useEffect记录用户在当前页面停留时长
项目场景: 小程序项目中需要记录用户在当前页面停留的时长,下意识想到在useState中记录一个时间戳,在useEffect中的return中获取一个时间戳,减去state中记录的时间戳,用得到的值取 ...
计算页面停留时长的另类方式
计算页面停留时长,往常计算也页面留时长都需要跑spark或这mr任务来实现,如果能跑sql来实现那是最好不过了(sql是最好的语言),废话不多说,直接搞起注意:这里使用的计算引擎是presto 首先 ...
如何精确统计用户在页面的停留时长？
作者:今日头条技术链接:https://techblog.toutiao.com/2018/06/05/ru-he-jing-que-tong-ji-ye-mian-ting-liu-shi-cha ...
php统计在线时长,js统计网站运行时长
js统计网站运行时长第一种: 网站 function siteTime(){ window.setTimeout("siteTime()", 1000); var seconds ...
如何知道页面浏览时长系列之 Web 篇
一.前言页面浏览时长是网站分析中很常见的一个指标,反映用户在某些页面上浏览时间的长短,体现了网站用户黏性.然而精确的页面浏览时长是很难统计的,比如需要考虑单页面网页应用路由切换.用户切换浏览器 ta ...
数据埋点统计页面使用时长
Android应用中的页面,也就Activity,Fragment两种.对于Activity,系统了全局的生命周期监听的方法,只需要在onResume中记录页面显示时的时间,在onPause中计算显示 ...
HTML5停留时长统计,平均停留时间
本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 这个指标由于其看上去是一个很容易理解的度量指标(不就是访客在这浏览这个网站时花了多少时间吗).因此不少管理人员特别是其他非网站 ...

js统计页面停留时长

前言

一、如何监听页面的进入和离开

监听路由变化

判断URL是否为不同页面

什么时候上报数据

js统计页面停留时长相关推荐

最新文章

热门文章