Back to Details

integration-expo

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

PostHog integration for Expo

适用于Expo应用的PostHog集成

This skill helps you add PostHog analytics to Expo applications.
本技能可帮助你为Expo应用添加PostHog分析功能。

Workflow

集成流程

Follow these steps in order to complete the integration:
  1. basic-integration-1.0-begin.md
    - PostHog Setup - Begin ← Start here
  2. basic-integration-1.1-edit.md
    - PostHog Setup - Edit
  3. basic-integration-1.2-revise.md
    - PostHog Setup - Revise
  4. basic-integration-1.3-conclude.md
    - PostHog Setup - Conclusion
请按以下步骤完成集成：
  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 配置 - 完成

Reference files

参考文件

  • references/EXAMPLE.md
    - Expo example project code
  • references/react-native.md
    - React native - docs
  • references/identify-users.md
    - Identify users - docs
  • references/basic-integration-1.0-begin.md
    - PostHog setup - begin
  • references/basic-integration-1.1-edit.md
    - PostHog setup - edit
  • references/basic-integration-1.2-revise.md
    - PostHog setup - revise
  • references/basic-integration-1.3-conclude.md
    - PostHog setup - conclusion
The example project shows the target implementation pattern. Consult the documentation for API details.
  • 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细节，请查阅相关文档。

Key principles

核心原则

  • Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
  • Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
  • Match the example: Your implementation should follow the example project's patterns as closely as possible.
  • 环境变量：始终使用环境变量存储PostHog密钥，绝对不要硬编码。
  • 最小改动：在现有集成代码旁添加PostHog代码，不要替换或重构现有代码。
  • 匹配示例：你的实现应尽可能贴近示例项目的模式。

Framework guidelines

框架指南

  • posthog-react-native is the React Native SDK package name (same as bare RN)
  • Use expo-constants with app.config.js extras for POSTHOG_PROJECT_TOKEN and POSTHOG_HOST (NOT react-native-config)
  • Access config via 
    Constants.expoConfig?.extra?.posthogProjectToken
    in your posthog.ts config file
  • For expo-router, wrap PostHogProvider in app/_layout.tsx and manually track screens with 
    posthog.screen(pathname, params)
    in a useEffect
  • posthog-react-native is the React Native SDK package name
  • Use react-native-config to load POSTHOG_PROJECT_TOKEN and POSTHOG_HOST from .env (variables are embedded at build time, not runtime)
  • react-native-svg is a required peer dependency of posthog-react-native (used by the surveys feature) and must be installed alongside it
  • Place PostHogProvider INSIDE NavigationContainer for React Navigation v7 compatibility
  • 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内部

Identifying users

用户识别

Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using 
X-POSTHOG-DISTINCT-ID
and 
X-POSTHOG-SESSION-ID
headers to maintain correlation.
在登录和注册事件中识别用户。请参考示例代码和文档，了解适用于该框架的正确识别模式。如果同时存在前端和后端代码，请通过
X-POSTHOG-DISTINCT-ID
和
X-POSTHOG-SESSION-ID
头传递客户端会话和唯一ID，以保持关联。

Error tracking

错误追踪

Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.
在相关文件中添加PostHog错误追踪，尤其是关键用户流程和API边界相关的文件。