AboutBlogLogin
July 3, 2023

Google Analytics + Next.js App Router: Understanding User Behavior and Optimizing Website Performance

C

Ciro Nunes

Google Analytics + Next.js App Router

In the digital world, understanding user behavior and optimizing website performance are crucial for achieving success. Google Analytics provides valuable insights that can be used to enhance the performance of your website. However, integrating Google Analytics with Next.js applications, particularly when utilizing the App Router, can be a challenging task. In this blog post, we will guide you through the process of seamlessly integrating Google Analytics with Next.js App Router.

To begin, it is recommended to use the next/script module to include the Google Analytics script. Here's an example of how to do it:

// GoogleAnalytics.tsx
import Script from 'next/script';

export function GoogleAnalytics() {
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=G-MEASUREMENT_ID`}
      />
      <Script id="google-analytics">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'G-MEASUREMENT_ID');
        `}
      </Script>
    </>
  );
}

Next, ensure that you are using an environment variable for the Google Analytics Measurement ID to keep sensitive information secure. Here's how to implement it:

// components/GoogleAnalytics.tsx
// ...
export function GoogleAnalytics() {
  const gaMeasurementId = process.env.GA_MEASUREMENT_ID;
  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
      />
      <Script id="google-analytics">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', ${gaMeasurementId});
        `}
      </Script>
    </>
  );
}

export default GoogleAnalytics;

Finally, to ensure that only the necessary scripts are included in the production environment and to avoid gathering bad data, use the following approach:

// app/layout.tsx
import { GoogleAnalytics } from '../components/GoogleAnalytics';

export default function Layout(props) {
  return (
    <html>
      <head>...</head>
      <body>
        {props.children}

        {process.env.NODE_ENV === 'production' && <GoogleAnalytics />}
      </body>
    </html>
  );
}

By following these steps, you can seamlessly integrate Google Analytics with your Next.js App Router, enabling you to gather valuable data on user behavior and optimize your website's performance accordingly. With these insights at hand, you can make informed decisions to enhance user experience and drive better results for your online business. Happy tracking!

Share this post with your friends

Ready speed ahead of the competition?

Provide world-class experiences that sell to your customers.
We can help take your business to the next level.