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

# Astro

> Add Trfyx analytics to an Astro project.

# Add Trfyx to your Astro project

Astro sites can install Trfyx through a shared layout so the tracker is included across pages.

## 1. Get your Trfyx tracking details

Use the snippet below and replace its Website ID and domain placeholders with the values for your Trfyx project. The tracking script URL is `https://app.trfyx.com/script.js`.

Keep the script URL as `https://app.trfyx.com/script.js` and replace only the Website ID and domain placeholders with values for your Trfyx project. Do not reuse another project's identifier.

## 2. Add the tracker to your shared layout

The recommended approach is to add the tracker to the layout used by your site's pages. For example, if your project has `src/layouts/Layout.astro`:

```astro theme={null}
---
const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>

    <script
      defer
      data-website-id="YOUR_TRFYX_PROJECT_ID"
      data-domain="yourdomain.com"
      src="https://app.trfyx.com/script.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>
```

<Warning>
  Replace `YOUR_TRFYX_PROJECT_ID` with your Trfyx Website ID and `yourdomain.com` with the domain you want to track. Keep the script URL as `https://app.trfyx.com/script.js`.
</Warning>

Make sure your pages actually use the shared layout. For example:

```astro theme={null}
---
import Layout from '../layouts/Layout.astro';
---

<Layout title="My site">
  <main>
    <h1>Welcome</h1>
  </main>
</Layout>
```

## Alternative: add it to individual page heads

If your project does not use a shared layout, the Trfyx snippet can be added to each page's `<head>`. A shared layout is preferred because it reduces the risk of missing pages or installing the tracker multiple times.

## 3. Build and deploy

Build your Astro project and deploy it using your normal hosting provider.

Check the generated production site rather than relying only on local development when verifying analytics.

## 4. Verify tracking

After deployment:

1. Open the live website.
2. Visit multiple pages.
3. Use browser developer tools to confirm the Trfyx script loads successfully.
4. Check the Network tab for tracking requests.
5. Check your Trfyx dashboard for incoming page activity.

## Troubleshooting

If analytics are not appearing:

* Confirm every relevant page uses the layout containing the tracker.
* Confirm the exact Trfyx project snippet is being rendered in the final HTML.
* Check for CSP restrictions that could block the script or event requests.
* Confirm the configured domain and project identifier belong to the correct Trfyx project.
* Search the codebase for multiple Trfyx installations and remove duplicates.
* Test the deployed site rather than only localhost.

For Astro projects using server-side rendering, middleware, or a custom proxy, keep the standard installation separate from any advanced proxy configuration so you can isolate tracking problems more easily.


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