Next-ga4 NPM | npm.io

next-ga4

Google Analytics 4 for Next.js

Install

npm install next-ga4

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?

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

More details: [GA4] Monitor events in debug mode

References

Author

@p-chan

License

MIT

ga google-analytics next nextjs react reactjs

@infinitebrahmanuniverse/nolb-next-g @everything-registry/sub-chunk-2267

0.1.0

2 years ago