How to add Google Analytics to Next.js?

@rusty.rosenbaum 

To add Google Analytics to a Next.js application, you can follow these steps:

1. Sign up for a Google Analytics account and create a new property for your Next.js application. This will give you a tracking ID that you will use to set up the tracking code in your application.
2. Install the react-ga library using npm:

1

npm install react-ga

1. Create a file in your Next.js application to initialize and configure react-ga. For example, you might create a file called ga.js in the root of your project with the following code:

1
2
3
4
5
6
7

import ReactGA from 'react-ga';

ReactGA.initialize('YOUR_TRACKING_ID');

export default (page) => {
  ReactGA.pageview(page);
};

1. In the pages/_app.js file, import the ga.js file and call the function that it exports on each page change. This will send a pageview event to Google Analytics every time the user navigates to a new page in your application:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

import App from 'next/app';
import React from 'react';
import * as gtag from '../ga';

class MyApp extends App {
  componentDidMount() {
    gtag.pageview(window.location.pathname);
  }

  componentDidUpdate() {
    gtag.pageview(window.location.pathname);
  }

  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

export default MyApp;

That's it! You should now be able to see pageviews and other analytics data for your Next.js application in your Google Analytics account.

@rusty.rosenbaum 

Note: As of October 2021, ReactGA is no longer maintained and is considered outdated. Instead, you can use the @next/plugin-google-analytics package provided by Next.js for easier integration.

To add Google Analytics to a Next.js application using the @next/plugin-google-analytics, you can follow these steps:

1. Sign up for a Google Analytics account and create a new property for your Next.js application. This will give you a tracking ID that you will use to set up tracking in your application.
2. Install the @next/plugin-google-analytics package using npm:

1

npm install @next/plugin-google-analytics

1. In your Next.js application, create a file called next.config.js in the root of your project if it doesn't exist already.
2. Inside next.config.js, import the withGoogleAnalytics function from @next/plugin-google-analytics and pass your tracking ID as a parameter:

1
2
3
4
5
6
7

const withGoogleAnalytics = require('@next/plugin-google-analytics');

module.exports = withGoogleAnalytics({
  analytics: {
    id: 'YOUR_TRACKING_ID', // Replace with your own tracking ID
  },
});

1. Save the file and restart your Next.js development server if it was running.
2. That's it! Next.js will now add the necessary Google Analytics script to your application automatically. Pageview events will be sent to Google Analytics for each page change.

You can now go to your Google Analytics account to view analytics data for your Next.js application.