Add Google Analytics component

walnuts1018 · Jan 18, 2024 · a6c9804 · a6c9804
1 parent 26b98c9
commit a6c9804
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@types/body-scroll-lock": "^3.1.2",
+    "@types/gtag.js": "^0.0.18",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/src/app/components/GoogleAnalytics.tsx b/src/app/components/GoogleAnalytics.tsx
@@ -0,0 +1,40 @@
+'use client'
+import { usePathname, useSearchParams } from 'next/navigation'
+import Script from 'next/script'
+import { useEffect } from 'react'
+
+import { existsGaId, GA_MEASUREMENT_ID, pageview } from '../../gtag'
+
+const GoogleAnalytics = () => {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    if (!existsGaId) {
+      return
+    }
+    const url = pathname + searchParams.toString()
+    pageview(url)
+  }, [pathname, searchParams])
+
+  return (
+    <>
+      <Script
+        strategy='lazyOnload'
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+      />
+      <Script id='gtag-init' strategy='afterInteractive'>
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${GA_MEASUREMENT_ID}', {
+            page_path: window.location.pathname,
+          });
+        `}
+      </Script>
+    </>
+  )
+}
+
+export default GoogleAnalytics
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import Favicon16 from '../../public/favicons/favicon-16x16.png'
 import Favicon32 from '../../public/favicons/favicon-32x32.png'
 import Favicon from '../../public/favicons/favicon.ico'
 import { LowerDecoration, UpperDecoration } from './components/Decoration'
+import GoogleAnalytics from './components/GoogleAnalytics'
 
 const title = 'Walnuts.dev'
 const description = 'I am Walnuts'
@@ -51,6 +52,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang='ja'>
       <head>
+        <GoogleAnalytics />
         <link rel='manifest' href='/favicons/site.webmanifest' />
         <link rel='mask-icon' href='/favicons/safari-pinned-tab.svg' color='#5bbad5' />
         <meta name='msapplication-TileColor' content='#da532c' />

diff --git a/src/gtag.d.ts b/src/gtag.d.ts
@@ -0,0 +1 @@
+declare module 'gtag.js';
diff --git a/src/gtag.ts b/src/gtag.ts
@@ -0,0 +1,9 @@
+export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID || "";
+
+export const existsGaId = GA_MEASUREMENT_ID !== "";
+
+export const pageview = (path: string) => {
+  window.gtag("config", GA_MEASUREMENT_ID, {
+    page_path: path,
+  });
+};