[add] Gtagの設定

.env.sample

@@ -1 +1,2 @@
-NEXT_PUBLIC_BACKEND_API=
+NEXT_PUBLIC_BACKEND_API=
+NEXT_PUBLIC_GA_ID=

package.json

@@ -52,6 +52,7 @@
         "@storybook/blocks": "^7.0.22",
         "@storybook/nextjs": "^7.0.22",
         "@storybook/react": "^7.0.22",
+        "@types/gtag.js": "^0.0.12",
         "@types/react-infinite-scroller": "^1.2.3",
         "@types/react-scroll": "^1.8.7",
         "@types/uuid": "^9.0.2",

src/components/Common/others/Gtag.tsx

@@ -0,0 +1,39 @@
+import Script from "next/script";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export const Gtag = () => {
+    const router = useRouter();
+    useEffect(() => {
+        const handleRouterChange = (url: any) => {
+            window.gtag("config", process.env.NEXT_PUBLIC_GA_ID ?? "", {
+                page_path: url,
+            });
+        };
+        router.events.on("routeChangeComplete", handleRouterChange);
+        return () => {
+            router.events.off("routeChangeComplete", handleRouterChange);
+        };
+    }, [router.events]);
+    return (
+        <>
+            <Script
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
+            />
+            <Script
+                id="gtag-init"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                    __html: `
+                    window.dataLayer = window.dataLayer || [];
+                    function gtag(){dataLayer.push(arguments);}
+                    gtag('js', new Date());
+
+                    gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
+                    `,
+                }}
+            />
+        </>
+    );
+};