> ## Documentation Index
> Fetch the complete documentation index at: https://highseat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Astro

> Install Highseat on an Astro site with one script tag in the layout, and track events with the highseat package.

An Astro site loads the tracker with one tag in its layout, static or server-rendered. The tag starts the tracker before any page script runs, which `inject()` from the package cannot do: it runs only once the bundled scripts load. The tracker loads from `cdn.highseat.com`, so the install needs no secret and no server code.

Replace `YOUR_SITE_ID` with your site's id, which starts with `site_`. **Site settings › Installation** in the dashboard shows it, with this code already filled in.

<Steps>
  <Step title="Add it to your layout">
    In the `<head>`. is:inline keeps Astro from bundling it, so the tracker starts before any page script.

    ```astro src/layouts/Layout.astro theme={null}
    <script is:inline defer src="https://cdn.highseat.com/script.js" data-site="YOUR_SITE_ID"></script>
    ```
  </Step>
</Steps>

Deploy, then [verify your install](/docs/install/verify). Highseat counts only your site's own domain, so a visit to `localhost` does not complete the install.

## Use an environment variable

Read the site id from PUBLIC\_HIGHSEAT\_SITE, set for the build: Astro writes it into the page.

```dotenv .env theme={null}
PUBLIC_HIGHSEAT_SITE=YOUR_SITE_ID
```

```astro theme={null}
<script is:inline defer src="https://cdn.highseat.com/script.js" data-site={import.meta.env.PUBLIC_HIGHSEAT_SITE}></script>
```

## Content Security Policy

Allow the ingest host in script-src and connect-src.

```text theme={null}
script-src https://cdn.highseat.com;
connect-src https://cdn.highseat.com;
```

## Track events with the package

Install the `highseat` package for a typed `track()` in your page scripts. It sends through the tracker your layout loads, and a call made before the tracker has loaded waits for it.

```bash theme={null}
npm install highseat
```

## Next steps

<Card title="Track events" icon="mouse-pointer-click" href="/docs/events">
  Send signups and purchases with a typed `track()`.
</Card>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.