DEV Community

Cover image for Add Google Analytics to Next.Js 13.4 app dir
Collins Ruto
Collins Ruto

Posted on • Edited on • Originally published at collinsruto.vercel.app

Add Google Analytics to Next.Js 13.4 app dir

Intro

Google Analytics is a powerful web analytics tool that provides valuable insights into your website traffic and monitor user behavior. Integrating Google Analytics into your Next.js application allows you to track and analyze user interactions, measure marketing campaign effectiveness, and make data-driven decisions. We will explore the steps to set up Google Analytics (gtag.js) in a Next.js application.

Google analytics account setup

  • First, visit the Google Analytics Website and sign up using your google account.
  • Start the Account setup then create a new property for your Next.js application and provide the details asked. After completing the setup, you will be taken to a new platform page for your account.

  • Select the platform for your project, in this case that will be web.

Image of choose platform page

  • Enter the website url of where you next app is hosted and give a prefered name. Click on create stream to continue.

website url and name page

  • Once the property stream created, you will be taken to a page similar to the one below. Note down the Property ID. It should be in the format G-XXXXXXXXX.

Property ID page

Initialize Next.js project

Setup your Next.Js project as per https://nextjs.org/ specifications.

This should work just fine:

npx create-next-app@latest your-next-app
Enter fullscreen mode Exit fullscreen mode

Environment variables

In the root directory of your project, you should have an environment .env.local file. If that is not the case, you can create a file by the same name. Add your property ID that we copied earlier here.

NEXT_PUBLIC_GOOGLE_ANALYTICS= 'G-XXXXXXXX'
Enter fullscreen mode Exit fullscreen mode

Create a google analytics Component

Create a components folder or any folder of your choice outside of the app directory and within your project directory, preferably within the src directory. In the components folder create a GoogleAnalytics.tsx file.
In the file copy the code below and save it.

import Script from "next/script";

const GoogleAnalytics = ({ ga_id }: { ga_id: string }) => (
  <>
    <Script
      async
      src={`https://www.googletagmanager.com/gtag/js? 
      id=${ga_id}`}
    ></Script>
    <Script
      id="google-analytics"
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '${ga_id}');
        `,
      }}
    ></Script>
  </>
);
export default GoogleAnalytics;

Enter fullscreen mode Exit fullscreen mode

Render the component in the Layout file

In the root layout.tsx file in the app directory, import your GoogleAnalytics component like so:

import GoogleAnalytics from "~/components/GoogleAnalytics";
Enter fullscreen mode Exit fullscreen mode

You can then modify your code to match the format below.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
      <html lang="en">
        <body>
          {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS && (
            <GoogleAnalytics ga_id= 
            {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
          )}
          // ... your other code content here.
        </body>
      </html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Run your app

On your terminal, run the following to start your app.

npm run dev
Enter fullscreen mode Exit fullscreen mode

On the browser, navigate to your next app live url, most likely it will be http://localhost:3000
Open the browser console.
On the console, type datalayer. If you see an output similar to the one below then, Yaay 🎉 you did it!

image of output for typing datalayer

Host your app

If you are planning to host your site, be sure to add your property in your hosting service project settings. You should find the environment variables settings and add you ID with the same keyname as used in the project .env.local file.

You can now go to the analytics dashboard and click on the live button, where you will see the information about the application in real-time!

For any follow up or questions, reach out through any of the following:
My Personal website, My Blogs, Twitter, Github or linkedin

Sample github project:
https://github.com/collins-ruto/learnhq

Top comments (10)

Collapse
 
ririchi2 profile image
Richi Pineda

Thanks, I followed every bit and it worked!

I have a question though the analytics dashboard is not receiving anything, and dataLayer is working as intended, even updating when i change pages :(

Do you know why?

Collapse
 
collinsruto profile image
Collins Ruto • Edited

Hello, sorry for the late reply.
Did you manage to get the analytics data showing on your dashboard.
It usually takes a couple of hours and site visits for the data to show.
24 hrs max on many projects that I've used it.

Collapse
 
chintanbawa profile image
Chintan Bawa

Thanks for this awesome article. I have one suggestion, We can write this code

{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
 <GoogleAnalytics ga_id= {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
) : null}
Enter fullscreen mode Exit fullscreen mode

to a cleaner way like this

{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS && (
 <GoogleAnalytics ga_id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
)}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
collinsruto profile image
Collins Ruto • Edited

Updated,
thank you for the improvement.

Collapse
 
triplen542 profile image
Nathan_Nyawaya

Thanks, I followed the steps and its working fine. had issues with the "Script"

Collapse
 
collinsruto profile image
Collins Ruto

Awesome work 👍.
Were you able to resolve the script issue ?

Collapse
 
triplen542 profile image
Nathan_Nyawaya

Yeah

Collapse
 
zougari47 profile image
Ahmed Zougari

Good job,
One thing to add is for env variables we don't need the quote. It should be like this:

NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXX
Enter fullscreen mode Exit fullscreen mode
Collapse
 
peev profile image
Peev

Thanks for this tidy, accurate, well-organized article!

Collapse
 
ferrjohnpainagan profile image
ferrjohnpainagan

how to send events?