mcpField
I
integration-react-native

integration-react-native

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

integration-react-native について

React Native アプリに PostHog 分析を追加するスキルです。段階的な手順に加え、依存関係、設定、ナビゲーション上の配置、ユーザー識別、エラー追跡を扱います。

主な機能

  1. 014段階の統合ワークフロー
  2. 02react-native-config による環境設定
  3. 03SDK とピア依存関係の指針
  4. 04PostHogProvider の配置指針
  5. 05ユーザー識別とエラー追跡

活用シーン

  1. 01React Native アプリへの PostHog 追加
  2. 02.env からの PostHog 設定読み込み
  3. 03React Navigation v7 での PostHog 設定
  4. 04アプリのフローでのユーザーとエラーの追跡

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/integration-react-nativeを入力して読み込まれたか確認します。

同梱ファイル

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

詳細

React Native 向け PostHog 統合

このスキルでは、React Native アプリケーションに 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 - React Native のサンプルプロジェクトコード
  • 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 のパッケージ名です
  • react-native-config を使用して、.env から POSTHOG_PROJECT_TOKEN と POSTHOG_HOST を読み込んでください（変数は実行時ではなく、ビルド時に埋め込まれます）
  • react-native-svg は posthog-react-native の必須ピア依存関係です（アンケート機能で使用）。posthog-react-native と併せてインストールする必要があります
  • React Navigation v7 との互換性を確保するため、PostHogProvider は NavigationContainer の内側に配置してください

ユーザーの識別

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

エラー追跡

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

コメント

Markdown 対応