DEV Community

Cover image for Add google analytics to your Next.js app ✨
Avneesh Agarwal
Avneesh Agarwal

Posted on • Originally published at blog.avneesh.tech

Add google analytics to your Next.js app ✨

Wassup everyone, let's see how to add google analytics to your Next.js site. Google Analytics will help you to see the performance of each page, how well the site is doing in countries, different devices, etc.

Setup Google Analytics

Go to Google Analytics and click on admin in the sidebar.

image.png

After clicking on admin you will see a screen similar to this-

image.png

Click on "Create Property", now fill in the form with your details.

image.png

You also need to give basic business details.

After you click submit your property will be created! You will see this screen and as we are using Next.js, select web-

image.png

Fill in your website URL and title-

image.png

Click on add on Add new on-page inside Tagging instructions-

image.png

Copy the ID that you see and copy it as we are going to need it!

Using Google Analytics in Next.js app

Go inside pages/_app.tsx and these two Next.js Scripts-

  <Script
    strategy="lazyOnload"
    src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
  />

  <Script id="google-analytics" strategy="lazyOnload">
    {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
                `}
  </Script>
Enter fullscreen mode Exit fullscreen mode

This is going to load google analytics via this script. As you can see we are using env variables for the google-analytics tag, so if you don't already have a .env.local file create one and add the following-

NEXT_PUBLIC_GOOGLE_ANALYTICS=YOUR_GOOGLE_ANALYTICS_ID
Enter fullscreen mode Exit fullscreen mode

Paste in the ID that we copied in the last step! Since we are changing the env variables you need to restart the server too.

As we are using the Next.js script we also need to import it-

import Script from "next/script";
Enter fullscreen mode Exit fullscreen mode

Open your localhost app in one tab and google analytics in another. If you click on Real-time inside of Reports you will see that you have 1 user!

image.png

Conclusion

Adding google analytics to your Next.js app was this easy! Hope you found it useful and insightful. See ya next time ✌️

Useful links

Google Analytics

Next.js

Connect with me

Discussion (6)

Collapse
murdercode profile image
Stefano Novelli

When you say:
“As you can see we are using env variables for the google-analytics tag because it must remain a secret 🤫”
Is not correct. You can use env for make the script “domain-agnostic” or whatever else, but there’s not any secret to print a prefixed NEXT_PUBLIC variable.

Collapse
avneesh0612 profile image
Avneesh Agarwal Author

Oh okay, what do you mean by domain agnostic?

Collapse
murdercode profile image
Stefano Novelli

If you have two o more domains (like a staging portal, or another website which is based to your actual project) you can fill the .env with your actual domain; an agnostic approach to a domain which will host your software.

Regarding to .env content instead, you can expose them – and your code do it – to public. This is necessary for Google Analytics and your guests to init the correct Analytics property.

More info here: nextjs.org/docs/basic-features/env...

Thread Thread
avneesh0612 profile image
Avneesh Agarwal Author

Oh I see, but still it would be better to use env, right?

Thread Thread
murdercode profile image
Stefano Novelli

Sure :)

Thread Thread
avneesh0612 profile image
Avneesh Agarwal Author

Cool, also removed that secret part from blog thanks :P