How to add Google Analytics to your React/Next.js app

If you have a React or Next.js app and want to track user behavior and gather insights into your app’s usage, integrating Google Analytics can provide valuable data. In this article, we’ll walk through the steps to add Google Analytics to your React or Next.js app.

Step 1: Create a Google Analytics account

If you don’t already have a Google Analytics account, you’ll need to create one. Go to the Google Analytics website and sign in or create a new account. Once you have an account, you can create a new property to track your React or Next.js app.

Step 2: Install a Google Analytics package

There are several packages available that can help you easily integrate Google Analytics into your React or Next.js app. One popular package is react-ga, which provides a simple way to initialize Google Analytics and send pageviews and events.

To install react-ga, you can use npm or yarn:

      
        npm install react-ga
        # or
        yarn add react-ga
      
    

Step 3: Initialize Google Analytics in your app

Once you have the react-ga package installed, you’ll need to initialize Google Analytics in your app. You can do this by creating a file that initializes react-ga and sets up your Google Analytics tracking ID.

      
        import ReactGA from 'react-ga';

        const TRACKING_ID = 'YOUR_TRACKING_ID'; // Replace with your Google Analytics tracking ID
        ReactGA.initialize(TRACKING_ID);
      
    

Step 4: Track pageviews and events

With Google Analytics initialized in your app, you can start tracking pageviews and events. For example, you can use the react-ga package to send a pageview when a user navigates to a new page in your app:

      
        import ReactGA from 'react-ga';

        function TrackPage() {
          ReactGA.pageview(window.location.pathname + window.location.search);
          return null;
        }
      
    

Step 5: Verify your tracking

After completing the steps above, you should be able to see data in your Google Analytics account. You can verify that your tracking is working by navigating through your app and checking the Real-Time reports in Google Analytics to see if your pageviews and events are being captured.

By following these steps, you can easily add Google Analytics to your React or Next.js app and start gathering valuable insights into how users are interacting with your app.