How to Setup Google Analytics in Next.js
- Md. Saad
- June 30, 2024
Google Analytics is a web analytics service that tracks and reports website traffic, providing insights into user behaviour, traffic sources, and engagement. It helps businesses optimise their digital marketing strategies and improve website performance.
Why Google Analytics?
In today’s world, data is more important than any other thing. So, learning how users interact with our website is essential to taking the business to another level. In this case, Google Analytics is the pioneer. It provides valuable insights for optimizing marketing strategies, enhancing the user experience, and making data-driven decisions, ultimately helping businesses grow and improve their online presence. Moreover, it is free to use.
In this article, we will learn how to add Google Analytics to a Next.js application.
Step-1: Create Google Analytics Account
First and Foremost, create a Google Analytics account. If you create an account for the first time, you will see the following image, where you will be asked to start measuring.
After starting to measure, you have to fill up some form. Fill up all the forms with the necessary pieces of information. After successfully submitting all the data, you will be redirected to the homepage.
Now, create a property from the admin section.
Now fill in all the information. In the last step select web as we will Google Analytics for a website.
Then you will have to provide some details about your website.
Now you will have to grab the Measurement ID which is the most important thing in the whole process.
It will look something like the following G-XXXXXXXXXX. Copy that.
Step-2: Create a Next.js project
Now create a Next.js project. Use the following command to create a Next.js app.
npx create-next-app@latest app-name
As it is not an article on creating the next.js app, we will not discuss it in detail. If you want to read it in detail, follow the link.
Step-3: Store the GAID
Create a .env file at the root of the project. We will store our GAID here so that it remains publicly hidden. Now add the following codes in the .env file:
NEXT_PUBLIC_MEASUREMENT_ID=G-XXXXXXXXXX
Step-4: Install Packages
At this moment, we will Install the "@next/third-parties@latest" package for <GoogleAnalytics/> components.
npm install @next/third-parties@latest
Step-5: Load Analytics
We can use Google Analytics for the Next.js app and Page router. Let’s see how to use them.
App Router
If you are using the Next.js App Router, open the layout.jsx file located in the app folder, which is the root of your project.
Then, add the following scripts there:
import {Inter} from "next/font/google";
import "./globals.css";
import {GoogleAnalytics} from "@next/third-parties/google";
const inter = Inter({subsets: ["latin"]});
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({children}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<GoogleAnalytics gaId="${process.env.NEXT_PUBLIC_MEASUREMENT_ID}" />
</html>
);
}Page Router
If you are using the Next.js Page Router, open the pages/_app.js file located in the pages folder. Now add GoogleTagManager like the below:
import "@/styles/globals.css";
import {GoogleTagManager} from "@next/third-parties/google";
export default function App({Component, pageProps}) {
return (
<>
<Component {...pageProps} />;
<GoogleTagManager gtmId="${process.env.NEXT_PUBLIC_MEASUREMENT_ID}" />
</>
);
}
Step-6: Check the Browser
Now run the site to check whether it is working or not. Run the Next.js application using the following command:
npm run dev
Step-7: Check if Analytics is Enabled
Open the console on your browser and type dataLayer there.
If you see "undefined" something went wrong. If you see information similar to the example above, congratulations! Your analytics is activated.
Step-8: Check the Analytics Dashboard
Finally, navigate to the dashboard and click on the live button to view real-time information about your application!
Finally, navigate to the dashboard and click on the live button to view real-time information about your application! That's all for today. I hope you understand how to enable Google Analytics in your Next.js project.
Happy coding!
Need more help adding Google Analytics to the Next.js web application? Contact StaticMania. A dedicated Next.js expert team will guide you on your journey.
