@haensl/next-google-analytics

Simple component to load Google Analytics 4 gtag.js into a Next.js app. Works well with @haensl/google-analytics.

Installation

Via npm

$ npm install -S @haensl/next-google-analytics

Via yarn

$ yarn add @haensl/next-google-analytics

Usage

In your root layout/page:

import GoogleAnalytics from '@haensl/next-google-analytics';

export default function MyApp({ Component, props }) {
  return (
    <>
      <GoogleAnalytics measurementId={ process.env.GOOGLE_MEASUREMENT_ID } />

      <Component {...props} />
    </>
  )
};

Synopsis

@haensl/next-google-analytics uses next/script under the hood to inject a <script> tag that loads gtag.js.

  <GoogleAnalytics
    // Your Google measurement id. String.
    // The component will not render anything with a measurement id.
    // default: undefined
    measurementId="G-123ABC456B"

    // On-load callback. Function.
    // Called once gtag.js is loaded.
    // default: undefined
    onLoad={ onLoadCallback }

    // Customize the URL to gtag.js. String.
    // default: 'https://www.googletagmanager.com/gtag/js'
    src="https://www.googletagmanager.com/gtag/js"

    // next/script injection strategy.
    // default: 'afterInteractive'
    strategy="afterInteractive"
  />

See also @haensl/google-analytics to track analytics events throughout your Next.js application.

Changelog

License