用途
当用户要求为 Web 应用添加分析、事件追踪、页面浏览、功能开关或会话回放时，可使用本技能。它面向 PostHog 这一分析平台，帮助在项目中完成从框架识别到 SDK 接入的完整流程。
主要能力
- 自动检测项目框架：通过检查 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，并在根布局中用 <PostHogProvider> 包裹 {children}；Pages Router 则在 _app.tsx 的 useEffect 中初始化。
- 添加页面浏览追踪：针对单页应用，创建组件在路由变化时调用 posthog.capture('$pageview')。
- 配置环境变量：提示用户提供 PostHog 项目 API key 和 host，并写入 .env 与 .env.example。
- 添加自定义事件：若用户指定要追踪的事件（如注册、购买），在相关处理函数中加入 posthog.capture("event_name", { ...properties })。
- 功能开关（可选）：按需展示 posthog.isFeatureEnabled("flag-name") 或 useFeatureFlagEnabled hook 的用法。
- 会话回放（可选）：按需在初始化配置中加入 session_recording: { maskAllInputs: false } 启用。
使用方式
技能以步骤化流程执行：先检测框架，再安装 SDK，随后创建初始化模块、接入页面浏览追踪、配置环境变量，最后根据用户需求补充自定义事件、功能开关或会话回放。初始化代码示例（Next.js App Router）如下：
"use client";
import posthog from "posthog-js";
import { PostHogProvider as PHProvider } from "posthog-js/react";
import { useEffect } from "react";
export function PostHogProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST ?? "https://us.i.posthog.com",
capture_pageview: false, // we capture manually for SPAs
});
}, []);
return <PHProvider client={posthog}>{children}</PHProvider>;
}
环境变量示例：
NEXT_PUBLIC_POSTHOG_KEY=phc_...
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
适用场景
- 需要为 Next.js、React、Vue、Svelte 或纯 HTML 项目快速接入 PostHog 分析。
- 需要追踪页面浏览、自定义业务事件（如注册、购买）。
- 需要使用功能开关或会话回放能力。
- 需要同时覆盖前端与服务端（Next.js 服务端、Node.js 后端、Python）的分析接入。
限制与注意事项
- 切勿硬编码 API key，始终使用环境变量。
- 若项目存在内容安全策略（CSP），需将 posthog-js 加入其中。
- 在 monorepo 中，应安装到渲染 UI 的包，而非根目录。
- 关于具体收费、价格、平台支持范围等细节，资料暂未提供。