diff --git a/src/components/Auth/AuthModalManager.js b/src/components/Auth/AuthModalManager.js index d1314ea4..0e0323b9 100644 --- a/src/components/Auth/AuthModalManager.js +++ b/src/components/Auth/AuthModalManager.js @@ -1,5 +1,5 @@ // src/components/Auth/AuthModalManager.js -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import { Modal, ModalOverlay, @@ -10,6 +10,8 @@ import { } from '@chakra-ui/react'; import { useAuthModal } from '../../hooks/useAuthModal'; import AuthFormContent from './AuthFormContent'; +import { trackEventAsync } from '@lib/posthog'; +import { ACTIVATION_EVENTS } from '@lib/constants'; /** * 全局认证弹窗管理器 @@ -21,6 +23,27 @@ export default function AuthModalManager() { closeModal } = useAuthModal(); + // ✅ 追踪弹窗打开次数(用于漏斗分析) + const hasTrackedOpen = useRef(false); + + useEffect(() => { + if (isAuthModalOpen && !hasTrackedOpen.current) { + // ✅ 使用异步追踪,不阻塞渲染 + trackEventAsync(ACTIVATION_EVENTS.LOGIN_PAGE_VIEWED, { + timestamp: new Date().toISOString(), + modal_type: 'auth_modal', + trigger_source: 'user_action', // 可以通过 props 传递更精确的来源 + }); + + hasTrackedOpen.current = true; + } + + // ✅ 弹窗关闭时重置标记(允许再次追踪) + if (!isAuthModalOpen) { + hasTrackedOpen.current = false; + } + }, [isAuthModalOpen]); + // 响应式尺寸配置 const modalSize = useBreakpointValue({ base: "md", // 移动端:md(不占满全屏)