Implementing Google Analytics (GA4) in Next.js 14.

3 min readMar 6, 2024

Learning to connect Google Analytics to your website with Next14.

Google Analytics is a tool for tracking traffic and user behavior on your website. Integrating it into your Next.js application can provide valuable insights into how visitors interact with your content. With the introduction of the @next/third-parties package in Next.js 14, setting up Google Analytics has become even simpler and more efficient.

Introduction to @next/third-parties

@next/third-parties is a library that provides a collection of components and utilities that improve the performance and developer experience of loading popular third-party libraries in your Next.js application. It is designed to be optimized for performance and ease of use.

Configuring Google Analytics

To get started, install the @next/third-parties package and Next.js:

npm install @next/third-parties@latest next@latest

Next, import the GoogleAnalytics component into your layout.tsx:

import { GoogleAnalytics } from '@next/third-parties/google'

To configure the Tag Manager use this component:

<GoogleTagManager gtmId="GTM-GTSD" />

To configure just the Google Analytics manager, use this component:

<GoogleAnalytics gaId="G-JFDSDGDFG" />

Configuring Google Analytics for All Routes

To load Google Analytics on all routes, include the component directly in the root layout and pass your measurement ID:

import type { Metadata } from "next";
import "./globals.css";

import { GoogleTagManager, GoogleAnalytics } from '@next/third-parties/google'

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>

    <GoogleTagManager gtmId="GTM-XYZ" /> // Tag Manager

    OR

    <GoogleAnalytics gaId="G-JFDSDGDFG" /> Analytics
    </html>
  );
}

Configuring Google Analytics for a Single Route

If you only want to load Google Analytics on a specific route, include the component in the corresponding page:

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" /> // METRIC ID
}

Sending Events

You can measure user interactions on your page by sending events using the sendGAEvent function. For this function to work, the <GoogleAnalytics /> component must be included in a parent layout, page, component, or directly in the same file.


'use client'
 
import { sendGTMEvent } from '@next/third-parties/google'
 
export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Send Event
      </button>
    </div>
  )
}

Refer to the Google Analytics documentation for more information on event parameters.

Adding Google Maps Embed to your page

To include a Google Maps Embed on your page, use the GoogleMapsEmbed component and provide necessary options such as API key, dimensions, mode, and location query:

import { GoogleMapsEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return (
    <GoogleMapsEmbed
      apiKey="XYZ" // your api key
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />
  )
}

Options

Here are some options you can pass to the GoogleMapsEmbed component:

apiKey: Your Google Maps API key.
height: The height of the map in pixels.
width: The width of the map. You can use percentages for responsive design.
mode: The mode of the map. Options include place, directions, search, etc.
q: The query string for the location to be displayed on the map.

For a full list of options and their descriptions, refer to the Google Maps Embed documentation.

Conclusion

Setting up Google Analytics in your Next.js application is now easier than ever, thanks to the @next/third-parties package. With just a few steps, you can start collecting valuable data about user behavior and improve your application's experience.