SuperAPI AI 工具集

adding-analytics

数据与分析

查看项目

更新于 10-16 02:28

技能介绍

用途:当用户要求为 Web 应用添加分析、事件跟踪、页面浏览、功能开关或会话回放时使用本技能,目标平台为 PostHog。

主要能力与用法:先识别框架,通过检查 next.config.、vite.config.、package.json 脚本或 index.html 判断是 Next.js、React(Vite/CRA)、Vue、Svelte 还是纯 HTML。随后安装 SDK,例如 Next.js/React:npm install posthog-js;Next.js 服务端:npm install posthog-js posthog-node;Python:pip install posthog;Node.js 后端:npm install posthog-node。接着创建 provider 或初始化模块,Next.js App Router 可建 app/providers.tsx,使用 posthog.init 初始化并在根布局包裹;Pages Router 在 _app.tsx 的 useEffect 中初始化。对 SPA 需单独添加页面浏览跟踪,在路由变化时调用 posthog.capture('$pageview')。配置 .env 变量,提示用户提供 PostHog 项目 API key 与 host,并把键加入 .env.example。若用户指定事件(如注册、购买),在相关处理器中加入 posthog.capture("event_name", { ...properties })。可选功能:功能开关用 posthog.isFeatureEnabled("flag-name") 或 useFeatureFlagEnabled 钩子;会话回放通过在 init 配置加 session_recording: { maskAllInputs: false } 启用。

限制与注意:切勿硬编码 API key,始终用环境变量;项目若有内容安全策略,需把 posthog-js 加入 CSP;monorepo 中应安装在渲染 UI 的包而非根目录。