PostHog 实战指南：会话录屏与用户动线分析的使用及注意事项

本文面向需要在产品中引入行为埋点、会话录屏（Session Replay）和用户动线分析的技术团队，重点覆盖接入方式、脱敏配置、成本控制与合规注意事项。对数据敏感型业务（金融、交易类产品）尤其适用。

一、PostHog 是什么

PostHog 是一个开源的产品分析平台，核心能力包括：

与 Mixpanel / Amplitude 相比，它的差异化在于：开源可自部署（数据可完全留在自己边界内）、录屏与分析数据打通（可以从漏斗流失直接跳到对应用户的录屏），以及按量付费、免费额度较大。

录屏的实现原理

PostHog 的录屏不是视频录制，而是基于 rrweb 记录 DOM 快照 + 增量变更（Mutation），回放时在播放器中重建页面。这带来两个重要特性：

1. 体积小、对页面性能影响可控；
2. 脱敏发生在采集端——被打码的内容根本不会离开用户浏览器，而不是存下来后再遮挡。

二、快速接入

2.1 Web 端（JS Snippet 或 npm）

npm install posthog-js

import posthog from 'posthog-js'

posthog.init('<YOUR_PROJECT_API_KEY>', {
  api_host: 'https://us.i.posthog.com',   // 欧洲区用 https://eu.i.posthog.com
  defaults: '2026-05-30',                  // 锁定默认配置版本，避免 SDK 升级引入行为变化

  // ---- 录屏相关 ----
  session_recording: {
    maskAllInputs: true,          // 所有输入框内容打码（强烈建议保持默认 true）
    maskTextSelector: '.ph-mask', // 额外需要打码的文本元素
    blockSelector: '.ph-no-capture', // 完全不录制的元素（连结构都不采集）
  },

  // ---- 动线相关 ----
  autocapture: true,              // 自动采集点击/输入/提交事件
  capture_pageview: true,
  capture_dead_clicks: true,      // 死点击检测
  enable_heatmaps: true,
})

识别用户与手动埋点：

// 登录后绑定用户（用你系统内的稳定 ID，不要用邮箱/手机号明文）
posthog.identify('user_8f3a2c', { plan: 'pro', kyc_level: 2 })

// 关键业务事件建议手动埋，不要完全依赖 autocapture
posthog.capture('order_submitted', {
  symbol: 'BTC-USDT',
  order_type: 'limit',
  // 注意：金额、余额等敏感数值三思后再上报
})

2.2 移动端

iOS / Android / React Native / Flutter 均有官方 SDK，录屏需在初始化时显式开启。注意两点：

• 移动端录屏计费是 Web 的 2 倍单价；
• 移动端脱敏配置与 Web 不同（如 iOS 的 maskAllTextInputs、maskAllImages），接入前务必单独过一遍移动端隐私配置文档。

2.3 反向代理（推荐）

直连 *.posthog.com 的上报请求容易被广告拦截插件屏蔽，导致数据缺失。建议通过自己域名做反向代理：

# 示例：将 https://ph.yourdomain.com 转发到 PostHog
location / {
    proxy_pass https://us.i.posthog.com;
    proxy_set_header Host us.i.posthog.com;
}

然后把 api_host 改为自己的代理域名。这同时能提升国内网络环境下的上报成功率。

三、Session Replay：配置与脱敏（重点）

3.1 脱敏的三个层级

金融/交易类产品的最低要求：

<!-- 余额、持仓、资产总额：整块屏蔽 -->
<div class="asset-overview ph-no-capture">...</div>

<!-- KYC 表单页：整页屏蔽或干脆对该路由禁用录屏 -->
<form class="kyc-form ph-no-capture">...</form>

<!-- 用户昵称、邮箱等 PII 文本：打码 -->
<span class="ph-mask">user@example.com</span>

按路由禁用录屏：

// 在敏感页面（KYC、提现、银行卡绑定）主动停止录制
if (SENSITIVE_ROUTES.some(r => location.pathname.startsWith(r))) {
  posthog.stopSessionRecording()
} else {
  posthog.startSessionRecording()
}

3.2 上线前的脱敏验收清单

• [ ] 密码、验证码输入框在回放中显示为打码
• [ ] 余额 / 持仓 / 资产数字不可见
• [ ] KYC 证件照片、上传图片不被采集（图片默认按占位处理，但需实测确认）
• [ ] Network 面板记录中不含 Authorization 头、token、请求体敏感字段（如开启了网络请求采集，检查 recordHeaders / recordBody 配置）
• [ ] Console 日志采集不会打印出敏感对象（生产环境建议收敛 console 输出）
• [ ] 用真实测试账号走一遍完整交易流程，然后逐帧回放检查

原则：脱敏配置宁可过度，不可不足。 打码多了最多损失一些排障信息，漏了则是数据泄露事故。

3.3 录屏采样与触发策略

全量录屏在大流量产品下既贵又没必要。常用策略：

posthog.init('<KEY>', {
  session_recording: {
    // 方式一：全局采样，只录 10% 会话
    sampleRate: 0.1,
  },
})

更推荐基于条件触发（在 PostHog 后台的 Replay 设置中配置）：

