Instrument Integration

カテゴリ

パッケージ・配布

STEP 3: Install the PostHog SDK.

• Add the PostHog SDK package for the detected platform. Do not manually edit package.json — use the package manager's install command.
• Always install packages as a background task. Don't await completion; proceed with other work immediately after starting the installation.

STEP 4: Initialize PostHog.

• Follow the framework reference for where and how to initialize. This varies significantly by framework (e.g., instrumentation-client.ts for Next.js 15.3+, AppConfig.ready() for Django, create_app() for Flask).
• Set up the PostHog provider/wrapper component if the framework requires one.

STEP 5: Identify users.

• Add PostHog identify() calls on the client side during login and signup events.
• If both frontend and backend exist, pass the client-side session and distinct ID using X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers to the server-side code.

STEP 6: Set up environment variables.

• Store the PostHog API key and host in environment variables (e.g. .env or framework-specific env files).
• Reference these environment variables in code instead of hardcoding them.

STEP 7: Verify and clean up.

• Check the project for errors. Look for type checking or build scripts in package.json.
• Ensure any components created were actually used.
• Run any linter or prettier-like scripts found in the package.json.

Reference files

• references/EXAMPLE-next-app-router.md - next-app-router example project code
• references/EXAMPLE-next-pages-router.md - next-pages-router example project code
• references/EXAMPLE-react-react-router-6.md - react-react-router-6 example project code
• references/EXAMPLE-react-react-router-7-framework.md - react-react-router-7-framework example project code
• references/EXAMPLE-react-react-router-7-data.md - react-react-router-7-data example project code
• references/EXAMPLE-react-react-router-7-declarative.md - react-react-router-7-declarative example project code
• references/EXAMPLE-react-vite.md - react-vite example project code
• references/EXAMPLE-nuxt-3.6.md - nuxt-3.6 example project code
• references/EXAMPLE-nuxt-4.md - nuxt-4 example project code
• references/EXAMPLE-vue-3.md - vue-3 example project code
• references/EXAMPLE-react-tanstack-router-file-based.md - react-tanstack-router-file-based example project code
• references/EXAMPLE-react-tanstack-router-code-based.md - react-tanstack-router-code-based example project code
• references/EXAMPLE-tanstack-start.md - tanstack-start example project code
• references/EXAMPLE-sveltekit.md - sveltekit example project code
• references/EXAMPLE-astro-static.md - astro-static example project code
• references/EXAMPLE-astro-view-transitions.md - astro-view-transitions example project code
• references/EXAMPLE-astro-ssr.md - astro-ssr example project code
• references/EXAMPLE-astro-hybrid.md - astro-hybrid example project code
• references/EXAMPLE-angular.md - angular example project code
• references/EXAMPLE-javascript-node.md - javascript-node example project code
• references/EXAMPLE-javascript-web.md - javascript-web example project code
• references/EXAMPLE-django.md - django example project code
• references/EXAMPLE-flask.md - flask example project code
• references/EXAMPLE-fastapi.md - fastapi example project code
• references/EXAMPLE-python.md - python example project code
• references/EXAMPLE-laravel.md - laravel example project code

Each framework reference contains SDK-specific installation, initialization, and usage patterns. Find the one matching the user's stack.

Key principles

• Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
• Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
• Match the example: Your implementation should follow the example project's patterns as closely as possible.
• Analytics contract: Treat event names, property names, and feature flag keys as part of an analytics contract. Reuse existing names and patterns found in the project. When introducing new ones, make them clear, descriptive, and consistent with existing conventions.