vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: PostHog 集成\

Browse Source 
1. ✅ 安装依赖: posthog-js@^1.280.1
  2. ✅ 创建核心文件:
    - src/lib/posthog.js - PostHog SDK 封装（271 行）
    - src/lib/constants.js - 事件常量定义（AARRR 框架）
    - src/hooks/usePostHog.js - PostHog React Hook
    - src/hooks/usePageTracking.js - 页面追踪 Hook
    - src/components/PostHogProvider.js - Provider 组件
  3. ✅ 集成到应用:
    - 修改 src/App.js，在最外层添加 <PostHogProvider>
    - 自动追踪所有页面浏览
  4. ✅ 配置环境变量:
    - 在 .env 添加 PostHog 配置项
    - REACT_APP_POSTHOG_KEY 留空，需要用户填写
  5. ✅ 创建文档: POSTHOG_INTEGRATION.md 包含完整的使用说明
This commit is contained in:
zdl
2025-10-28 20:09:21 +08:00
parent 542b20368e
commit 6506cb222b
7 changed files with 892 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/App.js
View File

@@ -59,6 +59,7 @@ import NotificationContainer from "components/NotificationContainer";
import ConnectionStatusBar from "components/ConnectionStatusBar";
import NotificationTestTool from "components/NotificationTestTool";
import ScrollToTop from "components/ScrollToTop";
import PostHogProvider from "components/PostHogProvider";
import { logger } from "utils/logger";
/**
@@ -295,32 +296,34 @@ export default function App() {
}, []);
return (
<ReduxProvider store={store}>
<ChakraProvider
theme={theme}
toastOptions={{
defaultOptions: {
position: 'top',
duration: 3000,
isClosable: true,
}
}}
>
<ErrorBoundary>
<NotificationProvider>
<AuthProvider>
<AuthModalProvider>
<IndustryProvider>
<AppContent />
<AuthModalManager />
<NotificationContainer />
<NotificationTestTool />
</IndustryProvider>
</AuthModalProvider>
</AuthProvider>
</NotificationProvider>
</ErrorBoundary>
</ChakraProvider>
</ReduxProvider>
<PostHogProvider>
<ReduxProvider store={store}>
<ChakraProvider
theme={theme}
toastOptions={{
defaultOptions: {
position: 'top',
duration: 3000,
isClosable: true,
}
}}
>
<ErrorBoundary>
<NotificationProvider>
<AuthProvider>
<AuthModalProvider>
<IndustryProvider>
<AppContent />
<AuthModalManager />
<NotificationContainer />
<NotificationTestTool />
</IndustryProvider>
</AuthModalProvider>
</AuthProvider>
</NotificationProvider>
</ErrorBoundary>
</ChakraProvider>
</ReduxProvider>
</PostHogProvider>
);
}