> ## Documentation Index > Fetch the complete documentation index at: https://outlit-codex-platform-actions-create-update-cli.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Astro Integration > Integrate Outlit tracking with Astro applications ## Installation ```bash npm theme={null} npm install --save @outlit/browser ``` ```bash pnpm theme={null} pnpm add @outlit/browser ``` ```bash yarn theme={null} yarn add @outlit/browser ``` ```bash bun theme={null} bun add @outlit/browser ``` ## Quick Start Add Outlit to your base layout: ```astro theme={null} --- // src/layouts/BaseLayout.astro const PUBLIC_OUTLIT_KEY = import.meta.env.PUBLIC_OUTLIT_KEY --- My Site ``` Add your public key to `.env`: ``` PUBLIC_OUTLIT_KEY=pk_your_public_key_here ``` ## Alternative: Inline Script Use an inline script for better performance: ```astro theme={null} --- // src/layouts/BaseLayout.astro --- My Site ``` ## Tracking Events Track events in Astro components: ```astro theme={null} --- // src/components/PricingButton.astro --- ``` ### With Client Directives Use client directives for interactive components: ```astro theme={null} --- // src/pages/index.astro import PricingButton from '../components/PricingButton.jsx' --- ``` ## Framework Islands ### React Island ```jsx theme={null} // src/components/PricingButton.jsx import { useEffect } from 'react' import outlit from '@outlit/browser' export default function PricingButton() { function handleClick() { outlit.track('pricing_clicked', { plan: 'pro' }) } return ( ) } ``` ### Vue Island ```vue theme={null} ``` ### Svelte Island ```svelte theme={null} ``` ## Identifying Users Identify users after authentication: ```astro theme={null} --- // src/components/LoginForm.astro --- ``` ## Auth State Management For apps with authentication, use `setUser()` and `clearUser()` to sync user identity: ```astro theme={null} --- // src/components/AuthObserver.astro --- ``` Using `setUser()` ensures the user identity persists across page navigations and is properly set when users return to your site already logged in. ## View Transitions Track navigation with Astro's View Transitions: ```astro theme={null} --- // src/layouts/BaseLayout.astro import { ViewTransitions } from 'astro:transitions' --- ``` ## API Routes Track events from API endpoints: ```typescript theme={null} // src/pages/api/checkout.ts import type { APIRoute } from 'astro' import { Outlit } from '@outlit/node' const outlit = new Outlit({ publicKey: import.meta.env.OUTLIT_KEY }) export const POST: APIRoute = async ({ request }) => { const body = await request.json() outlit.track({ userId: body.userId, eventName: 'checkout_completed', properties: { amount: body.amount, plan: body.plan } }) await outlit.flush() return new Response(JSON.stringify({ success: true }), { status: 200, headers: { 'Content-Type': 'application/json' } }) } ``` For server-side tracking, see the [Node.js integration guide](/tracking/server/nodejs). ## SSR Pages For SSR pages, ensure tracking runs client-side: ```astro theme={null} --- // src/pages/products/[id].astro export const prerender = false // SSR mode const { id } = Astro.params const product = await fetchProduct(id) ---

{product.name}

``` ## Content Collections Track interactions with content: ```astro theme={null} --- // src/pages/blog/[...slug].astro import { getEntry } from 'astro:content' const entry = await getEntry('blog', Astro.params.slug) ---

{entry.data.title}

``` ## Activation Track activation after the user completes your product milestone: ```astro theme={null} --- // src/components/OnboardingComplete.astro --- ``` `user.activate()` requires the user to be identified first using `setUser()` or `identify()`. Use `track()` for product activity. Outlit handles engagement and inactivity automatically; see [Customer Journey](/concepts/customer-journey#automatic-engagement-and-inactivity). Account billing (`paid`, `churned`, `trialing`) is tracked separately. If you've connected Stripe, billing is automatic. For manual billing, see [Stages & Billing](/concepts/customer-journey). ## Consent Management Handle user consent: ```astro theme={null} --- // src/components/CookieBanner.astro --- ``` ## Environment Variables Configure environment variables: ```bash theme={null} # .env # Public key (used in browser) PUBLIC_OUTLIT_KEY=pk_your_public_key_here # Server key (used in API routes) OUTLIT_KEY=pk_your_public_key_here ``` Keep server environment variables out of client-side code. Only use `OUTLIT_KEY` in API routes. ## TypeScript Support Full TypeScript support is included: ```typescript theme={null} import outlit, { type OutlitOptions } from '@outlit/browser' const options: OutlitOptions = { publicKey: import.meta.env.PUBLIC_OUTLIT_KEY, trackPageviews: true, flushInterval: 5000 } outlit.init(options) ``` ## Next Steps Track events from your backend Learn how profiles are merged Full API reference Use Outlit with React