How To Add Google Analytics To Next Js

If you’re using Next.js for your website, you’re probably searching for a method to incorporate Google Analytics. This is an essential tool for website owners and developers, as it aids in comprehending site traffic, visitor actions, and other important metrics. In this article, we will present a detailed tutorial on how to integrate Google Analytics into your Next.js application.

Introduction to Google Analytics

Google Analytics is a free tool offered by Google that provides detailed statistics of a website’s traffic, traffic sources, and measures conversions and sales. It’s the most widely used website statistics service.

Google Analytics and Next.js

Next.js is a minimalist framework for server-rendered React applications. It’s a great tool to build any web application. Google Analytics is not incorporated by default in Next.js. So, we need to configure it in our Next.js application.

Step 1: Create a Google Analytics Account

The first step is to create a Google Analytics account. If you already have one, you can skip this step. To create a new one, go to the Google Analytics website and follow the instructions.

Step 2: Get Your Tracking ID

Once your account is set up, you need to get your Tracking ID from Google Analytics. Navigate to the Admin tab in Google Analytics, then choose the property for which you wish to get the ID. Under Property, click Tracking Info > Tracking Code to access your tracking ID. This ID generally follows the format UA-XXXXXXXXX-X.

Step 3: Create a Google Analytics File in Next.js

Now that you have your tracking ID, the next step is to add it to your Next.js application. We can do this by creating a new file (let’s call it analytics.js), where we\’ll define our Google Analytics logic.

Here’s what the file will look like:

        import ReactGA from 'react-ga';

        export const initGA = () => {  
            ReactGA.initialize('UA-XXXXXXXXX-X');
        }

        export const logPageView = () => {  
            ReactGA.set({ page: window.location.pathname });
            ReactGA.pageview(window.location.pathname);
        }
    

Note: Make sure to replace ‘UA-XXXXXXXXX-X’ with your actual Tracking ID.

Step 4: Initialize and Use Google Analytics

With the Google Analytics file in place, we now need to initialize it and call the logPageView function every time the route changes. We can do this in our _app.js file like this:

        import App from 'next/app';
        import Router from 'next/router';
        import { initGA, logPageView } from './analytics';

        export default class MyApp extends App {
            componentDidMount () {
                initGA();
                logPageView();
                Router.events.on('routeChangeComplete', logPageView);
            }
        }
    

The above code initializes Google Analytics when the component mounts for the first time, and then logs the page view each time the route changes.

Conclusion

And there you have it! You’ve successfully added Google Analytics to your Next.js application. Now you can start tracking your website’s traffic and gaining valuable insights from your visitors. Happy tracking!