mcpField
I
integration-expo

integration-expo

github.com/posthogデータ・データベース76111 回インストール今日更新
リポジトリ

integration-expo について

Expo アプリに PostHog の分析機能を追加するためのスキルです。順序立てたセットアップ手順に加え、設定、ユーザー識別、エラー追跡のフレームワーク固有の指針を示します。

主な機能

  1. 014 段階の統合ワークフロー
  2. 02PostHog のキーに環境変数を使用
  3. 03Expo 固有の設定ガイド
  4. 04ログインと登録時のユーザー識別
  5. 05重要なフローへのエラー追跡追加

活用シーン

  1. 01Expo アプリへの PostHog 分析の統合
  2. 02expo-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 統合

このスキルを使うと、Expo アプリケーションに 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/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 と同じ）。
  • app.config.js の extras とともに expo-constants を使用して、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 の必須ピア依存関係です（アンケート機能で使用されます）。posthog-react-native と一緒にインストールする必要があります。
  • React Navigation v7 との互換性を保つため、PostHogProvider は NavigationContainer の内側に配置してください。

ユーザーの識別

ログインイベントとサインアップイベントでユーザーを識別してください。このフレームワークに適した識別パターンについては、サンプルコードとドキュメントを参照してください。フロントエンドとバックエンドの両方のコードがある場合は、クライアント側のセッション ID と識別 ID を X-POSTHOG-DISTINCT-ID および X-POSTHOG-SESSION-ID ヘッダーで渡し、相関関係を維持してください。

エラートラッキング

関連ファイルに PostHog のエラートラッキングを追加してください。特に、重要なユーザーフローや API の境界で追加してください。

コメント

Markdown 対応