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_view If 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