mcpField
I
integration-angular

integration-angular

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

integration-angular について

Angular アプリケーションに PostHog 分析を導入するスキルです。段階的な手順とともに、サービス設定、ユーザー識別、エラー追跡に関する Angular 固有のガイダンスを提供します。

主な機能

  1. 014 段階の導入ワークフロー
  2. 02Angular のサンプルとドキュメント
  3. 03シングルトン PosthogService の設定
  4. 04環境設定のガイダンス
  5. 05ユーザー識別のガイダンス
  6. 06エラー追跡のガイダンス

活用シーン

  1. 01Angular アプリへの PostHog 導入
  2. 02共有サービス経由での PostHog 提供
  3. 03ログインや登録時のユーザー識別
  4. 04重要な処理でのエラー追跡

インストール

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

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

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

同梱ファイル

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

references/
angular.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

詳細

Angular 向け PostHog インテグレーション

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

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

  • コンストラクターインジェクションではなく inject() を使用してください。PostHog サービスが必要なコンポーネントやサービスには、inject() を介して PostHog サービスを注入してください。
  • PostHog SDK をラップする、シングルトンのルートサービスとして専用の PosthogService を作成してください。
  • NgModules よりもスタンドアロンコンポーネントを常に使用してください。
  • PostHog の認証情報は src/environments/environment.ts ファイルで設定してください。Angular はこれらの設定ファイルから環境変数を読み取るためです。

ユーザーの識別

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

エラートラッキング

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

コメント

Markdown 対応