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.

Table of Contents

Astro Google Analytics Integration ...
Astro Google Analytics Integration - Quick & Easy

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:

Astro Google Analytics Integration

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

Astro Google Analytics Integration

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
Code language: CSS (css)

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"], }, }), ], });
Code language: JavaScript (javascript)

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 – >
Code language: HTML, XML (xml)

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 – >
Code language: JavaScript (javascript)

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share via
Copy link
Powered by Social Snap