Migrate a Next.js App to GA4 Using react-ga4

In this post, we go over how to migrate your Next.js web app from Google Universal Analytics to Google Analytics 4 if you use react-ga. Google UA stops working on July 1st, 2023, so it’s a good idea to migrate beforehand. react-ga is a popular package that makes Google Analytics a breeze in React apps. react-ga4 adds support for GA4. It’s worth mentioning that react-ga4 wasn’t written by the creators of react-ga. The license also changes: react-ga is distributed under Apache 2.0, while react-ga4 uses MIT.

In this guide, you will learn:

• How to get your GA4 property
• How to set up react-ga4
• How to switch from react-ga to react-ga4
• How to add your GA4 property to react-ga4
• How to start receiving data in Google Analytics

I’ll assume you already have a Next.js app with react-ga configured. The guide also applies to a plain React app.

Get GA4 property

To get your GA4 property, log in to Google Analytics. If you haven’t set up GA4, you’ll see plenty of warnings, banners and popups asking you to. Any of them will take you to the setup assistant. If none show up, follow the official guide by Google.

You’ll need a measurement ID that looks like this: G-XXXXXXXXXX. Save it for the next step.

Set up react-ga4 in your Next.js project

If you haven’t set up react-ga or react-ga4 before, follow along here. First, install react-ga4:

npm i react-ga4

Add a new file called components/googleAnalytics.js to 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 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;

You can then wrap any page in the layout component to track it:

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

export const MyPage = () => (
  <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

Open the file where you initialized react-ga. In my case, it’s a separate file called googleAnalytics.js. In that file, replace the UA property in the initialize call with the new measurement ID:

ReactGA.initialize("G-XXXXXXX")

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

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

Start receiving data in Google Analytics

Refresh the page a couple of times, and you should start seeing data in Google Analytics.

Also make sure GA scripts aren’t being blocked. I was using Brave, which blocks GA scripts automatically, and didn’t see any data until I turned off the shields.

Next steps

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