Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.

Adding Google Analytics to your next project is simple yet a little confusing. So in this blog, we will understand how to add Google Analytics to your next project with a simple and straightforward guide.

Firstly, we need to install a third-party library by using the command npm install @next/third-parties which is officially recommended by next.

Load Google Analytics for all routes:

To load Google Analytics for all routes add the component directly in your root layout.js.

Import { GoogleAnalytics } from ‘@next/third-parties/google’ and then use the component <GoogleAnalytics gaId=”G-XYZ” />, replacing G-XYZ with your actual Google Analytics tag ID.

After adding all this, the code will look something like this.


import styles from "./page.module.css";
import { GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({ children }) {
    return (
      <html lang="en">
        <head> 
        </head> 
        <body className={styles.mainBody}>{children}</body>
        <GoogleAnalytics gaId="G-2VYFG39F" /> 
      </html>
    );
);

Load Google Analytics for single routes:

For single route you need to follow same process but need to repeat for each file.

Import GoogleAnalytics and then add that inside our function just like previous approach but difference is that you need repeat same thing for different files and also need to change gaId for each of them.


import styles from "./page.module.css";
import { GoogleAnalytics } from '@next/third-parties/google';

export default function Home() {
    return (
      <>
        <GoogleAnalytics gaId="G-2VYFG39F" />
        <div>Your content</div>
      </>
    );
);

That’s how we can added google analytics for single route and for all routes. Hope you find this article useful and thank you for reading.

A Simple Guide for Using Google Analytics with Next.js