统计用户停留时间前端方案

前端工程师铲屎官秃头码妹

负责 toC 端的小伙伴可能更多的会遇到产品需要统计用户轨迹的场景，统计用户停留时间是最常见的统计指标。相比 Google Analytics 统计和百度统计，自定义统计更加可定制化不过随之而来的是风险大，以及开发人员的统计精确度问题。不过鉴于各种限制（比如 Ga 翻墙）所以还是有些需要自己统计的场景。

GA 统计已经帮我们完善了大部分基础统计，比如用户是否失焦页面、进入页面开始时间、停留页面时间等。所以只需要自定义添加剩余的业务埋点。

触发开始结束时间

（进入页面）首次加载、页面跳转、刷新、浏览器前进后推
（离开页面）关闭窗口、页面跳转、刷新、浏览器前进后推

这里提供三种方案。针对不同精确度以及使用场景。

方案一 navigator.sendBeacon()

使用 navigator.sendBeacon(url, data)在用户卸载页面时上报数据，这个方案最直观和高效，也是 GA 统计用户停留时间的实现方案。采用 FetchApi 来发起异步请求不阻塞页面卸载, 第二个参数可以是使用 Fetch 创建请求时使用的任何请求体类型（ Blob，BufferSource，FormData 或者 URLSearchParams）。

浏览器对 Beacon 的支持很好，不过 IE 依旧不支持。
相比 XHR 请求，可以在不阻塞页面卸载的情况下正常上报数据。

示例代码：

import { collectDomain } from "config"; 
 
export const reportData = () => { 
  let startTime = performance.now(); // 进入页面的时间点 
 
  let logVisit = async function() { 
 if (!navigator.sendBeacon) return false; 
 
 const endeTime = performance.now(); // 页面卸载的时间点 
 
    let data = new FormData(); 
 const reportDataList = { 
      event_id, 
      event_name, 
      event_attr, 
        ... 
      stayTime: endeTime - startTime // 用户停留时间 
    }; 
 Object.keys(reportDataList).map(item => { 
      data.append(item, reportDataList[item]); 
    }); 
 
    navigator.sendBeacon("/api/collectData", data); // 异步上报的方式 
  }; 
 window.addEventListener("beforeunload", logVisit); 
};

方案二进入下一页面时上报

既然方案一接近完美为什么有方案 B ? 因为公司的数据中心部门只采集 json 数据格式的数据，当然优先协商解决，否则可参考方案二。

在卸载页面 A 时存储要上报数据(reportDataA) 到本地存储，进入页面 B 的时候再上报页面 A 的数据(reportDataA)。

本地存储的方式可以是（eventBus、indexDB、localstorage、cookie）

示例代码：

import { 
  set as setCookie, 
  get as getCookie, 
  remove as removeCookie 
} from "js-cookie"; 
 
import { dataCollectReport } from "./../services/app"; 
 
const reportDataAxios = async data => { 
  await dataCollectReport(data); 
}; 
 
export const reportData = () => { 
  let startTime = performance.now(); 
 
 // 卸载页面时存储埋点数据到本地缓存, 但未上报 
  let beforeunloadReportData = async () => { 
 const endeTime = performance.now(); 
 const event_id = getCookie("reportDataEventId"); 
 
 if (!event_id) return false; 
 const storageReportData = { 
      event_id, 
      ... 
      stayTime: endeTime - startTime, 
    }; 
    setCookie('storageReportData', reportDataList); 
 
  }; 
 window.addEventListener("beforeunload", beforeunloadReportData); 
};

方案三精确度 100%，但页面性能降低的降级方案

场景：直播平台统计学员在页面停留时间需要统计考勤，需要精确度达到 100%。

轮询当前页面最新时间戳，存储要上报数据(reportDataA) 到本地存储，进入页面 B 的时候再上报页面 A 的数据(reportDataA)。

这种方案虽然精确度最高，但是同时最消耗页面性能，酌情使用。

其他埋点要考虑的细节

超链接统计埋点

Image Beacon 方案：使用 1x1 的透明 gif 图片发送埋点。

使用图片埋点有几个好处：

执行过程不会引起页面阻塞
GIF 的最低合法体积最小（最小的 BMP 文件需要 74 个字节，PNG 需要 67 个字节，而合法的 GIF，只需要 43 个字节。
能够完成整个 http 请求加响应。

只可以是 GET 请求方式

示例代码：

const thisPage = location.href; 
const referringPage = document.referrer || ""; 
const beacon = new Image(); 
beacon.src = 
 "http://www.example.com/logger/beacon.gif?page=" + 
  encodeURI(thisPage) + 
 "&ref=" + 
  encodeURI(referringPage);



// 业务代码
<a href="超链接跳转前要上报数据"> 
  // 这里引入刚创建的img 
</a>

单页面应用跳转页面

首先要了解 React Router 跳转的实现原理
单页面路由的切换主要有两种方式
hashchange 变化，监听带"#"链接变化。
html5 的 HistoryApi，监听 window.history 的变化。

来看下代码：

// 第一阶段：我们对原生方法进行包装，调用前执行 dispatchEvent 了一个同样的事件 
function aop(type) { 
 var source = window.history[type]; 
 return function() { 
 var event = new Event(type); 
    event.arguments = arguments; 
 window.dispatchEvent(event); 
 var rewrite = source.apply(this, arguments); 
 return rewrite; 
  }; 
} 
 
// 第二阶段：将 pushState 和 replaceState 进行基于 AOP 思想的代码注入 
window.history.pushState = aop("pushState"); 
window.history.replaceState = aop("replaceState"); // 更改路由，不会留下历史记录 
 
// 第三阶段：捕获pushState 和 replaceState 
window.addEventListener( 
 "pushState", 
 function() { 
 // 上报【进入页面】事件 
  }, 
 true 
); 
window.addEventListener( 
 "replaceState", 
 function() { 
 // 上报【进入页面】事件 
  }, 
 true 
);

友情链接跳转

image beacon 方案参考文献
 w3c navigator.sendBeacon()
单页面应用数据采集

统计用户停留时间前端方案

统计用户停留时间前端方案

触发开始结束时间

方案一 navigator.sendBeacon()

方案二进入下一页面时上报

方案三精确度 100%，但页面性能降低的降级方案

其他埋点要考虑的细节

超链接统计埋点

单页面应用跳转页面

友情链接跳转

Recommend

Facebook的大麻烦：用户平均停留时间大幅缩水

前端通信：ajax设计方案（八）- 设计请求池，让前端通信快

前端页面css设计方案 - 左手拍拍

前端埋点统计方案思考

使用 Redis 统计在线用户人数 — blog.huangz.me

使用 Nginx 构建前端日志统计服务

CNZZ自5月10日起停止免费用户的网站统计使用

Xcode LLDB耗时监控统计方案

停留时间限制措施生效？仅有低于20%无证移民再次申请庇护所

自定义开发odoo14的统计在线用户人数 - 感悟人生

About Joyk

统计用户停留时间前端方案

统计用户停留时间前端方案

触发开始结束时间

方案一 navigator.sendBeacon()

方案二 进入下一页面时上报

方案三 精确度 100%，但页面性能降低的降级方案

其他埋点要考虑的细节

超链接统计埋点

单页面应用跳转页面

友情链接跳转

Recommend

About Joyk

方案二进入下一页面时上报

方案三精确度 100%，但页面性能降低的降级方案