mcpField
I
integration-javascript_web

integration-javascript_web

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

integration-javascript_web について

段階的なセットアップ手順で JavaScript Web アプリに PostHog 分析を組み込むスキルです。初期化、ユーザー識別、プライバシー、ページビュー、エラー追跡を扱います。

主な機能

  1. 01段階的な連携ワークフロー
  2. 02PostHog 初期化の案内
  3. 03ユーザー識別とログアウト時のリセット
  4. 04イベント追跡での個人情報保護
  5. 05ページビューとエラー追跡の案内

活用シーン

  1. 01Web アプリへの PostHog 分析追加
  2. 02ログイン・再読み込みをまたぐユーザー識別
  3. 03ページビューと重要フローの計測

インストール

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

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

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

同梱ファイル

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

references/
basic-integration-1.0-begin.md
basic-integration-1.2-revise.md
basic-integration-1.1-edit.md
basic-integration-1.3-conclude.md
identify-users.md
js.md
posthog-js.md

詳細

JavaScript Web 向け PostHog インテグレーション

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

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

  • ソースコードは node_modules ディレクトリで確認できることを忘れないでください
  • 変更を検証するため、package.json で型チェックやビルドのスクリプトを確認してください
  • posthog-js は JavaScript SDK のパッケージ名です
  • 他の PostHog メソッド（capture、identify など）を呼び出す前に、posthog.init() を必ず呼び出してください
  • posthog-js はブラウザー専用です。Node.js やサーバーサイドのコンテキストではインポートしないでください（代わりに posthog-node を使用してください）
  • posthog-js ではオートキャプチャがデフォルトでオンになっており、クリック、フォーム送信、ページビューを追跡します。ユーザーから明示的な要望がない限り、オートキャプチャを無効にしないでください。
  • posthog.capture() のイベントプロパティに個人を特定できる情報（PII）を決して送信しないでください。メールアドレス、フルネーム、電話番号、住所、IP アドレス、ユーザー生成コンテンツは含めないでください。
  • PII は posthog.identify() の人物プロパティ（email、name、role）に設定してください。capture() のイベントプロパティには設定しないでください。
  • ログイン時、およびユーザーがすでにログインしている状態でページを更新したときに、posthog.identify(userId, { email, name, role }) を呼び出してください
  • ログアウト時に posthog.reset() を呼び出して、以後のイベントが現在のユーザーに紐付かないようにしてください
  • フレームワークのルーターを使わない SPA では、posthog.capture($pageview) でページビューをキャプチャするか、初期化時に capture_pageview の history_change オプションを使って History API のルーティングに対応してください

ユーザーの識別

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

エラートラッキング

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

コメント

Markdown 対応