vf_react/docs/POSTHOG_EVENT_TRACKING.md

PostHog 事件追踪实施总结

✅ 已完成的追踪

1. Home 页面（首页/落地页）

已实施的追踪事件:

📄 页面浏览

• 事件: LANDING_PAGE_VIEWED
• 触发时机: 页面加载
• 属性:
  • timestamp - 访问时间
  • is_authenticated - 是否已登录
  • user_id - 用户ID（如果已登录）

🎯 功能卡片点击

• 事件: FEATURE_CARD_CLICKED
• 触发时机: 用户点击任何功能卡片
• 属性:
  • feature_id - 功能ID（news-catalyst, concepts, stocks, etc.）
  • feature_title - 功能标题
  • feature_url - 目标URL
  • is_featured - 是否为推荐功能（新闻中心为 true）
  • link_type - 链接类型（internal/external）

追踪的6个核心功能:

1. 新闻中心 (news-catalyst) - 推荐功能，黄色边框
2. 概念中心 (concepts)
3. 个股信息汇总 (stocks)
4. 涨停板块分析 (limit-analyse)
5. 个股罗盘 (company)
6. 模拟盘交易 (trading-simulation)

---

2. StockOverview 页面（个股中心）✅ 已完成

注意：个股中心页面已完全实现 PostHog 追踪，通过 src/views/StockOverview/hooks/useStockOverviewEvents.js Hook。

已实施的追踪事件:

📄 页面浏览

• 事件: STOCK_OVERVIEW_VIEWED
• 触发时机: 页面加载
• 属性:
  • timestamp - 访问时间

📊 市场统计数据查看

• 事件: STOCK_LIST_VIEWED
• 触发时机: 加载市场统计数据
• 属性:
  • total_market_cap - 总市值
  • total_volume - 总成交量
  • rising_stocks - 上涨股票数
  • falling_stocks - 下跌股票数
  • data_date - 数据日期

🔍 搜索追踪

• 事件: SEARCH_INITIATED / STOCK_SEARCHED
• 触发时机: 用户输入搜索、完成搜索
• 属性:
  • query - 搜索关键词
  • result_count - 搜索结果数量
  • has_results - 是否有结果
  • context - 固定为 'stock_overview'

🎯 搜索结果点击

• 事件: SEARCH_RESULT_CLICKED
• 触发时机: 用户点击搜索结果
• 属性:
  • stock_code - 股票代码
  • stock_name - 股票名称
  • exchange - 交易所
  • position - 在搜索结果中的位置
  • context - 固定为 'stock_overview'

🔥 概念卡片点击

• 事件: CONCEPT_CLICKED
• 触发时机: 用户点击热门概念卡片
• 属性:
  • concept_name - 概念名称
  • concept_code - 概念代码
  • change_percent - 涨跌幅
  • stock_count - 股票数量
  • rank - 排名
  • source - 固定为 'daily_hot_concepts'

🏷️ 概念股票标签点击

• 事件: CONCEPT_STOCK_CLICKED
• 触发时机: 点击概念下的股票标签
• 属性:
  • stock_code - 股票代码
  • stock_name - 股票名称
  • concept_name - 所属概念
  • source - 固定为 'daily_hot_concepts_tag'

📊 热力图股票点击

• 事件: STOCK_CLICKED
• 触发时机: 点击热力图中的股票
• 属性:
  • stock_code - 股票代码
  • stock_name - 股票名称
  • change_percent - 涨跌幅
  • market_cap_range - 市值区间
  • source - 固定为 'market_heatmap'

📅 日期选择变化

• 事件: SEARCH_FILTER_APPLIED
• 触发时机: 用户选择不同的交易日期
• 属性:
  • filter_type - 固定为 'date'
  • filter_value - 新选择的日期
  • previous_value - 之前的日期
  • context - 固定为 'stock_overview'

实施方式: Custom Hook (useStockOverviewEvents.js) 已集成

---

3. Concept 页面（概念中心）

已实施的追踪事件:

📄 页面浏览

