页面停留时长、日志上报,你们都是怎么玩的?

01 引言

在业务中,我们很多时候需要记录用户的行为。但是并不是所有的行为都会和服务端交互,服务端就显的心余而力不足。

尤其在一些类似支付、拍卖等过程中引起的纠纷。用户或没有什么都没有操作被扣款了,但是因为和服务端没有交互,并不到任何的线索。这时候就需要前端采集用户的行为日志,然后按需上报,以记录用户的页面行为。

有需求,就有市场。类似的框架应运而生如,美团的Logan、神策网络的神策等。为了分析用户的行为喜好,页面的停留时长就变的尤为紧要。

我们就以后端的视角,窥探一下前端技术。

02 难点

用户的行为日志记录相对比较简单,但是页面的停留时长似乎有点难。难点如下:

  • 用户打开监控页面,又打开新的页面算不算离开?
  • 用户将页面最小化,算不算离开?
  • 用户将页面最大化,停留时长要不要重新计算?
  • 用户关闭新开页后,重新回到监控页面,停留时长要不要算?

其实,关于算不算,要不要算是产品问题。从技术角度来看,我们通过什么样的方式或者函数能够监控这些变化呢?

有两种方式可供参考:

  • pagehide | pageshow
  • visibilitychange

03 pagehide | pageshow

当浏览器从展示会话历史中的另一个页面过程中隐藏当前页面时,会向 Window 发送 pagehide 事件。例如,当用户点击浏览器的后退按钮时,在显示前一个页面之前,当前页面会接收到一个 pagehide 事件。

当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作,同时也会在 onload 事件触发后初始化页面时触发)

3.1 pagehide

pagehide是基于window的事件,简单来说,就是页面被覆盖或者关闭时,触发该事件。

js 复制代码
window.addEventListener('pagehide', function(event) {
    console.info("页面被关闭了");
});

// 另外一种写法
window.onpagehide = (event) =>{
    console.info("页面被关闭了");
}

文档地址:

developer.mozilla.org/zh-CN/docs/...

3.2 pageshow

pageshow 同样是基于window的事件,简单来说,就是页面只要被重新加载,就会触发该事件。

js 复制代码
window.addEventListener('pageshow', function(event) {
    console.info("页面被关闭了");
});

// 另外一种写法
window.onpageshow = (event) =>{
    console.info("页面被关闭了");
}

文档地址:

developer.mozilla.org/zh-CN/docs/...

3.3 实战

页面的开启和关闭,我们都想服务端发送请求,其中发送请求的方法:

navigator.sendBeacon(url, data)

文档地址:

developer.mozilla.org/zh-CN/docs/...

案例:

js 复制代码
$(function (){
    window.addEventListener('pagehide', function(event) {
        const formData = new FormData();
        formData.append('data', '窗口关闭了!');
        navigator.sendBeacon("/file/windowClose", formData);
    });

    window.onpageshow = (event) =>{
        const formData = new FormData();
        formData.append('data', '窗口打开了!');
        navigator.sendBeacon("/file/windowOpen", formData);
    }
});
java 复制代码
@RequestMapping("windowClose")
public void windowClose(String data) {
    System.out.println("window is closed......" + data);
}

@RequestMapping("windowOpen")
public void windowOpen(String data) {
    System.out.println("window is opened......" + data);
}

结果:

3.5 浏览器兼容

04 visibilitychange

当其选项卡的内容变得可见或被隐藏时,会在 document 上触发 visibilitychange 事件。

文档地址:

developer.mozilla.org/zh-CN/docs/...

4.1 案例

JS代码

js 复制代码
document.addEventListener("visibilitychange", function logData() {
    if (document.visibilityState === "hidden") {
        const formData = new FormData();
        formData.append('data', '窗口关闭了!');
        navigator.sendBeacon("/file/windowClose", formData);
    }
});

document.onvisibilitychange = (event) => {
    if (document.visibilityState === "visible") {
        const formData = new FormData();
        formData.append('data', '窗口打开了!');
        navigator.sendBeacon("/file/windowOpen", formData);
    }
}

也可以使用Jquery绑定事件:

js 复制代码
$(document).on('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
        // 关闭
    }else if (document.visibilityState === 'visible'){
        // 显示
    }
});

结果:

4.2 浏览器兼容性

05 小结

两种方式都存在兼容性问题,移动端适用不适用,怎么也不清楚,总之应用在PC端,案例并没有问题。这两种方式就能监控窗口的显示和关闭,用来统计用户的浏览时长,同时也可以用户类似Websocket等客户端的关闭。收藏以后备用。

相关推荐
@CLoudbays_Martin111 分钟前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
四谎真好看15 分钟前
Java 学习笔记(进阶篇2)
java·笔记·学习
上官浩仁29 分钟前
springboot ioc 控制反转入门与实战
java·spring boot·spring
叫我阿柒啊1 小时前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
蔗理苦1 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
mqiqe1 小时前
架构-亿级流量性能调优实践
java·架构
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
野犬寒鸦2 小时前
力扣hot100:旋转图像(48)(详细图解以及核心思路剖析)
java·数据结构·后端·算法·leetcode
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
七夜zippoe2 小时前
AI+Java 守护你的钱袋子!金融领域的智能风控与极速交易
java·人工智能·金融