_app.js

import * as gtag from '@/lib/ga'
import { customTheme } from '@/theme'
import { ChakraProvider } from '@chakra-ui/react'
import { useRouter } from 'next/router'
import Script from 'next/script'
import { useEffect } from 'react'
import { ColorModeToggle } from '@/components/ColorModeToggle'

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    router.events.on('hashChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
      router.events.off('hashChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <ChakraProvider resetCSS theme={customTheme}>
      {/* Google Tag Manager - Global base code */}
      <Script
        strategy='afterInteractive'
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <Script
        id='gtag-init'
        strategy='afterInteractive'
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gtag.GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />

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

export default MyApp