• 事件: CONCEPT_CENTER_VIEWED
• 触发时机: 页面加载
• 属性:
  • timestamp - 访问时间

🔍 搜索查询

• 事件: SEARCH_QUERY_SUBMITTED
• 触发时机: 用户搜索概念
• 属性:
  • query - 搜索关键词
  • category - 固定为 'concept'
  • result_count - 搜索结果数量
  • has_results - 是否有结果

🎚️ 筛选追踪

• 事件: SEARCH_FILTER_APPLIED
• 触发时机: 用户更改筛选条件
• 属性:
  • filter_type - 筛选类型（sort/date）
  • filter_value - 筛选值
  • previous_value - 之前的值
  • context - 固定为 'concept_center'

支持的筛选类型:

1. 排序 (sort): 涨跌幅/相关度/股票数量/概念名称
2. 日期范围 (date): 选择交易日期

🎯 概念卡片点击

• 事件: CONCEPT_CLICKED
• 触发时机: 用户点击概念卡片
• 属性:
  • concept_id - 概念ID
  • concept_name - 概念名称
  • change_percent - 涨跌幅
  • stock_count - 股票数量
  • position - 在列表中的位置
  • source - 固定为 'concept_center_list'

👀 查看个股

• 事件: CONCEPT_STOCKS_VIEWED
• 触发时机: 用户点击"查看个股"按钮
• 属性:
  • concept_name - 概念名称
  • stock_count - 股票数量
  • source - 固定为 'concept_center'

🏷️ 概念股票点击

• 事件: CONCEPT_STOCK_CLICKED
• 触发时机: 点击概念股票表格中的股票
• 属性:
  • stock_code - 股票代码
  • stock_name - 股票名称
  • concept_name - 所属概念
  • source - 固定为 'concept_center_stock_table'

📊 历史时间轴查看

• 事件: CONCEPT_TIMELINE_VIEWED
• 触发时机: 用户点击"历史时间轴"按钮
• 属性:
  • concept_id - 概念ID
  • concept_name - 概念名称
  • source - 固定为 'concept_center'

📄 翻页追踪

• 事件: NEWS_LIST_VIEWED
• 触发时机: 用户翻页
• 属性:
  • page - 页码
  • filters - 当前筛选条件
    • sort - 排序方式
    • has_query - 是否有搜索词
    • date - 日期
  • context - 固定为 'concept_center'

🔄 视图模式切换

• 事件: VIEW_MODE_CHANGED
• 触发时机: 用户切换网格/列表视图
• 属性:
  • view_mode - 新视图模式（grid/list）
  • previous_mode - 之前的模式
  • context - 固定为 'concept_center'

---

4. Company 页面（公司详情/个股罗盘）

已实施的追踪事件:

📄 页面浏览

• 事件: COMPANY_PAGE_VIEWED
• 触发时机: 页面加载
• 属性:
  • timestamp - 访问时间
  • stock_code - 当前查看的股票代码

🔍 股票搜索

• 事件: STOCK_SEARCHED
• 触发时机: 用户输入股票代码并查询
• 属性:
  • query - 搜索的股票代码
  • stock_code - 股票代码
  • previous_stock_code - 之前查看的股票代码
  • context - 固定为 'company_page'

🔄 Tab 切换

• 事件: TAB_CHANGED
• 触发时机: 用户切换不同的 Tab
• 属性:
  • tab_index - Tab 索引（0-3）
  • tab_name - Tab 名称（公司概览/股票行情/财务全景/盈利预测）
  • previous_tab_index - 之前的 Tab 索引
  • stock_code - 当前股票代码
  • context - 固定为 'company_page'

支持的 Tab:

1. 公司概览 (index 0): 公司基本信息
2. 股票行情 (index 1): 实时行情数据
3. 财务全景 (index 2): 财务报表分析
4. 盈利预测 (index 3): 盈利预测数据

⭐ 自选股管理

• 事件: WATCHLIST_ADDED / WATCHLIST_REMOVED
• 触发时机: 用户添加/移除自选股
• 属性:
  • stock_code - 股票代码
  • source - 固定为 'company_page'

