We understand how critical Analytics data is for a company's or website's success. Let's look at how to integrate Google Analytics into a Next.js site.
Here in this article, we will learn:-
We can easily set up a Google Analytics account for our website with the URL below.
https://analytics.google.com/analytics/web/#/a212549130p293139592/admin/account/create
After setting up, we will get a code to paste inside the section of our website.
Just copy the MEASUREMENT ID (G-{Your Code}) from this code.
Inside the pages directory, create a file _document.js and copy the code below. Note that you need to replace the MEASUREMENT ID with yours.
// pages/_document.js import Document, { Html, Head, Main, NextScript } from "next/document"; class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx); return { ...initialProps }; } render() { return ( <Html> <Head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <script async src="https://www.googletagmanager.com/gtag/js?id=G-123456789" ></script> <script dangerouslySetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-123456789', { page_path: window.location.pathname, }); `, }} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument;
This will inject Google Analytics code into our Next.js website.
Now add some code inside our pages/_app.js file to track the events. So that the complete _app.js fie looks the same as below.
// pages/_app.js import { useEffect } from "react"; import "../styles/globals.css"; import { useRouter } from "next/router"; function MyApp({ Component, pageProps }) { const router = useRouter(); useEffect(() => { const handleRouteChange = (url) => { window.gtag("config", "G-123456789", { page_path: url, }); }; router.events.on("routeChangeComplete", handleRouteChange); return () => { router.events.off("routeChangeComplete", handleRouteChange); }; }, [router.events]); return ( <div> <Component {...pageProps} /> </div> ); } export default MyApp;
Now we can see that Google Analytics is tracking the pageviews on our website.
Here we are going to end the quick guide to add Google Analytics to a Next.js website. We injected the Google analytics tracking code, added code to track custom events, and tested.