PostHog Astro Rules

PostHog Astro Rules

PostHog Integration

PostHog is already integrated into this Astro project. The configuration includes:

PostHog initialization in src/components/posthog.astro
Layout setup in src/layouts/PostHogLayout.astro
Environment variables for API key and host

Key Guidelines

Component Structure

PostHog component uses is:inline directive to prevent Astro from processing the script
Layout wraps PostHog component in the <head> section
Pages use PostHogLayout to ensure PostHog loads on all pages

Environment Variables

Use PUBLIC_ prefix for client-side environment variables in Astro
PUBLIC_POSTHOG_KEY - Your PostHog project API key
PUBLIC_POSTHOG_HOST - Your PostHog instance URL

Best Practices

Always use posthog.identify() when users sign in
Use posthog.capture() for custom events
Feature flags can be accessed with posthog.isFeatureEnabled()
Keep the PostHog script in the head section for accurate tracking

File Structure

src/
├── components/
│   └── posthog.astro          # PostHog initialization
├── layouts/
│   └── PostHogLayout.astro    # Layout with PostHog
└── pages/
    └── *.astro                # Your pages using PostHogLayout

Common Patterns

Wrap pages with PostHogLayout for analytics
Use PostHog's autocapture for basic interaction tracking
Implement custom events for business-specific actions
Use feature flags for A/B testing and gradual rollouts