GA Tracking _app.tsx

_app.tsx

import App, { NextWebVitalsMetric } from 'next/app' 
import '../styles/globals.css' 
import type { AppProps, AppContext } from 'next/app' 

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types 
function MyApp({ Component, pageProps }: AppProps) { 
  return ( 
    <Component {…pageProps} /> 
  ) 
} 

MyApp.getInitialProps = async (appContext: AppContext) => { 
  // calls page's `getInitialProps` and fills `appProps.pageProps` 
  const appProps = await App.getInitialProps(appContext) 
  return { …appProps } 
} 

export function reportWebVitals({ id, name, label, value, }: NextWebVitalsMetric): void { 
  window.gtag('event', name, { 
    event_category: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric', 
    value: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers 
    event_label: id, // id unique to current page load 
    non_interaction: true, // avoids affecting bounce rate. 
  }) 
} 

export default MyApp