Privacy-Friendly Analytics on Astro — Komal Nakrani Tips & Tricks

To add analytics to an Astro site without cookies or a heavy tag, use a privacy-focused service such as Cloudflare Web Analytics, Plausible, Fathom or Umami, and paste its script tag into your base layout’s <head> with is:inline. These tools don’t use cookies for tracking (check each provider’s current policy), load a small script, and need no Astro integration.

Key Takeaways

One <script is:inline defer> tag in the base layout covers every page.

is:inline stops Astro from bundling a third-party script it shouldn’t touch.

With <ClientRouter />, make sure page views fire on client-side navigation.

Keep heavier tags (Google Tag Manager) off the main thread with Partytown, or load them late.

The options

Service	Hosting	Notes
Cloudflare Web Analytics	Cloudflare	Free; can be enabled without a script for sites proxied through Cloudflare
Plausible	Hosted or self-hosted	Open source; paid hosted plans
Fathom	Hosted	Paid; simple dashboard
Umami	Self-hosted or hosted	Open source

Compare current pricing and data policies on each provider’s site; they change.

Add the script

Put it in the layout every page uses:

---
// src/layouts/BaseLayout.astro
---
<html lang="en">
  <head>
    <!-- ... -->
    <script
      is:inline
      defer
      data-domain="example.com"
      src="https://plausible.io/js/script.js"
    ></script>
  </head>
  <body><slot /></body>
</html>

Use the exact snippet from your provider’s dashboard; attribute names and URLs differ. The Plausible script docs list its options.

Why is:inline: without it, Astro treats <script> as a module to process and bundle. For an external script with src and data attributes, you want it left exactly as written.

Only in production

Avoid counting your own development visits:

{import.meta.env.PROD && (
  <script is:inline defer data-domain="example.com" src="https://plausible.io/js/script.js"></script>
)}

Preview deploys also run production builds. To exclude them, gate on an environment variable that is only set in production, such as PUBLIC_DEPLOY_ENV === 'production'.

Custom events

Most providers expose a global function for events. Call it from a component script:

<button class="buy" data-theme="cast-and-render">Buy theme</button>

<script>
  document.querySelectorAll<HTMLButtonElement>('.buy').forEach((btn) => {
    btn.addEventListener('click', () => {
      // Plausible; other providers have equivalent functions
      (window as any).plausible?.('Buy click', { props: { theme: btn.dataset.theme } });
    });
  });
</script>

The optional call (?.) keeps the button working if an ad blocker removed the analytics script.

With view transitions

If you use <ClientRouter />, navigations happen without a full page load. Some analytics scripts detect History API navigation and count page views automatically; others only count the first load. If yours doesn’t, trigger a page view on Astro’s navigation event:

<script>
  document.addEventListener('astro:page-load', () => {
    (window as any).plausible?.('pageview');
  });
</script>

Check your provider’s docs for single-page-app support before adding this, or you’ll double-count.

Heavier tags

Google Analytics with Tag Manager and marketing pixels are much larger and often the main cause of poor responsiveness scores. If you need them:

Load them after interaction or with a delay, not in the critical path.
Or move them to a web worker with Partytown: npx astro add partytown, then type="text/partytown" on the script tag.

Partytown works for many tags, but not ones that need synchronous DOM access. Test events after switching.

The Astro performance guide covers third-party scripts alongside images and fonts, and lazy-loading islands shows the same load-late idea for your own components. For other integrations on static sites, see the headless CMS guide.

FAQ

Does Astro have built-in analytics?

No. Add a provider’s script tag to your layout. Some hosts, such as Cloudflare and Vercel, offer analytics you can enable in their dashboards.

That depends on the tool’s data practices and your jurisdiction. Cookieless tools often reduce what you need to disclose, but check the provider’s compliance documentation and get advice if you’re unsure.