mcpField
I
integration-astro-view-transitions

integration-astro-view-transitions

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

integration-astro-view-transitions について

View Transitions を使う Astro アプリに PostHog 分析を導入するスキルです。段階的な手順と、ページビュー、ユーザー識別、エラー追跡の実装指針を示します。

主な機能

  1. 01段階的なセットアップ手順
  2. 02Astro View Transitions の実装指針
  3. 03再利用可能な PostHog 初期化
  4. 04ユーザー識別の指針
  5. 05エラー追跡の指針

活用シーン

  1. 01Astro サイトへの PostHog 分析導入
  2. 02ソフトナビゲーション中のページビュー追跡
  3. 03フロントエンドとバックエンドのユーザー照合
  4. 04重要なフローへのエラー追跡追加

インストール

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

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

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

同梱ファイル

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

このスキルでは、Astro（View Transitions）アプリケーションに 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（View Transitions）のサンプルプロジェクトコード
  • 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 コンポーネントをレイアウトにインポートし、そのレイアウトですべてのページをラップしてください
  • ソフトナビゲーション中のスタックオーバーフローを防ぐため、window.__posthog_initialized ガードで PostHog の初期化処理を囲んでください
  • ソフトナビゲーション中の自動ページビュー追跡には、capture_pageview オプションに 'history_change' を設定してください
  • ソフトナビゲーション後にスクリプトを再実行するには、DOMContentLoaded だけではなく、Astro の page-load イベントを使用してください

ユーザーの識別

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

エラー追跡

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

コメント

Markdown 対応