How to upgrade to GA4 from Universal Analytics with GatsbyJS

A GatsbyJS Icon and a Google Analytics 4 Icon

The following step by step tutorial walks you through how to upgrade to a Google Analytics 4 Property and implement it into an existing GatsbyJS project.

Step One: Navigate to your project within to Google Analytics

Go to Google Analytics and find your property.

Step Two: Navigate to Admin for your project

Select Admin from the bottom left of the Google Analytics webpage

Select Admin on the bottom left.

Step Three: Select GA4 Setup Assistant

Select GA4 Setup Assistant from the page that appears

In the Admin page for your project, select GA4 Setup Assistant.

Step Four: Select Get Started

Select get started from the page that appears.

In the page that appears, select Get Started under I want to create a new Google Analytics 4 property.

Step Five: Select Create Property

Select Create Property from the pop up that appears

In the pop up that appears, select Create Property.

Please note that you can enable data collection using your existing global site tags as shown in the visual but eventually this data would disappear and we recommend using two analytics providers in the year between the migration from UA to GA4.

Step Six: Select Go to your GA4 property

Select Go to Your GA4 Property in the page that appears

In the page that appears, select Go to your GA4 Property.

In the page that appears, select Data Streams from the menu under Setup Assistant.

Step Eight: Select your Data Stream

Select your Data Stream from the page that appears.

In the page that appears, select your Data Stream.

Step Nine: Copy your Property Identifiers

Copy your Stream and Measurement ID in the page that appears

In the page that appears, copy your StreamId and MeasurementId.

Step Ten: Navigate to your GatsbyJS config & add your identifiers

Copy your Stream Id and Measurement Id into your Gatsby Config

In your Gatsby JS gatsby-config.js, under your gatsby-plugin-google-gtag plugin, add your Stream and Measurement Id's to the array of tracking Ids.

As demonstrated you can have multiple tracking Ids - and we recommend you keep your old UA Id for now.

Step Eleven: Deploy & Confirm

Deploy your website and confirm that it registers on Google Analytics.

Deploy your code and confirm that it registers on your new GA4 Property.

Please be aware that Filters do not work with Google Analytics 4 Properties.

Filters cannot be applied to Google Analytics 4 properties.

As can be seen by navigating to your filters in Google Analytics, Filters do not work for GA4 properties.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.