feat: 完成集成后,您可以在 PostHog 中分析:
- 用户搜索行为:搜索频率、热门搜索词、搜索成功率 - 概念关注度:哪些概念最受关注、点击排名分布 - 热力图使用情况:用户点击的股票市值分布、涨跌偏好 - 日期筛选模式:用户倾向查看哪些日期的数据 - 转化漏斗:从页面浏览 → 搜索 → 点击 → 详情的转化率
This commit is contained in:
@@ -61,6 +61,7 @@ import { BsGraphUp, BsLightningFill } from 'react-icons/bs';
|
||||
import { keyframes } from '@emotion/react';
|
||||
import * as echarts from 'echarts';
|
||||
import { logger } from '../../utils/logger';
|
||||
import { useStockOverviewEvents } from './hooks/useStockOverviewEvents';
|
||||
// Navigation bar now provided by MainLayout
|
||||
// import HomeNavbar from '../../components/Navbars/HomeNavbar';
|
||||
|
||||
@@ -83,6 +84,20 @@ const StockOverview = () => {
|
||||
const heatmapRef = useRef(null);
|
||||
const heatmapChart = useRef(null);
|
||||
|
||||
// 🎯 事件追踪 Hook
|
||||
const {
|
||||
trackMarketStatsViewed,
|
||||
trackSearchInitiated,
|
||||
trackStockSearched,
|
||||
trackSearchResultClicked,
|
||||
trackConceptClicked,
|
||||
trackConceptStockClicked,
|
||||
trackHeatmapStockClicked,
|
||||
trackStockDetailViewed,
|
||||
trackConceptDetailViewed,
|
||||
trackDateChanged,
|
||||
} = useStockOverviewEvents({ navigate });
|
||||
|
||||
// 状态管理
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
@@ -141,11 +156,18 @@ const StockOverview = () => {
|
||||
});
|
||||
|
||||
if (data.success) {
|
||||
setSearchResults(data.data || []);
|
||||
const results = data.data || [];
|
||||
setSearchResults(results);
|
||||
setShowResults(true);
|
||||
|
||||
// 🎯 追踪搜索查询
|
||||
trackStockSearched(query, results.length);
|
||||
} else {
|
||||
logger.warn('StockOverview', '搜索失败', data.error || '请稍后重试', { query });
|
||||
// ❌ 移除搜索失败 toast(非关键操作)
|
||||
|
||||
// 🎯 追踪搜索无结果
|
||||
trackStockSearched(query, 0);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('StockOverview', 'searchStocks', error, { query });
|
||||
@@ -219,18 +241,23 @@ const StockOverview = () => {
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
setMarketStats(prevStats => ({
|
||||
const newStats = {
|
||||
...data.summary,
|
||||
// 保留之前从 heatmap 接口获取的上涨/下跌家数
|
||||
rising_count: prevStats?.rising_count,
|
||||
falling_count: prevStats?.falling_count
|
||||
}));
|
||||
falling_count: prevStats?.falling_count,
|
||||
date: data.trade_date
|
||||
};
|
||||
setMarketStats(newStats);
|
||||
setAvailableDates(data.available_dates || []);
|
||||
if (!selectedDate) setSelectedDate(data.trade_date);
|
||||
logger.debug('StockOverview', '市场统计数据加载成功', {
|
||||
date: data.trade_date,
|
||||
availableDatesCount: data.available_dates?.length || 0
|
||||
});
|
||||
|
||||
// 🎯 追踪市场统计数据查看
|
||||
trackMarketStatsViewed(newStats);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('StockOverview', 'fetchMarketStats', error, { date });
|
||||
@@ -403,6 +430,16 @@ const StockOverview = () => {
|
||||
heatmapChart.current.on('click', function(params) {
|
||||
// 只有点击个股(有code的节点)才跳转
|
||||
if (params.data && params.data.code && !params.data.children) {
|
||||
const stock = {
|
||||
code: params.data.code,
|
||||
name: params.data.name,
|
||||
change_percent: params.data.change
|
||||
};
|
||||
const marketCapRange = getMarketCapRange(params.data.value);
|
||||
|
||||
// 🎯 追踪热力图股票点击
|
||||
trackHeatmapStockClicked(stock, marketCapRange);
|
||||
|
||||
navigate(`/company?scode=${params.data.code}`);
|
||||
}
|
||||
});
|
||||
@@ -412,7 +449,7 @@ const StockOverview = () => {
|
||||
});
|
||||
// ❌ 移除热力图渲染失败 toast(非关键操作)
|
||||
}
|
||||
}, [colorMode, goldColor, navigate]); // ✅ 移除 toast 依赖
|
||||
}, [colorMode, goldColor, navigate, trackHeatmapStockClicked]); // ✅ 添加追踪函数依赖
|
||||
|
||||
// 获取市值区间
|
||||
const getMarketCapRange = (cap) => {
|
||||
@@ -427,6 +464,12 @@ const StockOverview = () => {
|
||||
const handleSearchChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setSearchQuery(value);
|
||||
|
||||
// 🎯 追踪搜索开始(首次输入时)
|
||||
if (value && !searchQuery) {
|
||||
trackSearchInitiated();
|
||||
}
|
||||
|
||||
debounceSearch(value);
|
||||
};
|
||||
|
||||
@@ -438,19 +481,30 @@ const StockOverview = () => {
|
||||
};
|
||||
|
||||
// 选择股票
|
||||
const handleSelectStock = (stock) => {
|
||||
const handleSelectStock = (stock, index = 0) => {
|
||||
// 🎯 追踪搜索结果点击
|
||||
trackSearchResultClicked(stock, index);
|
||||
|
||||
navigate(`/company?scode=${stock.stock_code}`);
|
||||
handleClearSearch();
|
||||
};
|
||||
|
||||
// 查看概念详情(模仿概念中心:打开对应HTML页)
|
||||
const handleConceptClick = (conceptId, conceptName) => {
|
||||
const htmlPath = `/htmls/${conceptName}.html`;
|
||||
const handleConceptClick = (concept, rank = 0) => {
|
||||
// 🎯 追踪概念点击
|
||||
trackConceptClicked(concept, rank);
|
||||
|
||||
const htmlPath = `/htmls/${concept.concept_name}.html`;
|
||||
window.open(htmlPath, '_blank');
|
||||
};
|
||||
|
||||
// 处理日期选择
|
||||
const handleDateChange = (date) => {
|
||||
const previousDate = selectedDate;
|
||||
|
||||
// 🎯 追踪日期变化
|
||||
trackDateChanged(date, previousDate);
|
||||
|
||||
setSelectedDate(date);
|
||||
setIsCalendarOpen(false);
|
||||
// 重新获取数据
|
||||
@@ -661,7 +715,7 @@ const StockOverview = () => {
|
||||
p={4}
|
||||
cursor="pointer"
|
||||
_hover={{ bg: hoverBg }}
|
||||
onClick={() => handleSelectStock(stock)}
|
||||
onClick={() => handleSelectStock(stock, index)}
|
||||
borderBottomWidth={index < searchResults.length - 1 ? "1px" : "0"}
|
||||
borderColor={borderColor}
|
||||
>
|
||||
@@ -880,7 +934,7 @@ const StockOverview = () => {
|
||||
}}
|
||||
transition="all 0.3s"
|
||||
cursor="pointer"
|
||||
onClick={() => handleConceptClick(concept.concept_id, concept.concept_name)}
|
||||
onClick={() => handleConceptClick(concept, index)}
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
>
|
||||
@@ -951,6 +1005,13 @@ const StockOverview = () => {
|
||||
cursor="pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
// 🎯 追踪概念下的股票标签点击
|
||||
trackConceptStockClicked({
|
||||
code: stock.stock_code,
|
||||
name: stock.stock_name
|
||||
}, concept.concept_name);
|
||||
|
||||
navigate(`/company?scode=${stock.stock_code}`);
|
||||
}}
|
||||
>
|
||||
@@ -969,7 +1030,7 @@ const StockOverview = () => {
|
||||
rightIcon={<FaChevronRight />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleConceptClick(concept.concept_id, concept.concept_name);
|
||||
handleConceptClick(concept, index);
|
||||
}}
|
||||
>
|
||||
查看详情
|
||||
|
||||
Reference in New Issue
Block a user