How to add GoogleAnalytics 4 to NextJs app in 4 simple steps
By: Mike Gajdos
Tags: Google Analytics, Nextjs, Google Analytics Tips, Front End Development, React

A Beginner 4-step easy guide how to add GoogleAnalytics4 into NextJs app.

Photo by Lukas Blazek on Unsplash

Data. You hear it everywhere. Data this …Data that … . Some people believe there is a `Dataism` religion with with a huge following. However, Data by itself means nothing unless you gain insights from it and adapt and improve accordingly.

How to gain those insights? You need tools to help you to go through large amount of data( there are tons out there). GoogleAnalytics is one of them and it is free 🙌.

When you create any site(be it a blog( like in my case)) , you would like to know who visited your site, which page has the most views etc , GoogleAnalytics has a simple interface to see those insights in detail.

Let’s jump into it.

Step 1 : Creating a Google Analytics Property

The absolute first thing we’ll need to do for those starting from scratch is to create a Google Analytics Property.

To do that, you’ll first need to go to Google Analytics and sign in with your Google Account.

Google Analytics needs Property set up for which it will generate a tracking code .That code is what we need to inject into our projects so GA can track it. Let’s get that code .

Before creating a Property, you’ll need to create an account WITHIN Google Analytics. You may have few sites you monitor. Hence this extra account WITHIN GA(GoogleAnalytics).Image will go HERE

Put in domain name for better organisation.

The next step will allow you to create a property within your newly created Google Analytics account:

My preferred choice of name is the domain( so it can be linked to some other service Google provides) but you can the property whatever you want.

Now we are almost there at getting our tracking Id ( or how GoogleAnalytics names it Measurement ID). If you followed the steps you should see this :

To get data GA needs to know what type of data stream it needs to monitor. In our case it will be Web Stream.

In nest window enter your site’s url and give the stream a name for reference. After doing that we are at the finish line. Click on Tagging Instruction and Add-on new on Page tag.

There we have it. In the top right corner you can see Tracking Code( or as per GA Measurement ID). Leave it open and let’s jump into next step.

SideNote : We are dealing with Google Analytics 4 which is new updated version of Universal Analytics. GA4 will generate tracking code with G-xxx where UA will generate tracking code prepended UA-xxx. We ran them in parallel. Some features from UA are not yet available in GA4.

Please check the official documentation here

Step 2 : Setup your Nextjs project

Let’s assume you have done it already. You can check out my github repo for the full implementation.

We are going to use new NextJS feature `Script Component`. For it to work you will need NextJs version 11.

Step 3 : Inject Google Analytics tracking code into your Nextjs application

Now that we have our Measurement ID (tracking Code), you need to inject and configure Google Analytics’ Global site tag (aka gtag) into your browser window as per instruction from GoogleAnalytics.

Previously, you needed to define script tags inside the Head of your Next.js page or create custom _document.js .

Now, you use next/script in the body of your Next.js page. It has client-side functionality that decides when and how to load the remote script based on the strategy.

Next.js documentation explains it :

The Next.js Script component enables developers to set the loading priority of third-party scripts to save developer time and improve loading performance. Websites often need third parties for things like analytics, ads, customer support widgets, and consent management. However, these scripts tend to be heavy on loading performance and can drag down the user experience. Developers often struggle to decide where to place them in an application for optimal loading. With next/script , you can define the strategy property and Next.js will optimise loading for the script: beforeInteractive : For critical scripts that need to be fetched and executed before the page is interactive, such as bot detection and consent management. These scripts are injected into the initial HTML from the server and run before self-bundled JavaScript is executed. afterInteractive (default): For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration. lazyOnload For scripts that can wait to load during idle time, such as chat support and social media widgets.

Let’s navigate to our _app.js file import Script component at the top

import Script from 'next/script'

When we go back to Google Analytics window we left open , there are some instruction what to inject into our code . Modify input as below

Fist sub step done. BUT , there is a big BUT because we are using NextJS which generates SPA(Single page application) . NextJs is a React framework after all. What that means is that all content gets loaded at the beginning and any subsequent requests or route changes get intercepted ( As per standard React). It implements client side navigation.

SideNote — — The assumption earlier about content being loaded on initial load will not apply if you may have set up `getServersSideProps` on some pages however, this blog post is for statically generated page via NextJs s.

Google Analytics wasn’t originally designed for that. Even though these days has something like Enhance Measurements for Web streams. However , it is still a bit unreliable. So when page loads, GA will track that view but it will not track change of the routes. We need to give GA a help.

To do so, I suggest you create a lib folder where you will put all your code related to third-party libraries and another folder inside called ga for Google Analytics.

Inside your lib folder, create an gtag.js file with two functions: one to log page views and the other events.( the second helper function is for advance usage such tracking the clicks on certain button etc)

To get more organised and for future ease create env.local and put your Measurement Id( Tracking code there). It helps with deployment. If you need more info on Environment variables please check an amazing NextJs docs

This is out gtag.js file:

Both helper function will help us track navigation and page views in our app.

Navigate to your _app.js and mirror the code as per below

As you can see from the code above , we are using built in router and taking advantage of useEffect to track page changes. This way collision between GoogleAnalytics and SPA(SinglePageApplication) is resolved and we can safely track page changes.

Step 4 : Testing and Debugging

Let’s get the app going

npm run dev

Navigate through your app and do some clicking 😆

It takes between 24–48 hrs for data to show up in Google Analytics. However, you can check if your tag is working by looking at the Realtime view. Go to your GA account for the site click Reports and then Real-time( sometimes it needs refreshing ). If you are connected you should see something like this:

Image will go here

Alternative for testing the connection is opening up the devTools and go to console tab.

Type dataLayer into the console press Enter to see the events that have been sent by the analytics tag

If you don’t see any data in Realtime, another way to test your Google Analytics tag is with the Chrome extension Google Analytics Debugger.

Once installed and turned on, it prints Google Analytics messages to your console making it easy to see what happens behind the scene.

OK folks that’s . I hope this was helpful especially traversing the pitfalls of SPAs with GoogleAnalytics.If you have any suggestion or any feedback do not hesitate leave a comment below.

If you like my content I’m active on Twitter @gajdos81. I tweet about web development, no-code, and low-code hacks to make developer’s life easy.