Astro

Two options: the @antlytics/astro integration (recommended), or a plain <script is:inline> snippet.

Option A — `@antlytics/astro` integration (recommended)

1. Install

npm install @antlytics/astro

2. Add to `astro.config.mjs`

import { defineConfig } from 'astro/config'
import { antlytics } from '@antlytics/astro'

export default defineConfig({
  integrations: [
    antlytics({ trackingId: 'YOUR_TRACKING_ID' }),
  ],
})

The integration automatically injects the tracking script on every page.

Option B — Plain `<script is:inline>`

Add the snippet once to your root layout so it runs on every page automatically.

Prerequisites

An Antlytics account and at least one site created in your dashboard
The tracking ID (UUID) from Settings → Tracking Snippet
An Astro project with a shared layout component (e.g. src/layouts/Layout.astro)

1. Open your root layout

Open src/layouts/Layout.astro (or whichever layout wraps all your pages) in your editor.

2. Add the snippet with `is:inline`

Inside the <head> tag, add a <script is:inline> block with your tracking code. Replace YOUR_SITE_ID with your tracking ID from the Antlytics dashboard:

---
// src/layouts/Layout.astro
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <slot name="head" />

    <script is:inline>
    (function(){
      var t="YOUR_SITE_ID",
          u="https://www.antlytics.com/api/ingest/pageview",
          k="ant_sid";
      function sid(){
        try{var s=sessionStorage.getItem(k);if(s)return s;
          s=crypto.randomUUID();sessionStorage.setItem(k,s);return s;}
        catch(e){return crypto.randomUUID();}
      }
      function utm(){
        try{var p=new URLSearchParams(location.search),o={};
          ["utm_source","utm_medium","utm_campaign","utm_term","utm_content"]
            .forEach(function(k){var v=p.get(k);if(v)o[k]=v;});
          return o;}
        catch(e){return {};}
      }
      function send(){
        fetch(u,{method:"POST",headers:{"Content-Type":"application/json"},
          keepalive:true,
          body:JSON.stringify(Object.assign(
            {tracking_id:t,pathname:location.pathname,
             referrer:document.referrer||undefined,session_id:sid()},
            utm()))});
      }
      send();
      window.addEventListener("popstate",send);
    })();
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Why `is:inline`?

By default Astro bundles and optimises scripts. The is:inline directive tells Astro to output the script exactly as written, without processing or deduplication. This is required here because the snippet uses plain IIFE syntax that does not need bundling, and because is:inline guarantees the script appears in the <head> on every render.

3. Verify data is flowing

Run your Astro site (astro dev or your build preview) and open it in a browser. Check the real-time count in your Antlytics dashboard — data appears within seconds.

View transitions (Astro 3+)

If you use Astro's View Transitions (<ViewTransitions />), the snippet's popstate listener will capture client-side navigation automatically. No additional configuration is required.

Troubleshooting

Open the browser Network tab and confirm a POST to /api/ingest/pageview returns 200.
Confirm the tracking ID matches Settings → Tracking Snippet in your Antlytics dashboard.
Test in an incognito window if you have an ad blocker, or set up the first-party proxy.

See Troubleshooting for more common issues.

Something missing? Get in touch and we will update these docs.