How to Install Google Analytics on AstroJS Easily

If you’re building a blog, portfolio, documentation site, or business website with AstroJS, one of the easiest ways to monitor how people use it is integrating Google Analytics. In this tutorial, you’ll learn how to install Google Analytics 4 (GA4) on an AstroJS website the easy way! Google recommends using either the Google tag or Google Tag Manager to measure activity on the website, and GA4 uses a Measurement ID usually starting with G-.

Why Add Google Analytics to Astro

Astro is built for speed, but speed is nothing without data. By installing Google Analytics on your Astro site, you can find out things like these:

Which blog posts get the most visitors?
Are users coming from Google Search?
Which pages need better content?
Is your SEO working?
Which country or device type brings the most traffic?

All of that information allows you to improve your site based on what real users are doing, not a guess.

Google Analytics on AstroJS Easily — Add Google Analytics AstroJS

Add Code Google Analytics to AstroJS

Step 1 - Create a Google Analytics Property

First, go to your Google Analytics account and create a GA4 property for your site.

In the setup process, you usually need to:

Create or select a Google Analytics account.
Create a new property.
Choose Web as the platform.
Enter your website URL.
Create a web data stream.
Copy your Measurement ID.

Your Measurement ID looks similar to this:

G-XXXXXXXXXX

Google’s Analytics setup flow includes creating a property, adding a data stream and adding the Analytics code to your website.

Step 2: Add Google Analytics to Your Astro Layout

The easiest way to add Google Analytics in AstroJS is to drop in the GA4 script inside your main layout file. Most Astro projects will have the main layout file living here:

src/layouts/Layout.astro

Open your layout file and find the opening <head> tag.

Then drop in your Google Analytics code inside the <head> tag. For example:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />

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

  <title>My Astro Website</title>
</head>

Replace: G-XXXXXXXXXX with your own GA4 Measurement ID.

The is:inline directive is helpful where you want to keep a script inline versus letting Astro process it into a separate bundled file. This is often used for third-party scripts such as Google Analytics. By placing the Google Analytics code inside the <head> tag in your main Astro layout, the tracking script will be loaded on all the pages that use this layout.

Step 3: Test Google Analytics

Once you’ve added the script, fire up your Astro app:

Then open it in your web browser.

(Optional): Google Analytics usually doesn’t work as expected on localhost, though. After deploying your Astro site, visit your live website and check your Google Analytics dashboard.

You could verify the installation via:

Realtime report in Google Analytics
Browser developer tools
Network requests to Google Analytics
Google Tag Assistant

If the installation went correctly, we would start seeing a few realtime visits in our GA4 account.

Step 4: Build and Deploy Your Astro Website

(Optional): If you made any changes to your Astro website, make sure to build it again:

Then deploy this newly-generated site to your hosting platform of choice, e.g.:

Cloudflare Pages
Netlify
Vercel
GitHub Pages
Self-hosted server or VPS

Once deployed, check into Google Analytics again on the live site.

Common Problems When Installing Google Analytics on AstroJS

1. Wrong Measurement ID

Ensure your Measurement ID begins with: G-

e.g.: G-ABC1234567

Don’t confuse it with a Google Tag Manager container ID beginning with:

GTM-

2. Only Adding Script to a Single Page

If you only add the Google Analytics script to a single page, it’ll only track visits on that page.

Best practice dictates placing it in your main layout file so it’s on your whole website.

3. Forgetting to Deploy the Site

If you are using Astro to create statically-generated pages, then your changes and updates will not go live until you re-run the build processes.

Run:

npm run build

Then deploy that.

4. Blocked by AdBlocker or Privacy Extensions

Adblockers, privacy extensions and some browsers will block access to Google Analytics scripts.

If you don’t see yourself in realtime widget reports, try testing in another browser or incognito window with extensions turned off.

That’s all there is to it. Installing Google Analytics on AstroJS is a breeze, you just need a GA4 property and to add the Google Analytics script to your main Astro layout.

From there, we can capitalize on the real user data in Google Analytics to enhance our SEO, content strategy, attraction landing pages and user experience.