---
title: "Astro"
description: "For Astro, the CDN script is the simplest integration. Put it once in the shared layout."
documentation: "https://tracwell.app/docs/frameworks/astro"
markdown: "https://tracwell.app/docs/frameworks/astro.md"
---

# Astro

> For Astro, the CDN script is the simplest integration. Put it once in the shared layout.

## Initialize Tracwell

```html
<head>
  <script
    is:inline
    defer
    src="https://collect.tracwell.app/script.js"
    data-project-key="tw_live_..."
    data-collection-mode="private"
    data-consent="granted"
    data-respect-do-not-track="true"
  ></script>
</head>
```

Do not add data-astro-rerun. Full page loads initialize a new document, while Astro client navigation is covered by the SDK's History API listener.

## Track an event

Keep the initialized client available to the component or service that owns the successful product outcome. Call `track()` only after that outcome completes.

```ts
const eventId = analytics.track("signup_completed", {
  plan: "starter",
  source: "pricing",
});

if (!eventId) {
  // Collection is blocked or the event did not pass validation.
}
```

See the [custom events guide](https://tracwell.app/docs/events.md) for naming, property limits, and verification.
