Track Your Site Performance

Add analytics to understand your audience and track conversions.

Setup Google Analytics 4

Free analytics loaded off the main thread with Partytown

Get Your Measurement ID

Go to Google Analytics and click Start measuring
Create a property (name, timezone, currency) and fill in your business details
Choose Web as the platform and add a data stream with your site URL
Copy your Measurement ID (starts with G-)

Install Partytown

Partytown runs the Google Analytics script in a web worker, keeping it off the main thread so it never slows down your page. Add the official Astro integration:

npm install @astrojs/partytown

Configure astro.config.mjs

// astro.config.mjs
import { defineConfig } from "astro/config";
import partytown from "@astrojs/partytown";

export default defineConfig({
  site: "https://your-site.com",
  integrations: [
    // ...your existing integrations
    partytown({
      config: {
        forward: ["dataLayer.push"],
      },
    }),
  ],
});

Add the Google Tag to Your Layout

Add the gtag snippet to the <head> of src/layouts/BaseLayout.astro so every page is tracked. Note the type="text/partytown" on both tags and replace G-XXXXXXXXXX with your ID:

---
// src/layouts/BaseLayout.astro
const GA_MEASUREMENT_ID = "G-XXXXXXXXXX";
---
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  {/* Google tag (gtag.js) */}
  <script type="text/partytown" async src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}></script>
  <script type="text/partytown" define:vars={{ GA_MEASUREMENT_ID }}>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', GA_MEASUREMENT_ID);
  </script>

  <!-- rest of head -->
</head>

That's It!

Run npm run build, deploy, then check Google Analytics → Realtime to confirm tracking works. Full reports can take up to 24-48 hours to populate.

Track Custom Events

Measure button clicks, form submissions, and conversions

Google Analytics Events

Because you forwarded dataLayer.push in Step 3, events fired on the main thread are relayed to the Partytown worker. Define a small gtag helper, then call it on any interaction:

<!-- Define gtag on the main thread (events are forwarded to Partytown) -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
</script>

<!-- Track button click -->
<button onclick="gtag('event', 'signup_click')">
  Sign Up
</button>

<!-- Track form submission -->
<form onsubmit="gtag('event', 'contact_submit')">
  <!-- form fields -->
</form>

📋 Privacy Considerations

• Google Analytics requires a cookie consent banner in the EU (GDPR)
• Update your privacy policy to mention analytics tracking
• Plausible doesn't use cookies and is GDPR-compliant by default
• Never track personally identifiable information (PII)

You're All Set!

Analytics is now tracking your visitors. Check your dashboard to see real-time data.