• 只录发生了报错 / rageclick 的会话；
• 只录命中某个 feature flag（如新版下单页灰度用户）的会话;
• 最小会话时长过滤，丢弃秒开秒走的无效会话。

这样能把录屏量压缩到真正有排障和分析价值的那部分。

四、动线分析：Autocapture、热力图与挫败信号

4.1 Autocapture 的取舍

自动埋点开箱即用，但有两个代价：

1. 事件量大 → 直接影响账单，建议配置 autocapture 的元素白名单/黑名单（例如忽略高频无意义的滚动区域点击）；
2. 语义弱 → 自动事件是"点击了 button.btn-primary"，而不是"提交了订单"。核心转化事件必须手动埋点，autocapture 只作为兜底和探索用途。

推荐分层：手动埋点覆盖核心漏斗（注册 → 入金 → 首次下单 → 复购），autocapture 覆盖长尾探索。

4.2 热力图与挫败信号

• Clickmap：基于 autocapture 展示元素级点击分布；
• Heatmap：基于坐标的点击 / 鼠标移动密度图；
• Rageclick（怒点）：1 秒内在约 30px 范围内点击 3 次，典型的用户挫败信号；
• Dead click（死点击）：点击后页面无任何响应——发现"用户以为能点但实际不能点"的 UI 误导的利器，需在配置中开启 capture_dead_clicks: true。

排除某元素的死点击误报（比如一个纯展示但长得像按钮的标签）：

<div class="badge ph-no-deadclick">VIP</div>

4.3 推荐工作流

User Paths 路径分析发现异常流失页
        ↓
该页 Heatmap：定位 dead click / rageclick 聚集的元素
        ↓
筛选出现该行为的用户录屏，逐个回放（结合 Console + Network）
        ↓
定位根因 → 修复 → 用同一漏斗 + Replay 验证

录屏回看建议对照确认后再下结论——rageclick 有时只是用户习惯性连点，单一信号不要直接当成产品缺陷证据。

五、成本控制

PostHog Cloud 按产品分别计量（2026 年中的公开价格，以官网 pricing 页为准）：

实践建议：

1. 每个产品单独设 Billing Limit（硬性消费上限）——尤其是录屏。实际超支往往不是事件费，而是设计、客服团队都开始用录屏排障后录屏量暴涨；
2. 事件侧：合并语义重复的事件、给 autocapture 设过滤规则、匿名事件比识别事件便宜（能不 identify 的流量别急着 identify）；
3. 录屏侧：用采样 + 条件触发替代全量录制；
4. 月事件量到千万级以上时，认真对比一下自部署的服务器成本 vs Cloud 账单。

六、合规注意事项

这部分对金融/交易类产品是硬约束，不是可选项：

1. 用户同意（Consent）：在欧盟等地区，录屏类追踪普遍被认定为需要用户明示同意（consent-gated）。正确姿势是默认不启动录制，在用户于 Cookie/隐私弹窗中同意后再调用 posthog.startSessionRecording()，拒绝则调用 posthog.opt_out_capturing()。
2. 数据驻留：PostHog Cloud 分 US（us.posthog.com）与 EU（eu.posthog.com）两个区域，注册时选定。若你的用户主体在欧洲或有 GDPR 要求，选 EU 区；若监管要求数据不得出境/不得交第三方，直接考虑自部署。
3. 隐私政策同步更新：接入录屏后，隐私政策中必须披露会话记录行为、数据用途与保留期限。
4. 数据保留期：免费/标准计划下录屏与事件有保留期限制（如 1 年），敏感行业注意与自身的数据留存合规要求对齐——既有"至少存多久"的要求，也有"最多存多久"的要求。
5. 员工访问控制：录屏里即使脱敏后仍是用户行为记录，内部应按最小权限原则开放 Replay 访问，并利用项目/组织权限隔离。

七、Cloud 还是自部署？

一个常见的判断方法：看你敢不敢把"含用户行为录屏的数据存在第三方美国服务器上"写进合规评审文档。写不进去，就自部署。

八、常见坑总结

1. 忘了配脱敏就上线 → 上线前必须逐帧回放验收（见 3.2 清单）；
2. 被广告拦截插件屏蔽 → 上报域名走自己的反向代理；
3. 全量录屏导致账单失控 → 采样 + 条件触发 + Billing Limit 三件套；
4. 完全依赖 autocapture → 核心漏斗事件必须手动埋点，否则语义混乱、后期无法分析；
5. identify 使用明文 PII 作 distinct_id → 用内部稳定 ID，邮箱/手机号即使要传也放属性且评估必要性；
6. 单页应用（SPA）路由切换不触发 pageview → 确认 SDK 版本的默认配置已处理 history 路由，否则手动 posthog.capture('$pageview')；
7. 移动端直接套用 Web 的脱敏认知 → 移动端 SDK 的脱敏配置项和默认行为不同，需单独验证；
8. 把 rageclick 直接当产品缺陷证据 → 结合录屏确认后再定性。

参考

• 官方文档：https://posthog.com/docs
• Session Replay 隐私控制：https://posthog.com/docs/session-replay/privacy
• 定价与计算器：https://posthog.com/pricing
• 开源仓库：https://github.com/PostHog/posthog

本文价格与功能信息基于 2026 年 7 月的公开资料，接入前请以官方文档与 pricing 页为准。