Add Google Analytics to your Next.js site or web app
Google Analytics makes it quick and easy to start tracking web traffic on your Next.js site or web app. First, log into your Google Analytics account and create a new property for the Next.js site or web app that you want to add analytics to. Copy the Measurement ID of the Web Data Stream.
Environment variable
Add the Google Analytics Measurement ID as an environment variable to your Next.js project, either in a .env
file or a .env.production
file, depending on what you're using for your project. Make sure to also add it as an environment variable wherever your site or web app is being deployed.
NEXT_PUBLIC_GOOGLE_ANALYTICS=G-...
Tracking page views
Google Analytics will not report virtual page changes that do not require a full page load in Next.js. To fix this, we'll create a pageview
helper method. It will report a new page view to Google Analytics. We'll call this method whenever there is a change in page.
export const pageview = (id: string, url: string) => {
;(window as any).gtag("config", id, {
page_path: url,
})
}
Google Analytics component
Next, let's create a Google Analytics component to store the gtag.js
code that is provided to us by Google Analytics.
"use client"
import { useEffect } from "react"
import { usePathname, useSearchParams } from "next/navigation"
import Script from "next/script"
import { pageview } from "@/lib/gtag"
const GoogleAnalytics = ({ id }: { id?: string }) => {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
if (id) {
const url = pathname + searchParams.toString()
pageview(id, url)
}
}, [pathname, searchParams, id])
if (!id) {
return null
}
return (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${id}`}
/>
<Script
id="google-analytics"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${id}', {
page_path: window.location.pathname,
});
`,
}}
/>
</>
)
}
export default GoogleAnalytics
This component receives the Google Analytics Measurement ID as a prop. We specified use client
at the top of the file in order to ensure that it will run on the client rather than on the server. We then used Next.js Script
tag to implement the scripts that Google Analytics provides us with.
We used the React useEffect
Hook to listen to changes on both the pathname
and searchParams
of the URL. Whenever either of these change, we call the pageview
helper method that we created earlier, passing to it the Measurement ID and the current URL.
Using the Google Analytics component
Next, let's import our new GoogleAnalytics
component into our root layout component, app/layout.tsx.
import { Metadata } from 'next';
import '@/styles/globals.css';
import GoogleAnalytics from './google-analytics';
interface RootLayoutProps {
children: React.ReactNode
}
export const metadata: Metadata = {
//...
};
export default async function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<GoogleAnalytics id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
</head>
<body className='min-h-screen bg-background font-sans antialiased'>
{children}
</body>
</html>
);
}
Conclusion
Your Next.js site or web app is now ready to track and report web traffic, thanks to Google Analytics.
As a reminder, be sure to set NEXT_PUBLIC_GOOGLE_ANALYTICS
to the Measurement ID that was generated for the new Google Analytics property for your Next.js site or web app.