mcpField
I
integration-javascript_web

integration-javascript_web

github.com/posthog开发76124 次安装今天更新
代码仓库

关于 integration-javascript_web

通过分阶段配置流程将 PostHog 分析集成到 JavaScript Web 应用的技能，涵盖初始化、用户识别、隐私实践、页面浏览量和错误跟踪。

主要功能

  1. 01分步集成工作流
  2. 02PostHog 初始化指导
  3. 03用户识别与退出时重置
  4. 04避免事件跟踪中的个人信息
  5. 05页面浏览量与错误跟踪指导

适用场景

  1. 01为 Web 应用添加 PostHog 分析
  2. 02跨登录和刷新跟踪用户会话
  3. 03为页面浏览量和关键流程添加跟踪

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/posthog/skills --skill integration-javascript_web

安装后在 Claude Code 中输入/integration-javascript_web确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
basic-integration-1.0-begin.md
basic-integration-1.2-revise.md
basic-integration-1.1-edit.md
basic-integration-1.3-conclude.md
identify-users.md
js.md
posthog-js.md

详细介绍

JavaScript Web 的 PostHog 集成

此技能可帮助你为 JavaScript Web 应用添加 PostHog 分析。

工作流

按以下步骤顺序完成集成：

  1. basic-integration-1.0-begin.md - PostHog 设置 - 开始 ← 从这里开始
  2. basic-integration-1.1-edit.md - PostHog 设置 - 编辑
  3. basic-integration-1.2-revise.md - PostHog 设置 - 修改
  4. basic-integration-1.3-conclude.md - PostHog 设置 - 结束

参考文件

  • references/js.md - JavaScript Web - 文档
  • references/posthog-js.md - PostHog JavaScript Web SDK
  • references/identify-users.md - 识别用户 - 文档
  • references/basic-integration-1.0-begin.md - PostHog 设置 - 开始
  • references/basic-integration-1.1-edit.md - PostHog 设置 - 编辑
  • references/basic-integration-1.2-revise.md - PostHog 设置 - 修改
  • references/basic-integration-1.3-conclude.md - PostHog 设置 - 结束

示例项目展示了目标实现模式。有关 API 详情，请参阅文档。

核心原则

  • 环境变量：始终使用环境变量存储 PostHog 密钥。切勿将其硬编码。
  • 最小改动：在现有集成旁添加 PostHog 代码。不要替换或重构现有代码。
  • 遵循示例：实现应尽可能贴合示例项目的模式。

框架指南

  • 请记住，node_modules 目录中提供了源代码
  • 检查 package.json 中的类型检查或构建脚本，以验证改动
  • posthog-js 是 JavaScript SDK 的包名
  • 必须先调用 posthog.init()，才能调用任何其他 PostHog 方法（如 capture、identify 等）
  • posthog-js 仅适用于浏览器——不要在 Node.js 或服务端环境中导入它（请改用 posthog-node）
  • posthog-js 默认启用自动捕获（跟踪点击、表单提交和页面浏览）。除非用户明确要求，否则不要禁用自动捕获。
  • 绝不要在 posthog.capture() 事件属性中发送个人身份信息（PII）——包括电子邮箱、全名、电话号码、实际地址、IP 地址或用户生成的内容
  • PII 应放在 posthog.identify() 的用户属性中（电子邮箱、姓名、角色），而不是 capture() 事件属性中
  • 登录时，以及用户已登录情况下刷新页面时，调用 posthog.identify(userId, { email, name, role })
  • 用户登出时调用 posthog.reset()，以解除当前用户与后续事件的关联
  • 对于没有框架路由器的 SPA，可使用 posthog.capture($pageview) 捕获页面浏览；若通过 History API 进行路由，也可在 init 中使用 capture_pageview 的 history_change 选项

识别用户

在登录和注册事件期间识别用户。请参考示例代码和文档，了解适用于此框架的正确识别模式。如果前端和后端代码都存在，请通过 X-POSTHOG-DISTINCT-ID 和 X-POSTHOG-SESSION-ID 标头传递客户端会话和 distinct ID，以保持关联。

错误跟踪

在相关文件中添加 PostHog 错误跟踪，尤其是在关键用户流程和 API 边界处。

评论

支持 Markdown