Privacy-Friendly Analytics, Zero Config

Vercel Web Analytics is cookieless, GDPR-compliant out of the box, and built right into the platform.

If your Astro site is deployed on Vercel, you can turn it on in a couple of minutes.

Set Up Web Analytics

No tracking IDs, no extra scripts to wire up by hand

Enable Analytics in Your Vercel Project

Make sure your Astro site is deployed on Vercel
Open your project in the Vercel dashboard and go to the Analytics tab
Click Enable under Web Analytics

Install the Analytics Package

Add the official package to your project. It ships an Astro component, so there's nothing to configure in astro.config.mjs:

npm install @vercel/analytics

Add the Component to Your Layout

Import the Astro component and drop <Analytics /> into the layout that wraps every page (usually right before the closing </body>). That's all it takes to track every route:

---
// src/layouts/BaseLayout.astro
import Analytics from "@vercel/analytics/astro";
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- rest of head -->
  </head>
  <body>
    <slot />

    <Analytics />
  </body>
</html>

Deploy and Verify

Commit your changes and push, or run a manual deploy:

vercel deploy --prod

That's It!

Visit your live site, then open the Analytics tab in Vercel, page views show up within about 30 seconds. Note that data is only collected on production deployments, so you won't see anything from localhost.

Track Custom Events

Measure signups, form submissions, and other conversions

Use the track helper inside an Astro client <script> tag. Astro bundles the import for you, so you can call it from any event handler:

<button id="signup">Sign Up</button>

<script>
  import { track } from "@vercel/analytics";

  document.getElementById("signup")?.addEventListener("click", () => {
    track("Signup", { plan: "pro" });
  });
</script>

Custom events require a Vercel Pro or Enterprise plan. The event name is the first argument; the optional second argument holds custom properties.

Bonus: Add Speed Insights

Track real-world Core Web Vitals from your actual visitors

Speed Insights is a separate, equally simple add-on. Enable it under the Speed Insights tab in your Vercel project, then install the package and add its component:

npm install @vercel/speed-insights

---
// src/layouts/BaseLayout.astro
import Analytics from "@vercel/analytics/astro";
import SpeedInsights from "@vercel/speed-insights/astro";
---
<body>
  <slot />

  <Analytics />
  <SpeedInsights />
</body>

📋 Privacy Considerations

• Vercel Web Analytics is cookieless, no cookies, no cross-site tracking
• Compliant with GDPR, CCPA, and PECR by default, so a consent banner usually isn't required
• Visitor data is anonymized and never used to build personal profiles
• It's still good practice to mention analytics in your privacy policy

You're All Set!

Check the Analytics tab to see real-time data.