Fix: (core) Fix gtag events

gtag.js

@@ -0,0 +1,17 @@
+export const GA_TRACKING_ID = 'G-XYCDCKWDJ2' //replace it with your measurement id
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url
+  })
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value
+  })
+}

src/pages/_app.tsx

@@ -6,14 +6,24 @@ import NextNProgress from 'nextjs-progressbar'
 import SEO from '../../next-seo.config'
 import { DefaultSeo } from 'next-seo'
 import Tabs from '@/components/Tabs'
-import Script from 'next/script'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import Script from 'next/script'
+import * as gtag from '../../gtag'
 
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter()
+
   useEffect(() => {
     router.prefetch = async () => void {}
+    const handleRouteChange = (url: string) => {
+      gtag.pageview(url)
+    }
+    router.events.on('routeChangeComplete', handleRouteChange)
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
   }, [router])
   return (
     <>
@@ -22,16 +32,24 @@ export default function App({ Component, pageProps }: AppProps) {
         <link rel="manifest" href="/manifest.json" />
         <meta name="theme-color" content="#292556" />
       </Head>
-      <Script src="https://www.googletagmanager.com/gtag/js?id=G-XYCDCKWDJ2" />
-      <Script id="google-analytics">
-        {`
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
- 
-          gtag('config', 'G-XYCDCKWDJ2');
-        `}
-      </Script>
+      <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,
+            });
+          `
+        }}
+      />
       <DefaultSeo {...SEO} />
       <GlobalStyles />
       <main role="main">

src/pages/index.tsx

@@ -2,13 +2,13 @@ import client from '@/graphql/client'
 import { AlbumConnection, GetAlbumsQuery } from '@/graphql/generated/graphql'
 import { GET_ALBUMS } from '@/graphql/queries'
 import HomeTemplate from '@/templates/Home'
-import { GetStaticProps } from 'next'
+import { GetServerSideProps } from 'next'
 
 export default function Home({ nodes, pageInfo, edges }: AlbumConnection) {
   return <HomeTemplate nodes={nodes} pageInfo={pageInfo} edges={edges} />
 }
 
-export const getStaticProps: GetStaticProps = async () => {
+export const getServerSideProps: GetServerSideProps = async () => {
   const { data } = await client.query({
     query: GET_ALBUMS,
     variables: {