---

5. Community 页面（新闻催化分析）

已实施的追踪事件:

📄 页面浏览

• 事件: COMMUNITY_PAGE_VIEWED
• 触发时机: 页面加载
• 属性:
  • timestamp - 访问时间
  • has_hot_events - 是否有热点事件
  • has_keywords - 是否有热门关键词

🔍 搜索追踪

• 事件: SEARCH_QUERY_SUBMITTED
• 触发时机: 用户输入搜索关键词
• 属性:
  • query - 搜索关键词
  • category - 分类（固定为 'news'）
  • previous_query - 上一次搜索词

🎚️ 筛选追踪

• 事件: SEARCH_FILTER_APPLIED
• 触发时机: 用户更改筛选条件
• 属性:
  • filter_type - 筛选类型（sort/importance/date_range/industry）
  • filter_value - 筛选值
  • previous_value - 上一次的值

支持的筛选类型:

1. 排序 (sort): 最新/最热/重要性
2. 重要性 (importance): 全部/高/中/低
3. 时间范围 (date_range): 今天/近7天/近30天
4. 行业 (industry): 各行业代码

🗞️ 新闻点击追踪

• 事件: NEWS_ARTICLE_CLICKED
• 触发时机: 用户点击新闻事件
• 属性:
  • event_id - 事件ID
  • event_title - 事件标题
  • importance - 重要性等级
  • source - 来源（固定为 'community_page'）
  • has_stocks - 是否包含相关股票
  • has_concepts - 是否包含相关概念

📖 详情查看追踪

• 事件: NEWS_DETAIL_OPENED
• 触发时机: 用户点击"查看详情"
• 属性:
  • event_id - 事件ID
  • source - 来源（固定为 'community_page'）

📄 翻页追踪

• 事件: NEWS_LIST_VIEWED
• 触发时机: 用户翻页
• 属性:
  • page - 页码
  • filters - 当前筛选条件
    • sort - 排序方式
    • importance - 重要性
    • has_query - 是否有搜索词

---

🛠️ 实施方式

方案：Custom Hook 集成（推荐）

优势:

• ✅ 集中管理，易于维护
• ✅ 自动追踪，无需修改组件
• ✅ 符合关注点分离原则
• ✅ 便于测试和调试

修改的文件

0. src/views/StockOverview/hooks/useStockOverviewEvents.js ✅

文件已存在，无需修改。已完整实现个股中心的所有追踪事件。

1. src/views/Concept/hooks/useConceptEvents.js

新建 Hook 文件:

import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
import { RETENTION_EVENTS } from '../../../lib/constants';

提供的追踪函数:

• trackConceptSearched() - 搜索概念
• trackFilterApplied() - 筛选变化
• trackConceptClicked() - 概念点击
• trackConceptStocksViewed() - 查看个股
• trackConceptStockClicked() - 点击概念股票
• trackConceptTimelineViewed() - 历史时间轴
• trackPageChange() - 翻页
• trackViewModeChanged() - 视图切换

2. src/views/Company/hooks/useCompanyEvents.js

新建 Hook 文件:

import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
import { RETENTION_EVENTS } from '../../../lib/constants';

提供的追踪函数:

• trackStockSearched() - 股票搜索
• trackTabChanged() - Tab 切换
• trackWatchlistAdded() - 加入自选
• trackWatchlistRemoved() - 移除自选

3. src/views/Company/index.js

添加的导入:

import { useCompanyEvents } from './hooks/useCompanyEvents';

添加的 Hook:

const {
  trackStockSearched,
  trackTabChanged,
  trackWatchlistAdded,
  trackWatchlistRemoved,
} = useCompanyEvents({ stockCode });

添加的 State:

const [currentTabIndex, setCurrentTabIndex] = useState(0);

修改的函数:

1. handleSearch: 追踪股票搜索
2. handleWatchlistToggle: 追踪自选股添加/移除
3. Tabs onChange: 追踪 Tab 切换

4. src/views/Concept/index.js

