How to Add Privacy-Friendly Analytics to an Astro Site

Astro is built for speed. Your analytics should be too.

Here's how to add privacy-friendly analytics to an Astro site without slowing it down, setting cookies, or adding a consent banner.

Step 1: Add the script

Open your main layout file (usually src/layouts/Layout.astro) and add one line before the closing </body> tag:

<script
  src="https://app.fairlytics.dev/js/tracker.v1.js"
  data-site="YOUR_SITE_ID"
  data-api="https://app.fairlytics.dev"
  is:inline
></script>

The is:inline directive tells Astro to include the script as-is without bundling or processing it. This is important — the tracker is only 510 bytes gzipped and should load directly from the CDN.

That's it. You're done.

Step 2: Verify it works

Deploy your site (or run astro dev locally), open it in a browser, and check your Fairlytics dashboard. You should see the page view appear within seconds.

Works with ViewTransitions

If you're using Astro's <ViewTransitions /> for client-side navigation, the tracker handles it automatically. It listens for popstate events and the History API, so page navigations are tracked without any extra configuration.

No changes needed. It just works.

Works with SSR and islands

Whether you're running Astro in static mode (output: 'static'), server mode (output: 'server'), or hybrid mode — the tracker works the same way. It runs entirely client-side, so your rendering strategy doesn't matter.

Same goes for Astro islands (React, Vue, Svelte, etc.). The tracker is framework-agnostic.

What about Google Analytics?

Google Analytics sets cookies, requires a consent banner in the EU, and loads ~82 KB of JavaScript. If you're building with Astro because you care about performance, GA undermines that goal.

Fairlytics loads 510 bytes, sets zero cookies, and doesn't require a consent banner under GDPR or CCPA. Your Astro site stays fast.

What you get

Without any cookies or personal data, you still get:

All of this without compromising your visitors' privacy. Here's how the visitor counting works without cookies.

Full layout example

---
// 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>
</head>
<body>
  <slot />
  <script
    src="https://app.fairlytics.dev/js/tracker.v1.js"
    data-site="YOUR_SITE_ID"
    data-api="https://app.fairlytics.dev"
    is:inline
  ></script>
</body>
</html>

Don't have a Fairlytics account yet? Sign up free — no credit card required. You'll get your site ID in under a minute.