Simple component to load Google Analytics 4 gtag.js into a Next.js app. Works well with @haensl/google-analytics.
$ npm install -S @haensl/next-google-analytics$ yarn add @haensl/next-google-analyticsIn 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} />
</>
)
};@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.