js统计页面停留时间

基础概念

页面停留时间是指用户在网页上的停留时长。通过JavaScript可以实时监测用户的活动，并计算出他们在页面上的停留时间。

类型

总停留时间：用户从进入页面到离开的总时间。
活跃停留时间：用户在页面上进行交互（如点击、滚动）的时间。

应用场景

电商网站：分析用户对不同商品的兴趣程度。
新闻网站：了解哪些文章更受读者欢迎。
在线教育平台：评估课程内容的吸引力。

实现方法

以下是一个简单的JavaScript示例，用于统计页面的总停留时间：

// 记录用户进入页面的时间
let startTime = Date.now();

// 监听页面关闭或刷新事件
window.addEventListener('beforeunload', function(event) {
    let endTime = Date.now();
    let timeSpent = (endTime - startTime) / 1000; // 计算停留时间（秒）
    
    // 发送数据到服务器（这里使用console.log作为示例）
    console.log('User stayed for: ' + timeSpent + ' seconds');
    
    // 如果需要，可以将timeSpent发送到服务器进行分析
    // fetch('/api/logTimeSpent', {
    //     method: 'POST',
    //     headers: {
    //         'Content-Type': 'application/json'
    //     },
    //     body: JSON.stringify({ timeSpent: timeSpent })
    // });
});

可能遇到的问题及解决方法

数据不准确：用户可能通过禁用JavaScript或使用隐私模式来规避追踪。
- 解决方法：结合服务器日志和其他技术手段进行辅助验证。

跨标签页问题：用户在多个标签页之间切换可能导致统计不准确。
- 解决方法：使用visibilitychange事件来检测页面是否可见，并相应调整计时逻辑。

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        startTime = Date.now(); // 页面重新可见时重置开始时间
    }
});