添加的导入:

import { useConceptEvents } from './hooks/useConceptEvents';

添加的 Hook:

const {
  trackConceptSearched,
  trackFilterApplied,
  trackConceptClicked,
  trackConceptStocksViewed,
  trackConceptStockClicked,
  trackConceptTimelineViewed,
  trackPageChange,
  trackViewModeChanged,
} = useConceptEvents({ navigate });

修改的函数:

1. handleSearch: 追踪搜索查询
2. handleSortChange: 追踪排序变化
3. handleDateChange: 追踪日期变化
4. handlePageChange: 追踪翻页
5. handleConceptClick: 追踪概念点击
6. handleViewStocks: 追踪查看个股
7. handleViewContent: 追踪历史时间轴
8. 视图切换按钮: 追踪网格/列表切换

3. src/views/Home/HomePage.js

添加的导入:

import { usePostHogTrack } from '../../hooks/usePostHogRedux';
import { ACQUISITION_EVENTS } from '../../lib/constants';

添加的 Hook:

const { track } = usePostHogTrack();

添加的 useEffect（页面浏览追踪）:

useEffect(() => {
  track(ACQUISITION_EVENTS.LANDING_PAGE_VIEWED, {
    timestamp: new Date().toISOString(),
    is_authenticated: isAuthenticated,
    user_id: user?.id || null,
  });
}, [track, isAuthenticated, user?.id]);

修改的函数:

• handleProductClick: 从接收 URL 改为接收完整 feature 对象，添加追踪逻辑

修改后的代码:

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(feature.url, '_blank');
  } else {
    navigate(feature.url);
  }
}, [track, navigate]);

更新的 onClick 事件:

// 从
onClick={() => handleProductClick(coreFeatures[0].url)}

// 改为
onClick={() => handleProductClick(coreFeatures[0])}

1. src/views/Community/hooks/useEventFilters.js

添加的导入:

import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
import { RETENTION_EVENTS } from '../../../lib/constants';

添加的Hook:

const { track } = usePostHogTrack();

修改的函数:

1. updateFilters: 追踪搜索和筛选
2. handlePageChange: 追踪翻页
3. handleEventClick: 追踪新闻点击
4. handleViewDetail: 追踪详情查看

2. src/views/Community/index.js

添加的导入:

import { usePostHogTrack } from '../../hooks/usePostHogRedux';
import { RETENTION_EVENTS } from '../../lib/constants';

添加的Hook:

const { track } = usePostHogTrack();

添加的useEffect:

useEffect(() => {
  track(RETENTION_EVENTS.COMMUNITY_PAGE_VIEWED, {
    timestamp: new Date().toISOString(),
    has_hot_events: hotEvents && hotEvents.length > 0,
    has_keywords: popularKeywords && popularKeywords.length > 0,
  });
}, [track]);

---

📊 追踪效果示例

用户行为路径示例

首页转化路径:

1. 游客访问首页
   → 触发: LANDING_PAGE_VIEWED
   → 属性: { is_authenticated: false, user_id: null }

2. 点击"新闻中心"功能卡片
   → 触发: FEATURE_CARD_CLICKED
   → 属性: { feature_id: "news-catalyst", feature_title: "新闻中心", is_featured: true, link_type: "internal" }

3. 进入 Community 页面
   → 触发: COMMUNITY_PAGE_VIEWED

Community 页面行为路径:

1. 用户进入 Community 页面
   → 触发: COMMUNITY_PAGE_VIEWED

2. 用户搜索 "人工智能"
   → 触发: SEARCH_QUERY_SUBMITTED
   → 属性: { query: "人工智能", category: "news" }

3. 用户筛选 "重要性：高"
   → 触发: SEARCH_FILTER_APPLIED
   → 属性: { filter_type: "importance", filter_value: "high" }

4. 用户点击第一条新闻
   → 触发: NEWS_ARTICLE_CLICKED
   → 属性: { event_id: "123", event_title: "...", importance: "high", source: "community_page" }

