feat: 完善 PostHog 用户生命周期追踪 + 性能优化
新增功能:
1. 首次访问追踪 (first_visit)
- 记录用户来源(referrer、UTM参数)
- 记录落地页
- 使用 localStorage 永久标记
2. 首次登录追踪 (first_login)
- 区分首次登录和后续登录
- 按用户 ID 独立标记
- 用于计算新用户激活率
3. 登录/登出事件追踪
- 登录成功追踪 (user_logged_in)
- 登出事件追踪 (user_logged_out,必须在 resetUser 之前)
- 注册事件追踪 (user_registered)
4. 页面浏览时长追踪 (page_view_duration)
- 路由切换时自动计算停留时长
- 页面关闭时发送最终时长
- 过滤停留时间 < 1秒的快速跳转
性能优化:
1. 新增 trackEventAsync 函数
- 使用 requestIdleCallback 在浏览器空闲时发送非关键事件
- Safari 等旧浏览器降级到 setTimeout
- 超时保护(最多延迟 2秒)
2. 异步追踪非关键事件
- first_visit - 不阻塞首屏渲染
- page_view_duration - 不阻塞页面切换
3. 关键事件保持同步
- user_registered、user_logged_in、first_login、user_logged_out
- 确保数据准确性和完整性
分析能力提升:
- ✅ 营销渠道 ROI 分析(UTM 参数追踪)
- ✅ 新用户激活率分析(首次登录标记)
- ✅ 用户留存率分析(注册→首次登录→后续登录)
- ✅ 页面热度分析(停留时长统计)
- ✅ 流失用户识别(7天未登录,需后端支持)
This commit is contained in:
@@ -185,6 +185,30 @@ export const trackEvent = (eventName, properties = {}) => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 异步追踪事件(不阻塞主线程)
|
||||
* 使用 requestIdleCallback 在浏览器空闲时发送事件
|
||||
*
|
||||
* @param {string} eventName - 事件名称
|
||||
* @param {object} properties - 事件属性
|
||||
*/
|
||||
export const trackEventAsync = (eventName, properties = {}) => {
|
||||
// 浏览器支持 requestIdleCallback 时使用(推荐)
|
||||
if (typeof requestIdleCallback !== 'undefined') {
|
||||
requestIdleCallback(
|
||||
() => {
|
||||
trackEvent(eventName, properties);
|
||||
},
|
||||
{ timeout: 2000 } // 最多延迟 2 秒(防止永远不执行)
|
||||
);
|
||||
} else {
|
||||
// 降级方案:使用 setTimeout(兼容性更好)
|
||||
setTimeout(() => {
|
||||
trackEvent(eventName, properties);
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Track page view
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user