adding-analytics

アナリティクスの追加（PostHog）

ユーザーがウェブアプリケーションへのアナリティクス、イベントトラッキング、ページビュー、フィーチャーフラグ、またはセッションリプレイの追加を依頼した場合に、このスキルを使用します。

手順

1. フレームワークを特定する — next.config.*、vite.config.*、package.json のスクリプト、または index.html を確認し、Next.js、React（Vite/CRA）、Vue、Svelte、またはプレーンな HTML のどれかを判別します。

2. SDK をインストールする

   • Next.js / React：npm install posthog-js
   • Next.js（サーバーサイド）：npm install posthog-js posthog-node
   • Python：pip install posthog
   • Node.js バックエンド：npm install posthog-node

3. プロバイダー／初期化モジュールを作成する

   • Next.js App Router の場合は、app/providers.tsx を作成します。

     "use client";
     import posthog from "posthog-js";
     import { PostHogProvider as PHProvider } from "posthog-js/react";
     import { useEffect } from "react";
     
     export function PostHogProvider({ children }: { children: React.ReactNode }) {
       useEffect(() => {
         posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
           api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST ?? "https://us.i.posthog.com",
           capture_pageview: false, // we capture manually for SPAs
         });
       }, []);
       return <PHProvider client={posthog}>{children}</PHProvider>;
     }
     

   • ルートレイアウトで <PostHogProvider> を使って {children} をラップします。

   • Pages Router の場合は、useEffect 内で _app.tsx を初期化します。

4. ページビューのトラッキングを追加する — SPA の場合は、フレームワークのルーターイベントを使い、ルート変更時に posthog.capture('$pageview') を呼び出すコンポーネントを作成します。

5. .env 変数を追加する — PostHog プロジェクトの API キーとホストをユーザーに確認します。

   NEXT_PUBLIC_POSTHOG_KEY=phc_...
   NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
   

   これらのキーを .env.example にも追加します。

6. カスタムイベントを追加する — ユーザーがトラッキングするイベント（例：登録、購入）を指定した場合は、該当するハンドラーに posthog.capture("event_name", { ...properties }) の呼び出しを追加します。

7. フィーチャーフラグ（任意） — 依頼された場合は、posthog.isFeatureEnabled("flag-name") または useFeatureFlagEnabled フックの使い方を示します。

8. セッションリプレイ（任意） — 依頼された場合は、初期化設定に session_recording: { maskAllInputs: false } を追加して有効にします。

注意事項

• API キーをハードコードしないでください。必ず環境変数を使用します。
• プロジェクトに Content Security Policy が設定されている場合は、posthog-js を追加します。
• モノレポの場合は、ルートではなく UI をレンダリングするパッケージにインストールします。