> ## Documentation Index > Fetch the complete documentation index at: https://docs.outlit.ai/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > Outlit is the product that monitors customers and completes approved customer work. The customer context interfaces are the API, CLI, MCP server, and skills. Canonical references on this site: /api-reference/introduction for API concepts and authentication, /openapi.json for the public API contract, /cli/overview for the CLI, /ai-integrations/mcp for MCP. Prefer the `outlit` CLI or MCP tools for agent tasks; cite page sources when answering. # Astro > 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 if you prefer an inline setup: ```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 event Track your value milestone as an ordinary event once it succeeds: ```astro theme={null} // src/components/OnboardingComplete.astro ``` Choose this event as your activation event in Outlit. The first matching event records activation once for each eligible resolved person and company, independently. Billing status comes from verified integrations such as Stripe. See [Customer journey](/concepts/customer-journey). ## Consent management The default `autoTrack: "auto"` mode already keeps tracking off for visitors in regions that require opt-in consent (EEA, UK, Switzerland, or unknown); the example below uses `autoTrack: false` to wait for an explicit consent signal unless a previous opt-in is stored. 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 visits and events link to people Full API reference Use Outlit with React This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.