Upgrading to Google Analytics 4

This guide shows you how to upgrade a Universal Analytics Property to the new Google Analytics 4. If you exported a codebase after July 1st 2023 then this will already be setup in your codebase and you don’t need to follow this guide.

Create a new Google Analytics 4 property by following our updated setup guide or upgrade your existing property. After logging into Google Analytics you should be prompted to upgrade your existing property to v4.
Update the analytics and @analytics/google-analytics packages to the latest version by running this command in your project directory

npm install analytics@latest @analytics/google-analytics@latest

Update src/util/analytics.js. Below we show the single line you need to change.

const analytics = Analytics({
  debug: process.env.NODE_ENV !== "production",
  plugins: [
    googleAnalyticsPlugin({
      // Remove this line:
      // trackingId: process.env.REACT_APP_GA_TRACKING_ID,
			
      // Add this line:
      measurementIds: [process.env.REACT_APP_GA_MEASUREMENT_ID],

      // Or if using Next.js add this line instead:
      measurementIds: [process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID],
    }),
  ],
});

3. In your .env file change the following variables names: GA_TRACKING_ID to GA_MEASUREMENT_ID

REACT_APP_TRACKING_ID to REACT_APP_MEASUREMENT_ID

Or if using Next.js: NEXT_PUBLIC_TRACKING_ID to NEXT_PUBLIC_MEASUREMENT_ID

In your .env change the value of the above variables to your Google Analytics 4 measurement ID.

🗣

Did you find this guide helpful? Anything confusing? Please reach out and let us know.