diff --git a/src/views/Home/HomePage.js b/src/views/Home/HomePage.js index 1fd38f6f..0a7f5321 100755 --- a/src/views/Home/HomePage.js +++ b/src/views/Home/HomePage.js @@ -1,5 +1,5 @@ // src/views/Home/HomePage.js - 专业投资分析平台 -import React, { useEffect } from 'react'; +import React, { useEffect, useCallback } from 'react'; import { Box, Container, @@ -21,10 +21,13 @@ import heroBg from '../../assets/img/BackgroundCard1.png'; import '../../styles/home-animations.css'; import { logger } from '../../utils/logger'; import MidjourneyHeroSection from '../Community/components/MidjourneyHeroSection'; +import { usePostHogTrack } from '../../hooks/usePostHogRedux'; +import { ACQUISITION_EVENTS } from '../../lib/constants'; export default function HomePage() { const { user, isAuthenticated } = useAuth(); // ⚡ 移除 isLoading,不再依赖它 const navigate = useNavigate(); + const { track } = usePostHogTrack(); // PostHog 追踪 const [imageLoaded, setImageLoaded] = React.useState(false); // 响应式配置 @@ -46,6 +49,15 @@ export default function HomePage() { }); }, [user?.id, isAuthenticated]); // 只依赖 user.id,避免无限循环 + // 🎯 PostHog 追踪:页面浏览 + useEffect(() => { + track(ACQUISITION_EVENTS.LANDING_PAGE_VIEWED, { + timestamp: new Date().toISOString(), + is_authenticated: isAuthenticated, + user_id: user?.id || null, + }); + }, [track, isAuthenticated, user?.id]); + // 核心功能配置 - 5个主要功能 const coreFeatures = [ { @@ -106,15 +118,25 @@ export default function HomePage() { ]; // @TODO 如何区分内部链接和外部链接? - const handleProductClick = (url) => { - if (url.startsWith('http')) { + const handleProductClick = useCallback((feature) => { + // 🎯 PostHog 追踪:功能卡片点击 + track(ACQUISITION_EVENTS.FEATURE_CARD_CLICKED, { + feature_id: feature.id, + feature_title: feature.title, + feature_url: feature.url, + is_featured: feature.featured || false, + link_type: feature.url.startsWith('http') ? 'external' : 'internal', + }); + + // 原有导航逻辑 + if (feature.url.startsWith('http')) { // 外部链接,直接打开 - window.open(url, '_blank'); + window.open(feature.url, '_blank'); } else { // 内部路由 - navigate(url); + navigate(feature.url); } - }; + }, [track, navigate]); return ( @@ -273,7 +295,7 @@ export default function HomePage() { borderRadius="full" fontWeight="bold" w={{ base: '100%', md: 'auto' }} - onClick={() => handleProductClick(coreFeatures[0].url)} + onClick={() => handleProductClick(coreFeatures[0])} minH="44px" flexShrink={0} > @@ -305,7 +327,7 @@ export default function HomePage() { borderColor: `${feature.color}.400`, transform: 'translateY(-2px)' }} - onClick={() => handleProductClick(feature.url)} + onClick={() => handleProductClick(feature)} minH={{ base: 'auto', md: '180px' }} > @@ -343,7 +365,7 @@ export default function HomePage() { minH="44px" onClick={(e) => { e.stopPropagation(); - handleProductClick(feature.url); + handleProductClick(feature); }} > 使用