页面停留时间到底如何记录？使用场景是什么？底层原理是什么？

1. 页面停留时间到底如何记录？

想象一下，你在一家咖啡店：

• 店员（JavaScript）会记录你从进入店铺到离开的时间。
• 在网页中，页面停留时间的记录通常通过 JavaScript 实现，计算用户在页面上的活跃时间。

(1) 核心组成部分

1. 页面加载时间：

   • 记录用户打开页面的时间点。
   • 示例：

     const startTime = new Date().getTime(); // 页面加载时记录时间戳
     

2. 页面关闭或跳转时间：

   • 记录用户离开页面的时间点（如关闭页面或跳转到其他页面）。
   • 示例：

     window.addEventListener('beforeunload', () => {
         const endTime = new Date().getTime(); // 用户离开时记录时间戳
         const duration = (endTime - startTime) / 1000; // 计算停留时间（秒）
         console.log(`Page stay time: ${duration} seconds`);
     });
     

3. 心跳机制（可选）：

   • 如果需要更精确地记录用户的活跃时间（如排除用户切换到其他标签页的情况），可以使用心跳机制定期发送数据。
   • 示例：

     let activeTime = 0;
     let lastActive = new Date().getTime();
     
     setInterval(() => {
         const now = new Date().getTime();
         if (document.hasFocus()) { // 检查页面是否处于焦点状态
             activeTime += (now - lastActive);
         }
         lastActive = now;
     }, 1000); // 每秒更新一次
     
     window.addEventListener('beforeunload', () => {
         console.log(`Active time: ${activeTime / 1000} seconds`);
     });
     

4. 数据上报：

   • 将停留时间数据发送到服务器进行存储和分析。
   • 示例：

     window.addEventListener('beforeunload', () => {
         const duration = (new Date().getTime() - startTime) / 1000;
         fetch('/track-stay-time', {
             method: 'POST',
             body: JSON.stringify({ page: window.location.href, duration }),
         });
     });
     

---

2. 使用场景是什么？

(1) 用户行为分析

• 场景：了解用户对某个页面的兴趣程度（如热门文章的停留时间）。
• 示例：

  数据显示：
  - 文章 A 的平均停留时间为 5 分钟
  - 文章 B 的平均停留时间为 2 分钟
  -> 用户对文章 A 更感兴趣
  

(2) 页面优化

• 场景：根据停留时间优化页面内容（如增加高价值内容、减少冗余信息）。
• 示例：

  数据显示：
  - 首页的停留时间较短（<1 分钟）
  -> 可能需要优化首页内容以吸引用户
  

(3) 广告效果评估

• 场景：评估广告页面的吸引力（如用户是否愿意花时间浏览广告详情）。
• 示例：

  数据显示：
  - 广告页面的平均停留时间为 3 分钟
  -> 广告内容可能具有较高的吸引力
  

(4) 转化率跟踪

• 场景：分析用户在关键页面（如注册页面、购物车页面）的停留时间与转化率的关系。
• 示例：

  数据显示：
  - 注册页面的平均停留时间为 2 分钟，转化率为 10%
  - 购物车页面的平均停留时间为 5 分钟，转化率为 5%
  -> 可能需要优化购物车页面的用户体验
  

---

3. 底层原理是什么？

(1) 时间戳记录

• 页面加载时间：

  • 使用 Date.now() 或 performance.now() 获取当前时间戳。
  • 示例：

    const startTime = performance.now(); // 精确到毫秒
    

• 页面关闭时间：

  • 使用 beforeunload 或 unload 事件监听用户离开页面的时间。
  • 示例：

    window.addEventListener('beforeunload', () => {
        const endTime = performance.now();
        const duration = (endTime - startTime) / 1000; // 计算停留时间
    });
    

(2) 心跳机制

• 检测用户活动：

  • 使用 setInterval 定期检查用户是否与页面交互（如鼠标移动、键盘输入、页面焦点）。
  • 示例：

    document.addEventListener('mousemove', updateActiveTime);
    document.addEventListener('keydown', updateActiveTime);
    
    function updateActiveTime() {
        lastActive = new Date().getTime();
    }
    

• 排除非活动时间：

  • 检查 document.hasFocus() 判断页面是否处于焦点状态。
  • 示例：

    if (document.hasFocus()) {
        activeTime += (now - lastActive);
    }
    

(3) 数据传输

• 异步上报：

  • 使用 fetch 或 XMLHttpRequest 将停留时间数据发送到服务器。
  • 示例：

    fetch('/track-stay-time', {
        method: 'POST',
        body: JSON.stringify({ page: window.location.href, duration }),
    });
    

• 图片请求（Beacon）：

  • 对于可靠性要求高的场景，可以使用 navigator.sendBeacon 发送数据。
  • 示例：

    navigator.sendBeacon('/track-stay-time', JSON.stringify({ page: window.location.href, duration }));
    

(4) 数据存储与分析

• 服务器端存储：
  • 接收到的数据存储在数据库中，用于后续分析。
• 可视化报告：
  • 通过算法生成停留时间的统计报告（如平均值、分布图）。

---

4. 图示说明

(1) 停留时间记录流程

用户访问页面 -> 记录加载时间 -> 监听用户活动 -> 记录关闭时间 -> 计算停留时间
       |
       v
发送数据到服务器 -> 存储与分析 -> 生成报告

(2) 心跳机制示例

每秒检查一次用户活动：
+--------------------------+
| 用户活动                | 更新活跃时间 |
+--------------------------+
| 用户无活动              | 不更新时间   |
+--------------------------+
| 页面失去焦点            | 停止计时     |
+--------------------------+

---

5. 总结

(1) 核心组成部分

• 页面加载时间：记录用户打开页面的时间点。
• 页面关闭时间：记录用户离开页面的时间点。
• 心跳机制：检测用户是否与页面交互。
• 数据上报：将停留时间数据发送到服务器。

(2) 使用场景

• 用户行为分析。
• 页面优化。
• 广告效果评估。
• 转化率跟踪。

(3) 底层原理

• 时间戳记录：通过 Date.now() 或 performance.now() 获取时间戳。
• 心跳机制：定期检测用户活动，排除非活动时间。
• 数据传输：使用 fetch 或 sendBeacon 上报数据。
• 数据存储与分析：清洗、存储数据并生成报告。