feat: ga4, gtm 연동

Author: sikkzz

.pnp.cjs

@@ -24,6 +24,7 @@
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-gtm-module": "^2.0.11",
     "react-router-dom": "^7.1.3",
     "zustand": "^5.0.3"
   },
@@ -46,6 +47,7 @@
     "@types/node": "^22.10.7",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/react-gtm-module": "^2",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-react": "^4.3.4",

.yarn/cache/@types-react-gtm-module-npm-2.0.4-ba9b45b661-0bba7b8416.zip

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { StrictMode } from "react";
 import ReactDom from "react-dom/client";
+import TagManager from "react-gtm-module";
 
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
@@ -15,6 +17,35 @@ import { ToastProvider } from "@/hooks/common/useToast";
 import "@/styles/reset.scss";
 import "@/styles/global.scss";
 
+const gtmTag = {
+  gtmId: import.meta.env.VITE_GTM_ID,
+};
+
+const initializeGA4 = () => {
+  const ga4Id = import.meta.env.VITE_GA4_ID;
+
+  const script = document.createElement("script");
+  script.async = true;
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${ga4Id}`;
+  document.head.appendChild(script);
+
+  script.onload = () => {
+    (window as any).dataLayer = (window as any).dataLayer || [];
+
+    function gtag(...args: any[]) {
+      (window as any).dataLayer.push(args);
+    }
+    gtag("js", new Date());
+
+    gtag("config", ga4Id);
+  };
+};
+
+if (import.meta.env.MODE === "production") {
+  TagManager.initialize(gtmTag);
+  initializeGA4();
+}
+
 ReactDom.createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ReactQueryClientProvider>

.yarn/cache/react-gtm-module-npm-2.0.11-99adaedaa9-ceedf296a1.zip

@@ -3038,6 +3038,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-gtm-module@npm:^2":
+  version: 2.0.4
+  resolution: "@types/react-gtm-module@npm:2.0.4"
+  checksum: 10c0/0bba7b841617fca4a23aacdd6e69299e0b9f193988d381db285e91de3b17bf4599bc58236d2f76a2eb2cf589b4e4d665d66feb2f90f87b549e957a79765ffec6
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^18.3.18":
   version: 18.3.18
   resolution: "@types/react@npm:18.3.18"
@@ -8283,6 +8290,7 @@ __metadata:
     "@types/node": "npm:^22.10.7"
     "@types/react": "npm:^18.3.18"
     "@types/react-dom": "npm:^18.3.5"
+    "@types/react-gtm-module": "npm:^2"
     "@typescript-eslint/eslint-plugin": "npm:^8.20.0"
     "@typescript-eslint/parser": "npm:^8.20.0"
     "@vitejs/plugin-react": "npm:^4.3.4"
@@ -8303,6 +8311,7 @@ __metadata:
     prettier: "npm:^3.4.2"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
+    react-gtm-module: "npm:^2.0.11"
     react-router-dom: "npm:^7.1.3"
     sass: "npm:^1.83.4"
     sass-loader: "npm:^16.0.4"
@@ -9158,6 +9167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-gtm-module@npm:^2.0.11":
+  version: 2.0.11
+  resolution: "react-gtm-module@npm:2.0.11"
+  checksum: 10c0/ceedf296a1232934788583e4a20452a82e872fcd79e24827bf615b1cd3bceb59c294d169b1bf8313ba48b9e480e681ce520cd2a5cf2381c5aaa1fb74d4f88930
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^17.0.1":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"