next-ga4

Google Analytics 4 for Next.js

Install

npm install next-ga4

or

yarn add next-ga4

Usage

Add <NextGA /> to _app.tsx.

import type { AppProps } from 'next/app'
import { NextGA } from 'next-ga4'

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <NextGA measurementId="G-XXXXXXXXXX" />

      <Component {...pageProps} />
    </>
  )
}

export default App

Options

| Property | Description | Type | Required | Default | | :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- | :------- | :---------- | | measurementId | Measurement ID. | string | Yes | | | initialConsentParams | Parameters for consent on initial execute. | object | No | undefined | | initialSetParams | Parameters for set on initial execute. | object | No | undefined | | initialConfigParams | Parameters for config on initial execute. | object | No | undefined | | isListenRouterEvents | Whether to detect pushState, popState, and replaceState and send page_viewIf true, disable Page changes based on browser history events in Enhanced measurement. | boolean | No | true |

Hints

How do i debug?

1. Add Google Analytics Debugger to Google Chrome and enable it
2. Click Configure -> DebugView in the left navigation
3. Reload the website you want to debug

More details: [GA4] Monitor events in debug mode

References

• Introduction to Google Analytics 4
• Global site tag API reference

Author

@p-chan

License

MIT