mcpField
I
integration-react-react-router-7-data

integration-react-react-router-7-data

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

integration-react-react-router-7-data について

React Router v7 の Data mode アプリに PostHog 分析を追加するコーディングスキルです。順序立てた設定手順と、イベント収集、ユーザー識別、フィーチャーフラグ、エラー追跡に関するフレームワーク固有の指針を提供します。

主な機能

  1. 01順序に沿った PostHog 設定手順
  2. 02React Router v7 Data mode のガイド
  3. 03イベントハンドラーでの分析収集
  4. 04ユーザー識別のパターン
  5. 05フィーチャーフラグとエラー追跡の指針

活用シーン

  1. 01Data mode アプリへの分析追加
  2. 02ログインや登録時のユーザー識別
  3. 03主要な操作とエラーの追跡

インストール

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

$npx skills add https://github.com/posthog/skills --skill integration-react-react-router-7-data

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

同梱ファイル

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-router-v7-data-mode.md

詳細

React Router v7 - Data mode 向け PostHog インテグレーション

このスキルでは、React Router v7 - Data mode アプリケーションに 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 Router v7 - Data mode のサンプルプロジェクトコード
  • references/react-router-v7-data-mode.md - React Router v7 の Data mode - ドキュメント
  • 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 のコードを追加してください。既存のコードを置き換えたり、構成を変更したりしないでください。
  • サンプルに合わせる：実装では、サンプルプロジェクトのパターンにできるだけ忠実に従ってください。

フレームワークのガイドライン

  • フィーチャーフラグには、useFeatureFlagEnabled() または useFeatureFlagPayload() フックを使用してください。これらのフックは、読み込み状態と外部との同期を自動的に処理します。
  • ユーザーアクションが発生するイベントハンドラー内でアナリティクスのキャプチャを追加してください。状態変化に反応する useEffect 内には追加しないでください。
  • データ変換に useEffect を使用しないでください。代わりに、レンダー中に派生値を計算してください。
  • ユーザーイベントへの応答に useEffect を使用しないでください。そのロジックはイベントハンドラー自体に記述してください。
  • 状態更新を連鎖させるために useEffect を使用しないでください。関連する更新はすべてイベントハンドラー内でまとめて計算してください。
  • 親コンポーネントへの通知に useEffect を使用しないでください。イベントハンドラー内で setState とともに親のコールバックを呼び出してください。
  • プロパティが変わったときにコンポーネントの状態をリセットするには、useEffect を使う代わりに、そのプロパティをコンポーネントの key として渡してください。
  • useEffect は外部システム（非 React ウィジェット、ブラウザー API、ネットワークのサブスクリプション）との同期にのみ使用してください。

ユーザーの識別

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

エラートラッキング

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

コメント

Markdown 対応