Hey devs, this guide will help you set up Google Analytics 4 on your Next.js website. I did this to learn more about the demographics of people who visit my personal site. With an analytics solution, you can measure your online traffic and optimize your site to improve it. I'm a big fan of and that's why I hosted my site with them. But, their analytics solution is targeted toward commercial users. The best alternative I've found is Google Analytics. Google Analytics gives individuals a ton of metrics for free. Vercel Some steps are needed to set up Google Analytics with Next.js Most people don't do the extra steps needed to set up an analytics solution. Here are some reasons that can intimidate developers: Most documentation is not Next.js specific. Google Analytics can be set in many places, not only on websites. There is no official documentation about how to add it to a site that already exists. I'm going to show you how to overcome these issues and have a complete solution in a few easy steps. I was able to set up Google Analytics on my site in minutes. Step 1: Set up a Google Analytics account Your first step is to set up an Analytics account. If you already have one, skip to " " unless you want to create a separate account for this website. Create a Google Analytics 4 property In , in the column, click . Admin Account Create Account Provide an account name. Configure the to control which data you share with Google. data-sharing settings Click to add the first property to the account. Next Step 2: Create a Google Analytics 4 property A property is a set of Google Analytics reports and data for your website and/or app. Enter a name for the property (e.g. "My Business, Inc website") and select the reporting time zone and currency. Then follow the steps to complete the industry category and business size and hit "Create". Step 3: Add a Data Stream Click to add a new data stream for your website. Web Enter the URL of your primary website, e.g., "example.com", and a Stream name, e.g. "Example, Inc. (web stream)". You have the option to enable or disable . Enhanced measurement automatically collects page views and other events. enhanced measurement Step 4: Find your "G-" ID Follow these instructions to find your "G-" ID. This ID will connect your website with your google analytics account. Save it somewhere to be used later as a secret ENV variable. Click . Admin In the column, check that you have your new Google Analytics 4 property selected, then click , then . Click the data stream. Your "G-" ID appears at the upper right. Property Data Streams Web Step 5: Use Google Analytics on the Next.js site Next.js makes this really easy by allowing you to create a custom _ to inject tracking snippets to every page to track page views and . app events Starting from Next.js 11 we have available the . This is an extension of the HTML element. It allows developers to set the loading priority of third-party scripts anywhere in their application, outside , saving developer time while improving loading performance. Next.js Script component <script> next/head By using the in the components the website performance is not impacted by Google Analytics. strategy="afterInteractive" Script Here is an that explains it. official Next.js example For a new site You can simply create a new site by using the Next.js example on the following link " ". Example app with analytics Simply execute the following command npx create-next-app --example with-google-analytics with-google-analytics-app For an existent site Modify the or file to use and the scripts like it's shown on the following file. _app.js next/router gtag.js import { useEffect } from 'react'
import Script from 'next/script'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

const App = ({ Component, pageProps }) => {
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    router.events.on('hashChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
      router.events.off('hashChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <>
      {/* Global Site Tag (gtag.js) - Google Analytics */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gtag.GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

export default App Create a new file called to encapsulate the code that uses the property. This is what the new file should look like lib/gtag.js gtag export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
} Step 6: Set the "G-" ID in the ENV variable Finally, this step will connect the google analytics account with your site. As with any ENV variable, there are two places where you need to set up this ENV variable. Let's go through each of them. In your development environment Let's create the ENV variable in our development environment. NEXT_PUBLIC_GA_ID First, create a file named with the following content on the root repository of your site. .env NEXT_PUBLIC_GA_ID=123 Then, set your "G-" ID in the file. It should replace the value assigned to (The placeholder value is ). .env NEXT_PUBLIC_GA_IG 123 At this point, you should be able to run your application locally and Analytics page visits on the real-time view of the Google Analytics property panel. On your website host My site is hosted for free on Vercel. To set up the variable there I followed . NEXT_PUBLIC_GA_IG this guide Step 7: Changes needed for Typescript (optional) If your site uses Typescript you might run into the following error Property does not exist on type 'window & typeof globalthis' The easiest way to solve this is to create a new global type for with the missing properties. Window Add the following interface to the file in your project. If you don't have that file, just create one. global.d.ts interface Window {
  gtag: (...args: any[]) => void
  dataLayer: Record<string, any>
} Don't forget to add the file containing the snippet to your list of project files Typescript compilation. The file path should be set in the section of . include tsconfig.json Find out more about if needed. tsconfig Include Kudos to Emanuel Gautier for creating that showed me the solution to this issue. this article Conclusion Analytics is a critical tool for any website and it's not hard to set up. Next.js makes it even easier and Google Analytics is a great free tool to understand a website's traffic. My website non track the visits to every page by time and region. I can get detailed reports about the site's audience and even a "Real-time" view. At the same time, I can use this setup to learn more about the "Web analytics" field with the latest technology. Google Analytics 4 I hope this was helpful for you as well! Also published . here

Google

Check out my blog

Too Long; Didn't Read

Make resilience your competitive advantage

7 Easy Steps to Set Up Google Analytics on Your Next.JS Website

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps