我们希望知道一个用户在当前这个页面停留的时间,这中间要考虑到用户通过切换浏览器tab的情况,把所有用户动作都记录下来。
const tracers = []
// 进入
tracers.push({
type: 'enter',
time: Date.now(),
})
// 切屏
const visibilitychangeFn = () => {
if (document.visibilityState === 'hidden') {
tracers.push({
type: 'focusout',
time: Date.now(),
url: window.location.href,
requestId: this.getRequestId(),
})
}
else {
tracers.push({
type: 'focusin',
time: Date.now(),
})
}
}
document.addEventListener('visibilitychange', visibilitychangeFn)
// 离开
const unloadFn = () => {
tracers.push({
type: 'leave',
time: Date.now(),
url: window.location.href,
requestId: this.getRequestId(),
})
record({
type: 'usertracer',
tracers,
stay: tracers[tracers.length - 1].time - tracers[0].time,
})
}
window.addEventListener('beforeunload', unloadFn)
function record(info) {}
通过一个traces数组,记录了用户从进入这个页面,在这个页面停留、切换tab,到最后离开这个页面的时间。


现实是你用的几个api好像有兼容问题~
我博客大部分文章,都是不考虑兼容性的,实现一个东西,不可能面面俱到,最重要的是为读者提供可供参考的思路
这个怎么说呢,
大部分开发肯定都是要考虑兼容性的,
就算是参考,
也是片面的,
唉,
不说了