使用 PostHog 进行产品分析

• 产品分析——追踪命名事件（"upload_started"、"checkout_completed"），构建漏斗，查看留存队列。类似 Mixpanel 或 Amplitude。
• 会话回放——像视频一样回放真实用户操作。注重隐私保护（自动遮盖输入内容）。
• 功能开关——逐步向 N% 的用户灰度发布新功能，进行 A/B 测试。
• 问卷调查——在应用内发起 NPS 或反馈提示。
• 热力图——查看用户在页面上的点击分布。

同类产品：Plausible ↗（更轻量、隐私优先、专注页面浏览），Mixpanel ↗，Amplitude ↗。PostHog 的优势在于"一个工具覆盖所有需求"以及慷慨的免费套餐。

前往 app.posthog.com ↗ 注册账号。选择美国云或欧盟云区域（GDPR 合规的关键）。创建一个项目，用你的应用名称命名。

复制你的项目 API Key（格式类似 phc_xxxxxxxxxxxxxxxx）。可在 Settings → Project → General 找到。可以安全地暴露给浏览器——这是一个只写密钥，无法访问你的数据。

最简单：在 HTML 中嵌入代码片段（适用于任何 Web 应用）：

<script>
  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
  posthog.init("phc_YOUR_KEY_HERE", { api_host: "https://us.i.posthog.com" });
</script>

npm 版本（React/Next.js/Vue）：

npm install posthog-js

import posthog from "posthog-js";

if (typeof window !== "undefined") {
  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
    api_host: "https://us.i.posthog.com",
  });
}

代码片段会自动采集：页面浏览、点击、表单填写、离开页面等事件。页面加载后几秒内就能在 PostHog 中看到数据。

• Node — posthog-node ↗
• Python — posthog-python ↗
• iOS — posthog-ios ↗
• Android — posthog-android ↗
• React Native — posthog-react-native ↗
• Flutter — posthog-flutter ↗

所有 SDK 遵循相同的模式：init、capture、identify。

// Web / React
posthog.capture("upload_started", {
  file_type: "image/png",
  file_size_bytes: 12345,
});

推荐的命名规范：使用 名词_动词 的 snake_case 格式，例如 upload_started、checkout_completed、tutorial_finished。一致的命名能让一年后的漏斗和仪表盘仍然清晰易读。

在 PostHog 中查看：Activity → Live Events。事件到仪表盘的延迟通常在 5 秒以内。

用户登录后，立即告知 PostHog 这个匿名访客的真实身份：

posthog.identify(user.id, {
  email: user.email,
  plan: user.plan,
  signed_up_at: user.created_at,
});

此后，来自该浏览器的所有事件都会关联到这个用户。PostHog 会将登录前的匿名事件与已识别用户进行关联——这样"访问页面 → 注册 → 购买"的完整漏斗数据就不会丢失。

退出登录时，重置状态：

posthog.reset();   // clears identity, generates a new anonymous ID

PostHog → Product analytics → Funnels → New funnel。选择一组事件序列：

1. page_view（落地页）
2. sign_up_started
3. sign_up_completed
4. upload_started

PostHog 会显示每一步的转化率。流失最多的环节就是最值得优化的用户体验问题。漏斗文档 ↗。

PostHog → Session replay → Settings → 打开开关。（或者在 init 时传入 session_recording: { recordCrossOriginIframes: false }。）

密码、信用卡等敏感输入会自动遮盖。如需对特定元素单独处理，添加 data-ph-no-capture：

<input data-ph-no-capture type="text" name="ssn">

回放与事件关联——你可以在 PostHog 中点击任意事件，查看包含该事件的完整会话。对于排查"用户注册后为何离开"这类问题非常有用。

无需重新部署，即可向 N% 的用户灰度发布新功能。PostHog → Feature flags → New feature flag。设置一个 key（如 new-checkout），将灰度比例设为 10%，保存。

在你的应用中：

// After init
posthog.onFeatureFlags(() => {
  if (posthog.isFeatureEnabled("new-checkout")) {
    renderNewCheckout();
  } else {
    renderOldCheckout();
  }
});

随着信心增长逐步提高比例，如果指标变差则及时回滚。功能开关文档 ↗。

功能开关支持多个变体：

const variant = posthog.getFeatureFlag("checkout-button-color");
// returns "control" | "blue" | "green" — randomized per user

if (variant === "green") renderGreenButton();
else if (variant === "blue") renderBlueButton();
else renderControlButton();

PostHog 记录每个用户看到的变体。运行一周后，按变体对比转化率。实验文档 ↗。

三个关键设置：

• 欧盟区域——如果你的用户在欧盟，注册时选择欧盟云。数据存储在法兰克福。
• 退出采集——对于在 Cookie 弹窗中拒绝分析的用户，调用 posthog.opt_out_capturing()。用 opt_in_capturing() 重新开启。
• 匿名化 IP——Settings → Project → 打开 Discard client IPs。减少个人信息暴露面。

隐私文档 ↗ · PostHog 法律条款 ↗。

PostHog 是开源的。你可以通过 Docker Compose 或 Kubernetes 自托管 ↗。生产环境自托管工作量较大——需要 Kafka、ClickHouse、Postgres、Redis、MinIO。大多数项目不会折腾这些，直接使用 PostHog Cloud 即可。

免费套餐：每月 100 万次事件 + 5,000 次会话录制 + 100 万次功能开关请求。对于早期项目完全够用。超出后按线性计费。PostHog 定价 ↗。