PostHog makes it easy to get data about traffic and usage of your Astro (opens in a new tab) app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more.
Install PostHog for Astro in seconds with our wizard by running this prompt with LLM coding agents (opens in a new tab) like Cursor and Bolt, or by running it in your terminal.
If your site sets a Content-Security-Policy, it needs to allow PostHog. This applies to the snippet and to package installs alike: the SDK lazy-loads extra bundles (session replay, surveys) from PostHog’s CDN, and sends events to the ingestion host. PostHog serves from subdomains of posthog.com that change over time, so allow the wildcard:
script-src covers the snippet and the lazy-loaded bundles, connect-src covers event ingestion and feature flags, and worker-src covers session replay. The toolbar needs a few more (opens in a new tab), or use a reverse proxy (opens in a new tab) so everything is first-party. Failing to do so causes silent failures where capture and identify calls never send, so the integration looks complete while zero events arrive. Remember connect-src falls back to default-src, so default-src 'self' blocks event delivery even when the script itself is bundled.
Using with Astro’s view transitions (ClientRouter)
If you’ve opted in to Astro’s <ClientRouter> component for client-side navigation, you’ll need to add an initialization guard to prevent PostHog from running multiple times during page transitions.
Update your posthog.astro file to wrap the snippet with a check:
Without this guard, ClientRouter‘s soft navigation can re-execute the inline script during page transitions, causing a stack overflow error. The capture_pageview: 'history_change' option ensures pageviews are tracked automatically as users navigate.
The next step is to a create a Layout (opens in a new tab) where we will use posthog.astro. Create a new file PostHogLayout.astro in your src/layouts folder:
Terminal
bash
cd .. && cd .. # move back to your base directory if you're still in src/components/posthog.astrocd ./src/layouts# or 'cd ./src && mkdir layouts && cd ./layouts' if your layouts folder doesn't exist yettouch PostHogLayout.astro
Add the following code to PostHogLayout.astro:
PostHogLayout.astro
javascript
---import PostHog from '../components/posthog.astro'---<head> <PostHog /></head>
Lastly, update index.astro to wrap your existing app components with the new Layout:
index.astro
javascript
---import PostHogLayout from '../layouts/PostHogLayout.astro';---<PostHogLayout> <!-- your existing app components --></PostHogLayout>
Use a stable ID from your auth system when possible, not an email or display name. Send those as person properties instead. If your app has no other stable key, email works as a fallback if they are unique. Never a shared literal like "anonymous" or "user", which pools many people onto one person and corrupts their data. When no ID is available at all, skip the identify and retain the anonymous distinct ID that’s automatically assigned.
Call posthog.reset() on logout, so the next person to use the browser doesn’t inherit the last one’s identity.
If your app calls your own backend, tracing_headers adds X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID to matching fetch and XMLHttpRequest requests. This lets server-side SDKs link backend events, errors, and LLM traces back to frontend sessions and replays. Use hostnames only, without protocols or paths.
JavaScript
javascript
posthog.init('<ph_project_token>', { api_host: 'https://us.i.posthog.com', // Optional: send PostHog session/user context to your backend tracing_headers: ['api.example.com'],})
This works in local development too, but match on the hostname alone: use 'localhost', not 'localhost:3000'. Ports are never part of a hostname, so a value with one in it never matches anything. localhost and 127.0.0.1 are also different hostnames — use whichever your app actually calls.
Tracing headers help you attribute events across front and backend consistently. When this isn’t available, use your server-side stable IDs to deduce the matching distinctId, and pass it in when capturing the event.
If you have multiple customer-facing products (e.g. a marketing website + mobile app + web app), it’s best to install PostHog on them all and group them in one project (opens in a new tab).
This makes it possible to track users across their entire journey (e.g. from visiting your marketing website to signing up for your product), or how they use your product across multiple platforms.
Add IPs to Firewall/WAF allowlists (recommended)
For certain features like heatmaps (opens in a new tab), your Web Application Firewall (WAF) may be blocking PostHog’s requests to your site. Add these IP addresses to your WAF allowlist or rules to let PostHog access your site.
EU: 3.75.65.221, 18.197.246.42, 3.120.223.253
US: 44.205.89.55, 52.4.194.122, 44.208.188.173
These are public, stable IPs used by PostHog services.
For any technical questions for how to integrate specific PostHog features into Astro (such as analytics, feature flags, A/B testing, surveys, etc.), have a look at our JavaScript Web SDK docs (opens in a new tab).
Alternatively, the following tutorials can help you get started: