If you own a website, you should use an analytics tool to measure traffic and observe how visitors interact with it. Google Analytics is a free tool that does just that. It's a powerful tool that can provide you with a wealth of information about the traffic on your website, and it's simple to set up.

So, why should you use Google Analytics? For one thing, it may assist you track your website's traffic and discover where your visitors are coming from. It may also help you measure your conversion rate and analyse how visitors interact with your website. It may also help you debug website bugs and monitor how your site performs in different browsers and devices.

Google Analytics is a powerful tool that can help you track the performance of your website. Overall, Google Analytics is a useful tool for understanding your website's traffic and determining how to enhance it. If you aren't already using it, you should think about incorporating it into your website. In this blog post, we'll see how to integrate Google Analytics into a Next JS website in 5 easy steps.

Before we begin writing code, we should first create a new account and a new property in Google Analytics. Here are the steps.

► Navigate to https://analytics.google.com/ and create an account if you haven't already. ► After you create a new account, you will be led to create a new property. If not, click the cog symbol in the bottom left corner of your screen and select Create New Property. ► Fill in your property name, timezone, and currency, and then click next. ► In the following step, choose your business type and tick the options that you want in your Google Analytics account. I recommend that you go through everything to get the most out of it. Then press the next button. ► You have just added a new property to your account. It is now time to set up a stream.

Creating Data stream and Getting the measurement ID

Click web, then add your website URL and stream name of choice before clicking next. (Note: The URL of the website cannot be localhost:/xxxx.)

Following that, you'll be given tagging information as well as a Measurement ID. If you do not get your Measurement ID, go to Home and click on Get Tagging Instructions to obtain it.

If your NextJS application already has a .env.local file, simply add your Measurement ID to it. If you don't have a .env.local file, create one and add it to .gitignore so that your Measurement ID is not publicly exposed.

NEXT_PUBLIC_GOOGLE_ANALYTICS=X-XXXXXXXXXX

We will now setup Google Analytics in the next js application to send data and information to Google Analytics.

One thing to keep in mind concerning Google Analytics is that it must operate globally in order for us to transmit data from every page. And in order to run it globally, we must write our code in the _app.js file.

import "../styles/globals.css";
import Script from "next/script";

function MyApp({ Component, pageProps }) {
  const router = useRouter();

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

<Script
	id="google-analytics"
	strategy="afterInteractive">
	{`
		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,
	  });
	`}
/>

  return (
      <Component {...pageProps} />
  );
}

export default MyApp;

This snippet loads the gtag.js library, establishes GA_MEASUREMENT_ID as the default Google Analytics property ID, and sends a pageview hit to Google Analytics.

Make sure your give afterInteractive as your Script strategy. It means that it will wait until the entire page is loaded.

It's as simple as that! Simply follow these steps, and your Next JS site will have Google Analytics up and running in no time. This should get you started with Google Analytics. It takes 24-48 hours for data to appear in Google Analytics.

We will now add code to our NextJS application to track page views by connecting Google Analytics with next/router. When the user goes an alternate route, an event is triggered that sends data to Google Analytics.

import "../styles/globals.css";
import Script from "next/script";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  const router=useRouter();

  <Script
  	strategy="afterInteractive"
  	src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
  />
  <Script
  	id="google-analytics"
  	strategy="afterInteractive">
  	{`
  		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,
  	});
  	`}
  />

  useEffect(() => {
  	const handleRouteChange = (url) => {
  		window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
  			page_path: url,
  		});
  	};

  	router.events.on("routeChangeComplete", handleRouteChange);

  	return () => {
  	router.events.off("routeChangeComplete", handleRouteChange);
  	};
  }, [router.events]);

  return (
      <Component {...pageProps} />
  );
}

export default MyApp;

We're simply checking for new events happening with your router using useEffect in our _app.js file.

In NextJS, there are many different types of router events, but we only care when visitors successfully navigate to a new page, for which we have a router event named routeChangeComplete.

When we mount the component, we subscribe to router changes and log those values using the on function.

When the component is unmounted, we use the off function to unsubscribe from the event.

With Google Analytics Events, we can even track button clicks, form submissions, and more. So let's see how we can create a Google Analytics event. We use the gtag.js event command with the following syntax:

gtag("event", action, {
  event_category: category,
  event_label: label,
  value: value,
});

• action: The accepted type is string and the value will appear as the event action in Google Analytics Event reports.
• category: The accepted type is string and the default value is "general". The value will appear as the event category. You can leave it as general or create your custom category.
• label: The accepted type is string and the value will appear as the event label.
• value: The accepted type is number and the value should be a non negative integer that will appear as the event value.

If category or label are omitted, they will be set to the default values of "(not set)".

Lets look at an example:

Suppose we have a contact form. And we want to track how many times users submit the contact form. We can do this by attaching Google Analytics Events in our form's handleSubmit function.

const ContactForm = () => {

  const handleSubmit = (e) => {
    e.preventDefault();
	window.gtag("event", "contact_form", {
    event_category: "Contact",
    event_label: email,
    // value: value,
  	});

  };

  ...
  ...
  ...

Now, every time the handleSubmit function is called successfully, a custom event will be logged in Google Analytics with the event action as "contact_form", the event_category as "Contact" and the event label as email that is entered by the user in the contact form.

Likewise, we can send Google Analytics events from anywhere in our NextJS application, e.g. from an onClick function, an onSubmit function, etc. You can read more about Measuring Google Analytics Events here.

It's as simple as that! Simply follow these steps, and your Next JS site will have Google Analytics up and running in no time. This should get you started with Google Analytics. It takes 24-48 hours for data to appear in Google Analytics.