Add google analytics to Astro with Partytown

As your website attracts more visitors, you may need to incorporate various third-party scripts into your project to extend its functionality beyond the core features. Two common third-party scripts are Google Analytics and Facebook Pixel, which are web analytics services that help you assess and improve your website’s effectiveness.

In this guide, we will focus on adding Google Analytics to your Astro project using Partytown, a web worker integration.

🧑‍💻 Getting Started

To begin, create a new Astro project using the CLI:

npm create astro@latest

Next, install the Astro integration for Partytown:

npm install -D @astrojs/partytown

Add the Partytown integration to your astro.config.mjs file with the following configuration options:

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"],
      },
    }),
  ],
});

This configuration enables Partytown to forward all events to Google Analytics using window.dataLayer. For more information about configuration options, refer to the Partytown documentation.

Create a Google Analytics account and obtain the tracking ID. After creating a new property for your domain, you can find the tracking ID in the Property Settings.

Hands-on Time

Now that we have the Partytown integration installed and the Google Analytics tracking ID, we can proceed with setting up our Google Analytics script.

Google Analytics will provide you with an inline script that will resemble the following:

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

To enable Partytown to run Google Analytics in a web worker, make the following modifications to the script:

1. Replace GA_MEASUREMENT_ID with your tracking ID.
2. Add a type attribute and set it to text/partytown for both script tags. This informs Partytown which script tags to handle.

After applying the modifications, your updated script will look 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 -->

Finally, place this code snippet in the head section of your HTML. If you copy the code above, remember to update GA_MEASUREMENT_ID with your tracking ID.

Congratulations! You have successfully added Google Analytics to your Astro project. 🎉

Testing

After deploying your project, visit your Google Analytics. You should see some recent activity after visiting your website.