mcpField
I
integration-expo

integration-expo

github.com/posthog数据与数据库76111 次安装今天更新
代码仓库

关于 integration-expo

指导开发者为 Expo 应用添加 PostHog 分析的技能。按顺序执行集成流程，并提供配置、用户识别和错误跟踪方面的框架专属说明。

主要功能

  1. 01按四步集成流程完成设置
  2. 02使用环境变量存放 PostHog 密钥
  3. 03采用 Expo 专属配置指导
  4. 04在登录和注册时识别用户
  5. 05为关键流程添加错误跟踪

适用场景

  1. 01在 Expo 应用中集成 PostHog 分析
  2. 02使用 expo-constants 配置 PostHog
  3. 03关联前后端的用户身份

安装

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

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

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

包含的文件

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

references/
basic-integration-1.0-begin.md
basic-integration-1.1-edit.md
basic-integration-1.2-revise.md
basic-integration-1.3-conclude.md
EXAMPLE.md
identify-users.md
react-native.md

详细介绍

Expo 的 PostHog 集成

此技能可帮助你将 PostHog 分析功能添加到 Expo 应用中。

工作流

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

  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/EXAMPLE.md - Expo 示例项目代码
  • references/react-native.md - React Native - 文档
  • 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 代码。不要替换或重构现有代码。
  • 遵循示例：实现应尽可能贴近示例项目中的模式。

框架指南

  • posthog-react-native 是 React Native SDK 的包名（与纯 RN 相同）
  • 使用 expo-constants，通过 app.config.js 的 extras 设置 POSTHOG_PROJECT_TOKEN 和 POSTHOG_HOST（不要使用 react-native-config）
  • 在 posthog.ts 配置文件中，通过 Constants.expoConfig?.extra?.posthogProjectToken 访问配置
  • 对于 expo-router，在 app/_layout.tsx 中包装 PostHogProvider，并在 useEffect 中使用 posthog.screen(pathname, params) 手动跟踪屏幕
  • posthog-react-native 是 React Native SDK 的包名
  • 使用 react-native-config 从 .env 加载 POSTHOG_PROJECT_TOKEN 和 POSTHOG_HOST（变量会在构建时而非运行时嵌入）
  • react-native-svg 是 posthog-react-native 的必需对等依赖项（用于问卷调查功能），必须与其一同安装
  • 为兼容 React Navigation v7，将 PostHogProvider 放在 NavigationContainer 内部

识别用户

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

错误跟踪

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

评论

支持 Markdown