feat: 实现的功能 Home 页面追踪(2个事件)

**Home 页面**:
1. **页面访问** - 了解流量来源、登录转化率
2. **功能卡片点击** - 识别最受欢迎的功能
3. **推荐功能效果** - 分析特色功能(新闻中心)的点击率
This commit is contained in:
zdl
2025-10-28 21:24:42 +08:00
parent 8f3af4ed07
commit bca2ad4f81

View File

@@ -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 (
<Box>
@@ -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' }}
>
<CardBody p={{ base: 5, md: 6 }}>
@@ -343,7 +365,7 @@ export default function HomePage() {
minH="44px"
onClick={(e) => {
e.stopPropagation();
handleProductClick(feature.url);
handleProductClick(feature);
}}
>
使用