5. 用户翻到第2页
   → 触发: NEWS_LIST_VIEWED
   → 属性: { page: 2, filters: { sort: "new", importance: "high", has_query: true } }

6. 用户点击"查看详情"
   → 触发: NEWS_DETAIL_OPENED
   → 属性: { event_id: "456", source: "community_page" }

---

🧪 测试方法

1. 使用 Redux DevTools

1. 打开应用：npm start
2. 打开浏览器 Redux DevTools
3. 筛选 posthog/trackEvent actions
4. 执行各种操作
5. 查看追踪的事件和属性

2. 控制台日志

开发环境下，PostHog 会自动输出日志：

📍 Event tracked: Community Page Viewed { timestamp: "...", has_hot_events: true }
📍 Event tracked: Search Query Submitted { query: "人工智能", category: "news" }
📍 Event tracked: Search Filter Applied { filter_type: "importance", filter_value: "high" }

3. PostHog Dashboard

1. 登录 PostHog 后台
2. 查看 "Events" 页面
3. 筛选 Community 相关事件：
   • Community Page Viewed
   • Search Query Submitted
   • Search Filter Applied
   • News Article Clicked
   • News List Viewed

---

📈 数据分析建议

1. 搜索行为分析

问题: 用户最常搜索什么？

方法:

• 筛选 SEARCH_QUERY_SUBMITTED 事件
• 按 query 属性分组
• 查看 Top 关键词

2. 筛选偏好分析

问题: 用户更喜欢什么排序方式？

方法:

• 筛选 SEARCH_FILTER_APPLIED 事件
• 按 filter_type: "sort" 筛选
• 按 filter_value 分组统计

3. 新闻热度分析

问题: 哪些新闻最受欢迎？

方法:

• 筛选 NEWS_ARTICLE_CLICKED 事件
• 按 event_id 分组
• 统计点击次数

4. 用户旅程分析

问题: 用户从搜索到点击的转化率？

方法:

• 创建漏斗：
  1. COMMUNITY_PAGE_VIEWED
  2. SEARCH_QUERY_SUBMITTED
  3. NEWS_ARTICLE_CLICKED
• 分析每一步的流失率

---

🔧 扩展计划

下一步：其他页面追踪

按优先级排序：

1. Concept（概念中心） ⭐⭐⭐

   • 搜索概念
   • 点击概念卡片
   • 查看概念详情
   • 点击概念内股票

2. StockOverview（个股中心） ⭐⭐⭐

   • 搜索股票
   • 点击股票卡片
   • 查看股票详情
   • 切换 Tab

3. LimitAnalyse（涨停分析） ⭐⭐

   • 进入页面
   • 点击涨停板块
   • 展开板块详情
   • 点击涨停个股

4. TradingSimulation（模拟盘） ⭐⭐

   • 进入模拟盘
   • 下单操作
   • 查看持仓
   • 查看历史

5. Company（公司详情） ⭐

   • 查看公司概览
   • 查看财务全景
   • 查看盈利预测
   • Tab 切换

---

💡 最佳实践

1. 属性命名规范

• 使用 snake_case 命名（与 PostHog 推荐一致）
• 属性名要 描述性强，易于理解
• 使用 布尔值 表示是/否（has_xxx, is_xxx）
• 使用 枚举值 表示类别（filter_type: "sort"）

2. 事件追踪原则

• 追踪用户意图，而不仅仅是点击
• 添加上下文，帮助分析（previous_value, source）
• 保持一致性，相似事件使用相似属性
• 避免敏感信息，不追踪用户隐私数据

3. 性能优化

• 使用 usePostHogTrack 而不是 usePostHogRedux
  • 更轻量，只订阅追踪功能
  • 避免不必要的重渲染
• 在 Custom Hooks 中集成，而不是每个组件
  • 集中管理，易于维护
  • 减少重复代码

---

⚠️ 注意事项

1. 依赖管理

确保 useCallback 的依赖数组包含 track：

// ✅ 正确
const handleClick = useCallback(() => {
  track(EVENT_NAME, { ... });
}, [track]);

