feat: 实现的功能 Home 页面追踪(2个事件)
**Home 页面**: 1. **页面访问** - 了解流量来源、登录转化率 2. **功能卡片点击** - 识别最受欢迎的功能 3. **推荐功能效果** - 分析特色功能(新闻中心)的点击率
This commit is contained in:
@@ -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);
|
||||
}}
|
||||
>
|
||||
使用
|
||||
|
||||
Reference in New Issue
Block a user