How to Add Google Analytics to an Astro Site (and a Simpler Option)

Analytics tells you how many people visit, which pages they read, and where they came from. Google Analytics is the one everyone knows. Here’s how to add it to Astro without the one mistake that trips people up, and a simpler option if you’d rather skip cookie banners.

Step 1: Get your tag from Google

1. Go to analytics.google.com and make an account if you don’t have one.
2. Create a property for your site. Google asks for your site’s address.
3. Google shows you a block of code. It has your measurement ID in it, which looks like G- followed by letters and numbers.

Copy the whole block. It looks about like this, with your own ID instead of G-TEST12345:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-TEST12345"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-TEST12345');
</script>

Google changes this block now and then. Use the one Google gives you, not ours.

Step 2: Paste it into your layout, with one change

Open src/layouts/Layout.astro. Paste the block just above </head>. Then add is:inline to both <script tags:

<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-TEST12345"></script>
<script is:inline>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-TEST12345');
</script>

That’s the whole trick. Astro normally takes your scripts apart and rebuilds them, which breaks Google’s code. is:inline tells Astro to leave these two alone.

Step 3: Check it

Run npm run build, then open dist/index.html in a text editor. You should see googletagmanager.com in it. We did this on Astro 7.4 and it appeared once, exactly as pasted.

Then publish your site, visit it, and look at Realtime in Google Analytics. You should see yourself within a minute.

The simpler option: Cloudflare Web Analytics

Google Analytics is powerful, and most beginners use about two percent of it. It also sets cookies, which means a cookie banner in Europe.

Cloudflare Web Analytics is free, uses no cookies, and shows the numbers most people actually want: visits, pages, countries, and how fast your pages load.

1. In your Cloudflare account, open Web Analytics and add your site’s address.
2. Choose the JS snippet setup. Cloudflare shows one <script> tag.
3. Paste it just above </body> in your layout, and add is:inline:

<script is:inline defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "YOUR-TOKEN"}'></script>

If your site is already on Cloudflare, you can skip the paste. Cloudflare can add the snippet for you from its dashboard.

Where to go next

• Astro SEO guide, to get the visitors you’re about to count.
• How to add a sitemap so Google finds every page.
• Why is my Astro site slow? if your analytics show slow pages.

Frequently asked questions

Why does my analytics script not work in Astro?

Astro processes script tags unless you tell it not to. Add is:inline to both of Google's script tags and Astro leaves them exactly as written. That's the whole fix.

Do I need a cookie banner for Google Analytics?

In the EU and some other places, yes, because it sets cookies. Cloudflare Web Analytics doesn't use cookies, so most sites don't need a banner for it.

Where do I put the code?

In your layout file, the one every page uses. Then it's on every page automatically.