How To Add Google Analytics on Next.js 15 App

by

Hi everyone, in this article I will show you step by step how to add and implement Google Analytics on your Next.js application.

If you don’t know before, Google Analytics is a platform that collects data from your website and apps.

For example, you wanna track performance of a website and information about your visitors.

Google Analytics data can help you to make better business decision using data. Great!

Then, have you ever wondered that how add google analytics for Next.js?

I believe that is very easy.

If you don’t know before, Next.js is powerful React framework to build an app.

Let’s try step by step how to add google analytics on Next.js application.

Step 1: Get Analytics Tag ID

Tag ID is need for setup Google Analytics property for your website.

A Google Tag ID is a series of letters and numbers that usually start with G–

You can get tag ID from Google Analytics be like:

‘G-XXXXXXXXXX’

If you wondering, how to get Analytics ID? You can check this following article here.

At the moment, I assume that you have Google Analytics Tag ID.

Step 2: Init Project or Add Into Existing

This step you can try from init new project or implement to existing project.

Make sure you have installed Node.js in your machine.

For initialize your Next project you can use this command:

npx create-next-app@latest

However in this article, I wanna use Next.js app router.

By the way, If you want add google analytics for your existing project you can skip this step.

Step 3: Install Packages

In this step, you will add @next/third-parties packages in your project for implement Google Analytics.

This following command to add this new package. 

npm i @next/third-parties

Feel free to use another package manager like yarn or anothers.

Step 4: Add Tag Into Code

In this step, we will focus into some file in Next.js like environment variable file and layout.tsx file.

4.1. Put Google Tag ID into .env file

You should put google analytics tag ID into .env file with prefix NEXT_PUBLIC_` in this file.

For example, 

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

In this article, I will use variable name NEXT_PUBLIC_GA_ID. Feel free to use another name like NEXT_PUBLIC_ANALYTICS_ID, or etc.

4.2. Import Google Analytics Component from @next/third-parties

In this step, I will focus to add Google Analytics component into layout.tsx file in Next.js app below.

(File: layout.tsx)

import type { Metadata } from "next";
...
import { GoogleAnalytics } from "@next/third-parties/google";
...

export const metadata: Metadata = {
...
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID as string} />
      <body>
        ...
        {children}
      </body>
    </html>
  );
}

I think it is very simple how to add Google Analytics in Next.js app.

Import Google Analytics from @next/third-parties and use it into code is very useful for this condition to tracking your website using GA (line 3).

Just add prop gaId into Google Analytics (line 17).

Maybe you wonder how to check implementation of this that working? You can check by view source from your browser.

If you found some code with https://www.googletagmanager.com/gtag/js?id=G-XXXX` . It’s working!

# Conclusion

Finally, you can complete step by step how to add Google Analytics on next.js application.

With @next/third-parties you can easily to achieve that.

I wish you can try and implement google analytics on your project that you wanna build in the future.

If any comment/some opinion about this post, you encourage to put on this comment section below.

Thank you very much and happy coding!

Leave a Comment