mcpField
I
integration-astro-hybrid

integration-astro-hybrid

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

integration-astro-hybrid について

Astro (Hybrid)アプリにPostHog分析を導入するためのスキルです。段階的なワークフローに加え、クライアントとサーバーの追跡、ユーザー識別、エラー追跡を案内します。

主な機能

  1. 014段階の導入ワークフロー
  2. 02Astro固有の設定ガイド
  3. 03クライアントとサーバーのイベント追跡
  4. 04プリレンダリングとSSRの案内
  5. 05ユーザー識別の案内
  6. 06エラー追跡の案内

活用シーン

  1. 01Astro HybridアプリへのPostHog導入
  2. 02APIルートでのイベント追跡
  3. 03ログインと登録時のユーザー識別

インストール

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

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

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

同梱ファイル

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（Hybrid）向け PostHog インテグレーション

このスキルでは、Astro（Hybrid）アプリケーションに 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（Hybrid）のサンプルプロジェクトのコード
  • 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 のスクリプトタグには常に 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）で保持してください
  • Astro 5 では、アダプターを使用し、デフォルトの output static を使用してください。ページはデフォルトでプリレンダリングされます
  • サーバーサイドレンダリングが必要な特定のページでは、export const prerender = false を使用して SSR を有効にしてください
  • プリレンダリングを無効にするのは、サーバー側の PostHog トラッキングが必要なページ（API を利用するフォームなど）のみにしてください

ユーザーの識別

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

エラートラッキング

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

コメント

Markdown 対応