// ❌ 错误（缺少 track）
const handleClick = useCallback(() => {
  track(EVENT_NAME, { ... });
}, []);

2. 事件去重

避免重复追踪相同事件：

// ✅ 正确（只在值变化时追踪）
if (newFilters.sort !== filters.sort) {
  track(SEARCH_FILTER_APPLIED, { ... });
}

// ❌ 错误（每次都追踪）
track(SEARCH_FILTER_APPLIED, { ... });

3. 空值处理

使用安全的属性访问：

// ✅ 正确
has_stocks: !!(event.related_stocks && event.related_stocks.length > 0)

// ❌ 错误（可能报错）
has_stocks: event.related_stocks.length > 0

---

📚 参考资料

• PostHog Events 文档: https://posthog.com/docs/data/events
• PostHog Properties 文档: https://posthog.com/docs/data/properties
• Redux PostHog 集成: POSTHOG_REDUX_INTEGRATION.md
• 事件常量定义: src/lib/constants.js

---

🎉 总结

已实现的功能

• ✅ Home 页面追踪（2个事件）
• ✅ StockOverview 页面完整追踪（10个事件）✨ 已完成
• ✅ Concept 页面完整追踪（9个事件）
• ✅ Company 页面完整追踪（5个事件）
• ✅ Community 页面完整追踪（7个事件）
• ✅ Custom Hook 集成方案
• ✅ Redux DevTools 调试支持
• ✅ 详细的事件属性

追踪的用户行为

Home 页面:

1. 页面访问 - 了解流量来源、登录转化率
2. 功能卡片点击 - 识别最受欢迎的功能
3. 推荐功能效果 - 分析特色功能（新闻中心）的点击率

StockOverview 页面 ✨:

1. 页面访问 - 了解个股中心流量
2. 搜索行为 - 股票搜索、搜索结果点击
3. 概念交互 - 热门概念点击、概念股票标签点击
4. 热力图交互 - 热力图中股票点击
5. 数据筛选 - 日期选择变化
6. 市场统计 - 市场数据查看

Concept 页面:

1. 页面访问 - 了解概念中心流量
2. 搜索行为 - 概念搜索、搜索结果数量
3. 筛选偏好 - 排序方式、日期选择
4. 概念交互 - 概念点击、位置追踪
5. 个股查看 - 查看个股、股票点击
6. 时间轴查看 - 历史时间轴
7. 翻页行为 - 优化分页逻辑
8. 视图切换 - 网格/列表偏好

Company 页面:

1. 页面访问 - 了解公司详情页流量
2. 股票搜索 - 用户查询哪些股票
3. Tab 切换 - 用户最关注哪个 Tab（概览/行情/财务/预测）
4. 自选股管理 - 自选股添加/移除行为
5. 股票切换 - 分析用户查看股票的路径

Community 页面:

1. 页面访问 - 了解流量来源
2. 搜索行为 - 了解用户需求
3. 筛选偏好 - 优化默认设置
4. 内容点击 - 识别热门内容
5. 详情查看 - 分析用户兴趣
6. 翻页行为 - 优化分页逻辑

下一步计划

1. 在关键页面实施追踪（Home, StockOverview, Concept, Company, Community） ✅ 已完成
2. 下一步：其他页面追踪
   • LimitAnalyse（涨停分析）⭐⭐
   • TradingSimulation（模拟盘）⭐⭐
3. 创建 PostHog Dashboard 和 Insights
4. 设置用户行为漏斗分析
5. 配置 Feature Flags 进行 A/B 测试

---

Home, StockOverview, Concept, Company, Community 页面追踪全部完成！ 🚀

现在你可以在 PostHog 后台看到完整的用户行为数据：

• 首页 → 个股中心/概念中心/公司详情/新闻中心 的完整转化路径
• 搜索行为、筛选偏好、内容点击 的详细数据
• Tab 切换、视图切换、翻页行为 的用户习惯分析
• 自选股管理 的用户行为追踪

共追踪 33个事件，覆盖 5个核心页面。