How to Add Google Analytics to a Next.js Website for Accurate Tracking

Integrating Google Analytics into your Next.js website enables you to track visitor behavior, monitor traffic sources, and gather valuable insights to improve your site. Whether you’re a developer or a marketer, setting up Google Analytics correctly is essential for data-driven decision-making. This guide walks you through each step to seamlessly add Google Analytics to your Next.js application, ensuring accurate data collection and easy maintenance.

What You’ll Need

• A Google account (Gmail)
• Access to your Google Analytics account (or ability to create one)
• Your Next.js project set up and running locally
• Basic knowledge of JavaScript and Next.js structure

Step-by-Step

1. Create a Google Analytics Account and Property
   • Go to Google Analytics and sign in with your Google account.
   • Click on “Admin” (gear icon) in the lower-left corner.
   • Under the “Account” column, select “Create Account” if you don’t have one, or choose an existing account.
   • In the “Property” column, click “Create Property,” then enter your website’s name, URL, industry category, and reporting time zone.
   • Complete the setup and agree to the terms of service.
2. Get Your Google Analytics Tracking ID
   • From the Admin panel, under your property, click “Data Streams,” then select “Web.”
   • Click “Add stream” and enter your website URL and name.
   • Once created, you’ll see a “Measurement ID” starting with “G-” for GA4. Copy this ID; you’ll need it for your Next.js setup.
3. Install the Google Analytics Script in Your Next.js Project
   • Navigate to your Next.js project folder.
   • Open or create the _app.js file inside the pages directory.
   • Add the following code snippet inside the _app.js file, replacing YOUR_MEASUREMENT_ID with your actual ID:

   import { useEffect } from 'react';
   import { useRouter } from 'next/router';
   
   function MyApp({ Component, pageProps }) {
     const router = useRouter();
   
     useEffect(() => {
       const handleRouteChange = (url) => {
         window.gtag('config', 'YOUR_MEASUREMENT_ID', {
           page_path: url,
         });
       };
   
       router.events.on('routeChangeComplete', handleRouteChange);
       return () => {
         router.events.off('routeChangeComplete', handleRouteChange);
       };
     }, [router.events]);
   
     return ;
   }
   
   export default MyApp;
   

4. Next, add the Google Analytics script tag to your _document.js file (create one if it doesn’t exist in pages).
5. Open or create pages/_document.js and insert the following code inside the Head component, replacing YOUR_MEASUREMENT_ID:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    
      
        {/* Global Site Tag (gtag.js) - Google Analytics */}