Add Crustat to an Astro site

Before you start

You need an Astro project on Astro 3 or newer, and your Crustat site ID. In Crustat, open your site, go to Site settings → Install and click Copy ID next to Site ID.

Install the package

npm install @crustat/astro

If you use another package manager, pnpm add @crustat/astro or yarn add @crustat/astro work the same way.

Add it to your layout

Put the component once in the <head> of the layout your pages share, with your site ID:

---
import Crustat from '@crustat/astro';
---
<html>
  <head>
    <Crustat siteId="YOUR-SITE-ID" />
  </head>
  <body>
    <slot />
  </body>
</html>

If you have more than one layout, add it to each one, or to a shared head component they all use. Only once per page, though: two copies would record every view twice.

That’s it. Build and deploy as usual.

What it does

The component prints the same line you’d paste by hand:

<script defer src="https://stats.crustat.com/script.js" data-site="YOUR-SITE-ID"></script>

Astro leaves it exactly as it is, without bundling or moving it. It works the same for static sites and server-rendered ones.

View transitions

If your site uses Astro’s view transitions, page changes happen without a full reload. Crustat follows them on its own, so each new page shows up as a page view. You don’t need to run anything again on each page. See single-page apps for how this works.

Testing

Visits from localhost are skipped on purpose, so astro dev on your own computer won’t show up in your stats. Deploy, or open a preview on a real address, then visit a page and wait about a minute. On a preview address that isn’t your site’s domain, visits are recorded but left out of your stats, see add and manage your sites.

Optional: a Content-Security-Policy

If your site sends a Content-Security-Policy header, allow https://stats.crustat.com in script-src and connect-src.

Not seeing your visit? See visits aren’t showing up.