Today, we'll be learning how to add Google Analytics to your Next.js website or web app. The process of adding Google Analytics to Next.js is slightly different compared to others like basic HTML or WordPress. In Next.js, you'll need to install a third-party plugin to use Google Analytics. I'll show you a simple process of how to use a third-party plugin in Next.js to add Google Analytics.
Create Blank Next JS Project
To get started, you'll need a blank Next.js project. You can create a blank Next.js project, and inside it, we'll add a third-party plugin for Google Analytics.
Install @next/third-parties Plugin
To install the third-party plugin, open the terminal, and paste the command to install the library in your Next.js project folder.
npm install @next/third-parties@latest next@latest
Import & Add Google Analytics
After installing the plugin, go to your layout.js file, which is the root layout of your entire website or web application. Import your Google Analytics component at the top of the file, and inside it, pass your Google Analytics ID. You can get this ID from your Google Analytics dashboard, where you'll find the measurement ID.
import { GoogleAnalytics } from '@next/third-parties/google'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="G-XYZ" />
</html>
)
}
Copy this ID and paste it into your component. Save the file, and now you're ready to use Google Analytics on your website. You can run the "npm run dev" command to open the website in localhost.
npm run dev
We'll go back to the dashboard to check if everything is working. If Google Analytics has been successfully added, you'll be able to see real-time data on the dashboard. You can also collect additional events in Google Analytics by scrolling down to the events section.
Create Custom Events
To create your own custom events in Google Analytics, you'll need to make sure your page.js file is a client-side page, as Google Analytics events are client-side events in Next.js. You can do this by using use client in Next.js, which tells the server to execute the script on the client side instead of the server side.
'use client'
Import sendGAEvent into your page.js file and create a dummy button to capture the events. Inside this button, use an onclick function to add your Google Analytics event to capture a button click. You can use sendGAEvent and name it button click to register the event and send it to the Google server.
'use client'
import { sendGAEvent } from '@next/third-parties/google'
export function EventButton() {
return (
<div>
<button
onClick={() => sendGAEvent('event', 'buttonClicked', { value: 'xyz' })}
>
Send Event
</button>
</div>
)
}
After adding the event, you can refresh the page, click the button, and then go back to your event page. You'll be able to see that your button click event is registered in the Google Analytics dashboard.
Adding Google Analytics to your Next.js website is a simple process. Install a third-party plugin from the Next.js documentation website, pass your Google Analytics ID to that plugin, and capture events using the sendGAEvent function while measuring it on your dashboard. That's it for today! If you found this helpful, consider subscribing to my channel. Have a great day!
