Merge pull request #156 from Team-INSERT/feat/ga

Ubinquitous · web-flow · commit 570366e4bc0a · 2023-12-29T08:02:00.000+09:00
feat : 구글 애널리틱스 설정
diff --git a/gtag.d.ts b/gtag.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="gtag.js" />
+
+declare module "gtag.js";
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@types/graphql": "^14.5.0",
+    "@types/gtag.js": "^0.0.18",
     "@types/jest": "^29.2.4",
     "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-slick": "^0.23.12",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import Provider from "@/provider/MainProvider";
 import React from "react";
+import * as gtag from "@/hooks/useGtag";
+import Script from "next/script";
 
 export const metadata = {
   title: "BSM",
@@ -11,8 +13,27 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  gtag.useGtag();
   return (
     <html lang="en">
+      <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,
+                });
+              `,
+        }}
+      />
       <body>
         <Provider>{children}</Provider>
       </body>
diff --git a/src/hooks/useGtag.ts b/src/hooks/useGtag.ts
@@ -0,0 +1,40 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export const GA_TRACKING_ID = "G-J8DK7F6M37";
+
+export const pageview = (url: URL) => {
+  window.gtag("config", GA_TRACKING_ID, {
+    page_path: url,
+  });
+};
+
+export const event = (
+  action: Gtag.EventNames,
+  { event_category, event_label, value }: Gtag.EventParams,
+) => {
+  window.gtag("event", action, {
+    event_category,
+    event_label,
+    value,
+  });
+};
+
+export const useGtag = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === "development") return;
+
+    const handleRouteChange = (url: URL) => {
+      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]);
+};
diff --git a/yarn.lock b/yarn.lock
@@ -1832,6 +1832,11 @@
   dependencies:
     graphql "*"
 
+"@types/gtag.js@^0.0.18":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.18.tgz#d6bc7cb1acc64ff4f4e4be918d401c53fe9ccf20"
+  integrity sha512-GJxnIvuXuVhKaHfsOdzGipoOoXq72y3mdcncc9h6i6E7nlz89zBEj2wrLM7bqO5Xk9Lm2B94MwdQsSwRlaPSWw==
+
 "@types/hast@^2.0.0":
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.8.tgz#4ac5caf38b262b7bd5ca3202dda71f0271635660"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/// <reference types="gtag.js" />`
	`2`	`+`
	`3`	`+declare module "gtag.js";`