mcpField
I
integration-astro-ssr

integration-astro-ssr

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

integration-astro-ssr について

Astro のサーバーサイドレンダリングアプリに PostHog の分析機能を追加するスキルです。段階的な統合手順と、クライアント・サーバーの追跡、識別、エラー処理の指針を提供します。

主な機能

  1. 014 段階の統合ワークフロー
  2. 02PostHog のキーに環境変数を使用
  3. 03Astro コンポーネントでクライアント追跡を初期化
  4. 04posthog-node でサーバーイベントを追跡
  5. 05クライアントとサーバー間のセッション連携
  6. 06重要なフローへのエラー追跡追加

活用シーン

  1. 01Astro SSR アプリへの PostHog 分析の統合
  2. 02Astro API ルートからのイベント追跡
  3. 03クライアントとサーバー間のセッション連携維持

インストール

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

$npx skills add https://github.com/posthog/skills --skill integration-astro-ssr

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
astro.md
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

詳細

Astro（SSR）向け PostHog インテグレーション

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

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

  • Astro による処理や TypeScript エラーを防ぐため、PostHog の script タグには常に is:inline ディレクティブを使用してください
  • Astro のクライアント側環境変数には PUBLIC_ プレフィックスを使用してください（例：PUBLIC_POSTHOG_PROJECT_TOKEN）
  • ページ間で初期化を再利用できるよう、src/components/ に posthog.astro コンポーネントを作成してください
  • PostHog コンポーネントを Layout にインポートし、すべてのページをそのレイアウトでラップしてください
  • サーバー側のイベントトラッキングには、src/pages/api/ の API ルートで posthog-node を使用してください
  • 複数のクライアントが作成されないよう、シングルトンパターンで posthog-node のクライアントインスタンスを保存してください（src/lib/posthog-server.ts）
  • 統一されたセッショントラッキングのため、X-PostHog-Session-Id ヘッダーを使ってクライアントのセッション ID をサーバーに渡してください

ユーザーの識別

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

エラートラッキング

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

コメント

Markdown 対応