How to Migrate Next.js or React Project using react-ga to GA4?

May 27th, 2023

In this blog, we will go over how you can migrate from Google Universal Analytics to Google Analytics 4 in your Next.js web app if you are using react-ga. Google UA will stop working on July 1st, 2023 so it is a good idea to do it beforehand. react-ga is a popular package that has been used to make Google Analytics a breeze in React apps. react-ga4 adds support for GA4. Now it is worth mentioning that react-ga4 was not written by the same creators as react-ga. There is also a license change from react-ga to react-ga4. react-ga is distributed under Apache 2.0, whereas react-ga4 is under MIT.

In this guide, you will learn:

How to get your GA4 property
How to setup react-ga4
How to switch react-ga to react-ga4
How to add GA4 property to react-ga4
How to start receiving data in Google Analytics

I will assume that you already have the Next.js app and react-ga configured. This guide is also applicable to a React app as well.

Get GA4 Property

To get your GA4 property, you can do so by logging into your Google Analytics. If you have not set up your GA4, you will have a whole bunch of warnings, banners, and popups telling you to do so. You can follow any of them to get to the setup assistant. If for some reason you are not getting any of the popups, you can follow the official guide by Google.

You will need a measurement ID that will look like this: G-XXXXXXXXXX. Save it, you will need it for the next step.

Setup react-ga4 in your Next.js project

If you have not set up react-ga or react-ga4, you can follow along here. First, go ahead and install react-ga4.

npm i react-ga4

Add a new file called `components/googleAnalytics.js` in your project and paste the following:

import ReactGA from "react-ga4"
 
export const initGA = () => {
  ReactGA.initialize("G-XXXXXXX")
}
  
export const logPageView = () => {
  ReactGA.send({ hitType: 'pageview', 
  page: window.location.pathname, 
  title: window.document.title 
})
}

Then create another file called `components/layout.js` in your project and paste the following:

import React, { useEffect } 
from "react";
import { initGA, logPageView } 
from "./googleAnalytics.js";

const Layout = (props) => {

useEffect(() => {
  if (!window.GA_INITIALIZED) {
    initGA();
    window.GA_INITIALIZED = true;
  }
  logPageView();
});

return (
  <div>{props.children}</div>
);

};

export default Layout;

Then you can wrap any page in the layout component to track it.

import Layout from '../../components/layout';

export const myPage = () => {
  return {
    <Layout>
      <div>Hello World<div/>
    </Layout>
  }
}

Remove React-GA and Install React-GA4

Run the following command to remove react-ga:

npm uninstall react-ga

Then install react-ga4:

npm install react-ga4

Add Your GA4 Property to React-GA4

Wherever you have initialized your react-ga, open that file. For me, I created a separate file called googleAnalytics.js. Inside of the file swap the UA property in initialize call to the new measurement ID.

ReactGA.initialize("G-XXXXXXX")

Then wherever you track the page view event, remove set and pageview calls and replace them with send function.

ReactGA.send({ hitType: 'pageview', page: window.location.pathname, title: window.document.title })

Start Receiving Data in Google Analytics

At this point, if you refresh the page a couple of times, you should start seeing data flow in Google Analytics.

Now you also want to ensure that GA scripts are allowed. I was using Brave which automatically blocks GA scripts and did not see the data reflected until I turned off the shields.

Next Steps

I hope you enjoyed this post. If you have any questions, reach out on my LinkedIn.

Andrey Safonov