We will connect our Google Analytics API with the Next Js /app-based routing project. After a successful connection, you can receive real-time website users and their locations. This data is more helpful in understanding your website user's traffic, what pages your website users like, and many more. So let's connect Google Analytics GA-4 with our Next Js App-Based Routing site.

Create Google Analytics Account / Property of GA-4

After Sign-up to Google Analytics with our Google account, it redirects us to this page, where we have to click on start measuring

Google Analytics Create Account Boarding Screen

After clicking start measuring we will the page Create Account, it's something like we have an account with many GA-4 properties. Here you can provide the name of your account, Currently, I am saying it is Meer(me) - Test but you can name it any you want. After that simply continue

Google Analytics GA-4 create account page

After the creation of an account, it redirects to the create property page, the property is kind of directly linked to our website, so one account has many websites and yes that's why one account can have many properties. so each website has its property. Here you have to provide the name of your property and your report time-zone and currency type. Here I have provided the name Next-site so that you have to provide the property name according to you. After the input property name reporting zone and currency just click Next

Google Analytics - GA-4 create property page

Now you are on the Business Details page.

Simply provide your business details, its category and its size. After that simply click on Next

Google Analytics - GA-4 Business Details page

After Business details provide the business objective. If you want details about your site and how your visitors feel while using your website and a report related to that then simply select the first 4 items else if you only want an analytics report it's helpful to you to know about your traffic then select the baseline report (last option). After selecting click on Create

Google Analytics - GA-4 Target leads Page

Now click on Web and it will open side canvas.

Google Analytics - GA-4 Target platform page

Here we have provided our Website name and Stream name, I have provided my www.meermustan.com as the site name and Portfolio site as the stream name. After that click on Create and continue

Google Analytics - GA-4 Connect Site Page

That's it! We have created our tracking GA-4 measuring ID 🥳. Just click on Next

Google Analytics - GA-4 Page After connecting a site

When you click on Next it opens this canvas, here we just have to copy the ID of the Google Tag Manager. I have highlighted which text you have to copy.

Add Script in Next Js Project

In our Next Js Project, we have to make only changes in the app/layout.js or app/layout.ts

First Import the Script from the next/script on top:

import Script from "next/script";

After that, you have to paste this code in between the html tag and change the ID (G-WYTFXXXXXX) with your measuring ID:

<Script async src="https://www.googletagmanager.com/gtag/js?id=G-WYTFXXXXXX"></Script>
<Script id='google-analytics'>
  {
    `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-WYTFXXXXXX', {
        page_path: window.location.pathname,
      });
    `
  }
</Script>

So after a change, the page looks like this:

After that run your development server visit the console of your project and type gtag if the function is defined then we have successfully added our Gtag to our project.

Now just run your development server and refresh the page 4-5 times, after visiting the page of your Google Analytics GA-4 it will show the currently active user which means it is collecting the data, Hurray!!🥳🎉

If your Google Analytics Page is still not receiving any data, then make sure these things:

Don't forget to add ID in the Script tag: Make sure you have added the attribute to the Script tag id='google-analytics' :

<Script async src="https://www.googletagmanager.com/gtag/js?id=G-WYTFXXXXXX"></Script>
<Script id='google-analytics'>
  {
    `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-WYTFXXXXXX', {
        page_path: window.location.pathname,
      });
    `
  }
</Script>

And yes also don't forget to replace Script ID with your measuring ID, That's it!

Related Stuff:

Next Js Github Link: Github-Connect-GA-NextJs

Hope that the article is helpful to you don't forget to bookmark the website and share this article with your friends. Thanks

If you still have any confusion feel free to contact me!