Add GA

2022-04-29 07:22:02 +09:00
parent 622940be68
commit 813490c194
2 changed files with 80 additions and 0 deletions
@@ -0,0 +1,76 @@
+import { NextRouter } from 'next/router'
+import Script from 'next/script'
+import { useEffect } from 'react'
+
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
+
+declare global {
+  interface Window {
+    gtag: any
+  }
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: string) => {
+  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,
+}: {
+  action: string
+  category: string
+  label: string
+  value: string
+}) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}
+
+export function useGtagPageViewReport(router: NextRouter) {
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      pageview(url)
+    }
+    router.events.on('routeChangeComplete', handleRouteChange)
+    router.events.on('hashChangeComplete', handleRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+      router.events.off('hashChangeComplete', handleRouteChange)
+    }
+  }, [router])
+}
+
+export const GtagScript = () => {
+  return (
+    <>
+      <Script
+        strategy='afterInteractive'
+        src={`https://www.googletagmanager.com/gtag/js?id=${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', '${GA_TRACKING_ID}', {
+          page_path: window.location.pathname,
+        });
+      `,
+        }}
+      />
+    </>
+  )
+}
@@ -8,6 +8,7 @@ import { useRouter } from 'next/router'
 import '../styles/nprogress.css'
 import '../styles/nextjs.css'
 import Head from 'next/head'
+import { GtagScript, useGtagPageViewReport } from '../lib/gtag'

 function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter()
@@ -30,11 +31,14 @@ function MyApp({ Component, pageProps }: AppProps) {
    }
  }, [router])

+  useGtagPageViewReport(router)
+
  return (
    <ThemeProvider theme={theme}>
      <Head>
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
      </Head>
+      <GtagScript />
      <Component {...pageProps} />
    </ThemeProvider>
  )