How to Add Privacy-First Analytics to Your Astro Site (2026)

Astro is the framework of choice for developers who care about performance, clean HTML, and shipping fast. If you’re reading this, you probably already know why: minimal JavaScript, static-first rendering, and component islands that actually make sense.

Measure.events is analytics built with the same philosophy: lightweight, cookieless, and no bloat.

Here’s how to add Measure.events to any Astro site in under 5 minutes.

The 30-Second Version

Create a free account at lets.measure.events, grab your site key, and drop this script into your Astro layout:

<!-- src/layouts/Layout.astro -->
<html>
  <head>
    <!-- your existing head content -->
    <script defer src="https://lets.measure.events/api/script/YOUR_SITE_KEY"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

That’s it. No cookies. No consent banner. No performance hit. GDPR compliant by default.

The defer attribute loads the script after your page content, so it never blocks rendering.

Why Measure.events Works Well with Astro

Astro sites are typically:

Statically generated or SSR-rendered — Measure handles both
Content-heavy — you need to know which blog posts, docs pages, and landing pages actually convert
Privacy-conscious — Astro developers tend to care about not shipping tracking cookies to users
AI-assisted — if you’re using Cursor or Claude to build your Astro site, you can query your analytics directly from your IDE

Measure.events fits all of these naturally.

Full Integration Guide

Step 1: Create Your Account and Site

Go to lets.measure.events/sign-up
Create an account (magic link auth — no password needed)
Add your site from the dashboard
Copy your unique site key (looks like tzi1iks5ir82qfy6d6u1hvpt)

Step 2: Add the Script to Your Layout

The best place is your root layout file — typically src/layouts/Layout.astro or src/layouts/BaseLayout.astro:

---
// 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, initial-scale=1.0" />
    <title>{title}</title>
    
    <!-- Measure.events — privacy-first analytics -->
    <script 
      defer 
      src="https://lets.measure.events/api/script/YOUR_SITE_KEY"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Replace YOUR_SITE_KEY with your actual site key from the dashboard.

Step 3: Verify It’s Working

After deploying, visit your site and open the Measure.events dashboard. You should see your pageview appear within a few seconds.

If you want to verify the script loaded correctly, open your browser’s Network tab and look for a request to lets.measure.events.

For Astro Content Collections

If your Astro site uses Content Collections (and it probably should), you might want to track which blog posts or docs pages are getting the most traffic.

Good news: the script handles this automatically. Every page load is tracked with its full URL path. In your analytics dashboard, you’ll see:

/blog/how-to-build-with-astro — 47 views
/docs/getting-started — 23 views
/blog/deploy-to-bunny-cdn — 11 views

No extra configuration needed.

For SSR / Hybrid Mode

If you’re using Astro’s SSR or hybrid rendering mode, the script works identically — it’s client-side JavaScript that fires on page load regardless of how the HTML was generated.

One thing to note: in SSR mode, you can also instrument server-side events via the Measure.events REST API if you want to track things that don’t have a page view (like form submissions, API calls, or webhook events). But for most use cases, the script is all you need.

For Static Site Deployments (Bunny CDN, Netlify, Vercel)

If you’re deploying to a CDN (Bunny CDN, Netlify, Vercel, etc.), the tracking script loads from our CDN and makes a lightweight call back to our servers. Nothing changes in your deployment process.

If you’re using Astro’s astro build with output to a static directory:

npm run build
# Deploy the dist/ directory to your CDN

Your analytics tracking is automatically included in the built HTML files.

The Agent-Native Part

Here’s where Measure.events goes beyond other analytics tools for Astro developers.

We ship a native MCP (Model Context Protocol) server. If you’re using Cursor or Claude Desktop to build your Astro site, you can connect your analytics directly:

Add this to your Cursor or Claude MCP config:

{
  "mcpServers": {
    "measure-events": {
      "url": "https://lets.measure.events/mcp",
      "headers": {
        "Authorization": "Bearer your-api-key"
      }
    }
  }
}

Then, while you’re writing code in Cursor, you can ask:

“Which of my blog posts is getting the most traffic?” “Did the performance fix I deployed yesterday affect my bounce rate?” “Is anyone reading my docs?”

Your AI assistant pulls the data directly. No tab switching. No dashboard hunting.

Pricing

$29/month — no pageview limits, 14-day free trial.

That’s it. One price, no tiers, no surprise bills when a blog post goes viral.

Get Started

Create your account (free for 14 days)
Add one script tag to your Astro layout
Deploy and start seeing real visitor data immediately

No cookies. No consent banners. No performance overhead. Privacy-first analytics that your AI agents can actually use.