Astro Google Analytics Integration – Quick & Easy

This guide will teach you how to integrate Google Analytics into your Astro project. We are going to do our Astro Google Analytics integration with the help of the Partytown package.

Step 1 - Create Google Analytics Property

First, you need to create a new Google Analytics 4 property for your website. The process is straightforward. Just follow the official Google documentation.

Once you have created the property, navigate to Data Streams and click on your property. Then click on the View tag instructions button:

Once you are there, click on Install manually and copy the code to your clipboard:

Step 2 - Partytown Setup

Now we install Partytown and include it in our astro.config.mjs file. To install Partytown in your Astro project, run:

npm install -D @astrojs/partytown

Open your astro.config.mjs file and add the partytown object to the integrations array:

import { defineConfig } from "astro/config";
import partytown from "@astrojs/partytown";
export default defineConfig({
  integrations: [
    partytown({
      // Adds dataLayer.push as a forwarding-event.
      config: {
        forward: ["dataLayer.push"],
      },
    }),
  ],
});

Step 3 - Astro Google Analytics Integration

Now we put everything together. Your original Google Analytics code looks like this:

<!-- head -->
<script
  type="text/partytown"
  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID">
</script>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "GA_MEASUREMENT_ID");
</script>
<!-- more head -->

We need to slightly modify this code and add some Partytown code for it to work:

1. Make sure to replace the GA_MEASUREMENT_ID placeholder with your actual Google Analytics tracking ID.
2. Add a type attribute to both <script> tags and set it to the value of "text/partytown".

Now we only need to include our Google Analytics script inside the <head> element of our project as the first entry. You can either do this in a layout, on a page, or in a component. In the example below, we use the Layout.astro file. The final code should look something like this:

<!-- head -->
<script
  type="text/partytown"
  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID">
</script>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "GA_MEASUREMENT_ID");
</script>
<!-- more head -->

Conclusion

This should be everything. As soon as Google Analytics updates or you get some traffic to your website, your Astro project should be successfully hooked up to Google Analytics. Want to learn how to properly format Astro files using VSCode? We got you covered.

whoami

Stefan

Stefan founded Ceos3c in 2016 and has spent a decade teaching cybersecurity, Linux, and web development through hands-on tutorials. He builds and ships real products while sharing his journey: ProofSwap.me, XPMetric.com, and EasyEarningsTracker.com. Find him on YouTube (youtube.com/stefanrows) and X (@StefanRows).

• ProofSwap Testimonial swaps for indie makers
• xpmetric Cookieless web analytics
• EasyEarningsTracker Income tracking for creators