mcpField
I
integration-tanstack-start

integration-tanstack-start

github.com/posthog開発76226 回インストール今日更新
リポジトリ

integration-tanstack-start について

integration-tanstack-startは、TanStack StartアプリにPostHog分析を導入する開発者向けスキルです。段階的な手順とフレームワークの例を使い、最小限の変更でクライアント側とサーバー側の計測を案内します。

主な機能

  1. 01順序立てた統合手順
  2. 02TanStack Startの例とドキュメントを参照
  3. 03環境変数によるキー管理
  4. 04クライアント側とサーバー側のイベント計測
  5. 05ユーザー識別とエラートラッキングの案内

活用シーン

  1. 01TanStack Startアプリへのページ計測追加
  2. 02ログインや登録時のユーザー識別
  3. 03APIルートでのサーバー側イベント収集

インストール

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

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

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

同梱ファイル

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
tanstack-start.md

詳細

TanStack Start 向け PostHog インテグレーション

このスキルでは、TanStack Start アプリケーションに 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 - TanStack Start のサンプルプロジェクトコード
  • references/tanstack-start.md - TanStack Start - ドキュメント
  • 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、ネットワークのサブスクリプション）との同期にのみ使用してください。
  • クライアントサイドのトラッキングには、ルートルート（__root.tsx）で PostHogProvider を使用してください。
  • API ルート（src/routes/api/）でサーバーサイドのイベントを送信するには posthog-node を使用してください。サーバー上で posthog-js は使用しないでください。
  • リクエストごとの再初期化を避けるため、PostHog サーバークライアントをシングルトンとして作成してください。
  • ページビューのトラッキングには useEffect ではなく、TanStack Router に組み込まれたナビゲーションイベントを使用してください。
  • すべての子ルートで PostHog クライアントを使用できるように、ファイルベースの規約（__root.tsx）またはコードベースの規約（createRootRoute() を呼び出す箇所）で定義されたルートルートコンポーネントに PostHogProvider を使用してください。

ユーザーの識別

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

エラートラッキング

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

コメント

Markdown 対応