How to add Google Analytics 4 to an Astro site

To add Google Analytics 4 to Astro, put the Google tag in the <head> of your base layout with is:inline scripts, so Astro leaves them as they are. Read the Measurement ID from an environment variable, and GA4's enhanced measurement counts page changes, including view transitions.

1. Add the ID to your environmentCopy Anchor Link

PUBLIC_GA_ID=G-XXXXXXXXXX

2. Add the tag to your base layoutCopy Anchor Link

---
const gaId = import.meta.env.PUBLIC_GA_ID;
---
<html lang="en">
  <head>
    {gaId && (
      <>
        <script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>
        <script is:inline define:vars={{ gaId }}>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', gaId);
        </script>
      </>
    )}
  </head>
  <body>
    <slot />
  </body>
</html>

is:inline stops Astro from bundling the scripts, and define:vars passes the ID in. Make sure every page uses this layout.

View transitionsCopy Anchor Link

With Astro's view transitions (<ClientRouter />), pages change without a full reload. GA4's enhanced measurement counts these through browser history changes; check it's on in GA4: Admin → Data streams → your stream → Enhanced measurement → Page views → Page changes based on browser history events. Then click between pages and watch GA4's Realtime report.

Optional: PartytownCopy Anchor Link

To move the tag off the main thread, add @astrojs/partytown (npx astro add partytown), set the scripts' type to text/partytown, and forward dataLayer.push in the integration's config. Test carefully afterwards: some setups need extra configuration.

Check it worksCopy Anchor Link

Build and open your site, then GA4's Realtime overview. More ways to check.

RelatedCopy Anchor Link

• Cookie banners and Consent Mode

SourcesCopy Anchor Link

• Astro: Partytown integration