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:

---
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>

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.

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

---
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:

Open the live website.
Visit multiple pages.
Use browser developer tools to confirm the Trfyx script loads successfully.
Check the Network tab for tracking requests.
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.

Getting Started

Analytics & Insights

Behavior Analytics

Installation Guide

Goals & Attribution

Data & Sharing

Troubleshooting

Astro

Add Trfyx to your Astro project

1. Get your Trfyx tracking details

2. Add the tracker to your shared layout

Alternative: add it to individual page heads

3. Build and deploy

4. Verify tracking

Troubleshooting

​Add Trfyx to your Astro project

​1. Get your Trfyx tracking details

​2. Add the tracker to your shared layout

​Alternative: add it to individual page heads

​3. Build and deploy

​4. Verify tracking

​Troubleshooting

Add Trfyx to your Astro project

1. Get your Trfyx tracking details

2. Add the tracker to your shared layout

Alternative: add it to individual page heads

3. Build and deploy

4. Verify tracking

Troubleshooting