react封装记录用户页面停留时长hook：usePageStayTime

本文链接：https://blog.csdn.net/weixin_42466536/article/details/136627493

功能

记录用户页面操作时长，并埋点上报

记录停留时长方案

改为通过mousemove判断，鼠标移动代表用户确实在操作本页面

/**
 * 心跳收集浏览时常
 * @description
 * 1.判定标准为30s内是否发生鼠标移动，发生即为有效浏览
 * 2.n秒统计一次有效操作，无效则主动上报时常
 * 3.轮询周期计算实际操作时间,并累计操作时间
 * 4.中断操作，但页面未关闭，则轮询等待重启上报
 * 5.关闭则销毁收集器
 */
 export function heartRateGatherStayTime(pageName) {
  let flag = false;
  let startTime = null;
  let durationTime = null;
  let calculateTime = 0;

  const listener = () => {
    flag = true;
    if (!startTime) {
      startTime = Date.now();
    }
    durationTime = Date.now() - startTime;
  };
  document.addEventListener('mousemove', listener);

  // 轮询判定是有为效操作
  const timer = setInterval(() => {
    // 如果没有操作，且已有累计时常，则主动上报
    if (!flag && calculateTime) {
      // 上报时常
      browsePageViewReport(pageName, calculateTime);
      // 重置时间，等待下次统计
      calculateTime = 0;
    } else if (flag) {
      // 叠加操作时间
      calculateTime += durationTime;
    }
    // 重置起始及累计时间
    startTime = null;
    durationTime = null;
    flag = false;
  }, REPORT_PAGE_VIEW_INTERVAL_TIME || 30000);

  return () => {
    clearInterval(timer);
    document.removeEventListener('mousemove', listener);
    if (durationTime) {
      browsePageViewReport(pageName, durationTime + calculateTime);
    }
  };
}

上报逻辑browsePageViewReport方法就各个项目自己自定义了