feat: 实现的功能 Home 页面追踪(2个事件)
**Home 页面**: 1. **页面访问** - 了解流量来源、登录转化率 2. **功能卡片点击** - 识别最受欢迎的功能 3. **推荐功能效果** - 分析特色功能(新闻中心)的点击率
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
// src/views/Home/HomePage.js - 专业投资分析平台
|
// src/views/Home/HomePage.js - 专业投资分析平台
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect, useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Container,
|
Container,
|
||||||
@@ -21,10 +21,13 @@ import heroBg from '../../assets/img/BackgroundCard1.png';
|
|||||||
import '../../styles/home-animations.css';
|
import '../../styles/home-animations.css';
|
||||||
import { logger } from '../../utils/logger';
|
import { logger } from '../../utils/logger';
|
||||||
import MidjourneyHeroSection from '../Community/components/MidjourneyHeroSection';
|
import MidjourneyHeroSection from '../Community/components/MidjourneyHeroSection';
|
||||||
|
import { usePostHogTrack } from '../../hooks/usePostHogRedux';
|
||||||
|
import { ACQUISITION_EVENTS } from '../../lib/constants';
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const { user, isAuthenticated } = useAuth(); // ⚡ 移除 isLoading,不再依赖它
|
const { user, isAuthenticated } = useAuth(); // ⚡ 移除 isLoading,不再依赖它
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const { track } = usePostHogTrack(); // PostHog 追踪
|
||||||
const [imageLoaded, setImageLoaded] = React.useState(false);
|
const [imageLoaded, setImageLoaded] = React.useState(false);
|
||||||
|
|
||||||
// 响应式配置
|
// 响应式配置
|
||||||
@@ -46,6 +49,15 @@ export default function HomePage() {
|
|||||||
});
|
});
|
||||||
}, [user?.id, isAuthenticated]); // 只依赖 user.id,避免无限循环
|
}, [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个主要功能
|
// 核心功能配置 - 5个主要功能
|
||||||
const coreFeatures = [
|
const coreFeatures = [
|
||||||
{
|
{
|
||||||
@@ -106,15 +118,25 @@ export default function HomePage() {
|
|||||||
];
|
];
|
||||||
|
|
||||||
// @TODO 如何区分内部链接和外部链接?
|
// @TODO 如何区分内部链接和外部链接?
|
||||||
const handleProductClick = (url) => {
|
const handleProductClick = useCallback((feature) => {
|
||||||
if (url.startsWith('http')) {
|
// 🎯 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 {
|
} else {
|
||||||
// 内部路由
|
// 内部路由
|
||||||
navigate(url);
|
navigate(feature.url);
|
||||||
}
|
}
|
||||||
};
|
}, [track, navigate]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
@@ -273,7 +295,7 @@ export default function HomePage() {
|
|||||||
borderRadius="full"
|
borderRadius="full"
|
||||||
fontWeight="bold"
|
fontWeight="bold"
|
||||||
w={{ base: '100%', md: 'auto' }}
|
w={{ base: '100%', md: 'auto' }}
|
||||||
onClick={() => handleProductClick(coreFeatures[0].url)}
|
onClick={() => handleProductClick(coreFeatures[0])}
|
||||||
minH="44px"
|
minH="44px"
|
||||||
flexShrink={0}
|
flexShrink={0}
|
||||||
>
|
>
|
||||||
@@ -305,7 +327,7 @@ export default function HomePage() {
|
|||||||
borderColor: `${feature.color}.400`,
|
borderColor: `${feature.color}.400`,
|
||||||
transform: 'translateY(-2px)'
|
transform: 'translateY(-2px)'
|
||||||
}}
|
}}
|
||||||
onClick={() => handleProductClick(feature.url)}
|
onClick={() => handleProductClick(feature)}
|
||||||
minH={{ base: 'auto', md: '180px' }}
|
minH={{ base: 'auto', md: '180px' }}
|
||||||
>
|
>
|
||||||
<CardBody p={{ base: 5, md: 6 }}>
|
<CardBody p={{ base: 5, md: 6 }}>
|
||||||
@@ -343,7 +365,7 @@ export default function HomePage() {
|
|||||||
minH="44px"
|
minH="44px"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
handleProductClick(feature.url);
|
handleProductClick(feature);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
使用
|
使用
|
||||||
|
|||||||
Reference in New Issue
Block a user