前端埋点-分析用户在线时间

使用技术点：

visibilitychange

navigator.sendBeacon()

参考文档链接：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event
https://zhuanlan.zhihu.com/p/381796039

设计思路

1. 进入页面存储一个开始时间
2. 离开页面的时候与后端通信：
   传递开始时间 结束时间

监测场景

• 切换应用
• 关闭浏览器（左上角的 叉叉）
• 清除后台
• 锁屏

核心代码

export function visibilitywindow() {
  document.addEventListener('visibilitychange', function () {
    if (document.visibilityState !== 'visible') {
      const timer: any = dayjs().format('YYYY-MM-DD HH:mm:ss');
      const user = Encryption.decodeBase64(localStorage.getItem('user'));
      const data = {
        end_time: timer,
        start_time: localStorage.getItem('startTime'),
        user_id: user?.user.user_id,
      };
      if (localStorage.getItem('startTime')) {
        const flag = reportData('/index/Service/sendUserActive', data);
        if (flag) {
          localStorage.removeItem('startTime');
        }
      }
    } else {
      localStorage.setItem('startTime', dayjs().format('YYYY-MM-DD HH:mm:ss'));
    }
  });
}
const reportData = (url, data?) => {
  const flag = navigator.sendBeacon(url, JSON.stringify(data));
  return flag;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

根据业务在页面去判断是否调用

useEffect(() => {
    const user = Encryption.decodeBase64(localStorage.getItem('user'));
    if (isApp && user?.user?.user_id) {
      if (!localStorage.getItem('startTime')) {
        localStorage.setItem('startTime', dayjs().format('YYYY-MM-DD HH:mm:ss'));
      }
      visibilitywindow();
    }
  }, []);
1
2
3
4
5
6
7
8
9

为了开始时间不冲突，登陆成功之后单纯记录一下

  localStorage.setItem('startTime', dayjs().format('YYYY-MM-DD HH:mm:ss'));
1

电脑模拟手机

切换应用—切换浏览器tab
关闭浏览器
清除后台–alt+tab清除所在浏览器
锁屏–电脑锁屏

监测请求

使用软件 Fiddler,可查看传递参数，请求返回

fiddler的session图标图片含义解释

手机链接电脑本地localhost代码

关闭电脑防火墙
cmd-ipconfig获取ip地址
拼接地址手机访问即可