[Refactor] GA 태그 전체 수정 (#147)

.github/workflows/deploy.yml

@@ -4,6 +4,9 @@ env:
   VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
 
 on:
+  push:
+    branches:
+      - main
   pull_request:
     types:
       - closed

package.json

@@ -24,7 +24,6 @@
     "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"
   },
@@ -47,7 +46,6 @@
     "@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",

src/hooks/common/useChannelTalk.ts

@@ -11,7 +11,7 @@ export const useChannelTalk = () => {
     ChannelService.loadScript();
 
     ChannelService.boot({
-      pluginKey: import.meta.env.VITE_CHANNEL_TALK_KEY || "",
+      pluginKey: import.meta.env.VITE_CHANNEL_TALK || "",
       hideChannelButtonOnBoot: true,
     });
   }, []);

src/main.tsx

@@ -1,7 +1,6 @@
 /* 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";
 
@@ -17,33 +16,28 @@ 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);
+const GA4_ID = import.meta.env.VITE_GA4_ID;
 
-  script.onload = () => {
-    (window as any).dataLayer = (window as any).dataLayer || [];
+const addGtagScript = () => {
+  if (!GA4_ID) return;
 
-    (window as any).gtag = function (...args: any[]) {
-      (window as any).dataLayer.push(args);
-    };
+  const script1 = document.createElement("script");
+  script1.src = `https://www.googletagmanager.com/gtag/js?id=${GA4_ID}`;
+  script1.async = true;
+  document.head.appendChild(script1);
 
-    (window as any).gtag("js", new Date());
-    (window as any).gtag("config", ga4Id);
-  };
+  const script2 = document.createElement("script");
+  script2.innerHTML = `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){ dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', '${GA4_ID}');
+  `;
+  document.head.appendChild(script2);
 };
 
 if (import.meta.env.MODE === "production") {
-  TagManager.initialize(gtmTag);
-  initializeGA4();
+  addGtagScript();
 }
 
 ReactDom.createRoot(document.getElementById("root")!).render(

src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx

@@ -19,7 +19,10 @@ const CreateReviewFailPage = () => {
   const { resetScanData } = useScanDataStore();
 
   const handleNavigateHome = () => {
-    gTagLogEvent("create_review_fail_home_button");
+    gTagLogEvent("create_review_fail_home_button_click", {
+      category: "Button",
+      label: "create_review_fail_home_button",
+    });
     resetGenerateReviewData();
     resetCreateReviewData();
     resetScanData();

src/pages/HomePage/HomePage.tsx

@@ -60,7 +60,10 @@ const HomePage = () => {
           <button
             className={styles.ShareButton}
             onClick={() => {
-              gTagLogEvent("share_button");
+              gTagLogEvent("share_button_click", {
+                category: "Button",
+                label: "share_button",
+              });
 
               send({ type: AppBridgeMessageType.SHARE, payload: { shareText: getShareText() } });
             }}
@@ -89,7 +92,10 @@ const HomePage = () => {
             text="갤러리"
             iconName="gallery"
             onClick={() => {
-              gTagLogEvent("gallery_button");
+              gTagLogEvent("gallery_button_click", {
+                category: "Button",
+                label: "gallery_button",
+              });
 
               send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" });
 
@@ -100,7 +106,10 @@ const HomePage = () => {
             text="카메라"
             iconName="camera"
             onClick={() => {
-              gTagLogEvent("camera_button");
+              gTagLogEvent("camera_button_click", {
+                category: "Button",
+                label: "camera_button",
+              });
 
               send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
 

src/pages/LoadingPage/LoadingPage.tsx

@@ -26,7 +26,10 @@ const LoadingPage = () => {
   const { resetScanData } = useScanDataStore();
 
   const handleNavigateToHome = () => {
-    gTagLogEvent("loading_close_button");
+    gTagLogEvent("loading_close_button_click", {
+      category: "Button",
+      label: "loading_close_button",
+    });
 
     resetGenerateReviewData();
     resetCreateReviewData();

src/pages/ReceiptEditPage/ReceiptEditPage.tsx

@@ -85,7 +85,10 @@ const ReceiptEditPage = () => {
       <Navbar>
         <Navbar.LeftButton
           onClick={() => {
-            gTagLogEvent("receipt_edit_home_button");
+            gTagLogEvent("receipt_edit_home_button_click", {
+              category: "Button",
+              label: "receipt_edit_home_button",
+            });
 
             handleNavigateToHome();
           }}
@@ -141,7 +144,10 @@ const ReceiptEditPage = () => {
                 text="다시 스캔하기"
                 variant="secondary"
                 onClick={() => {
-                  gTagLogEvent("receipt_edit_rescan_button");
+                  gTagLogEvent("receipt_edit_rescan_button_click", {
+                    category: "Button",
+                    label: "receipt_edit_rescan_button",
+                  });
 
                   handleNavigateToHome();
                 }}

src/pages/ReceiptInputPage/ReceiptInputPage.tsx

@@ -67,7 +67,10 @@ const ReceiptInputPage = () => {
   };
 
   const handleHomeClick = () => {
-    gTagLogEvent("receipt_input_back_button");
+    gTagLogEvent("receipt_input_back_button_click", {
+      category: "Button",
+      label: "receipt_input_back_button",
+    });
     resetScanData();
     navigateToHome();
   };

src/pages/RecognitionFailPage/RecognitionFailPage.tsx

@@ -21,13 +21,21 @@ const RecognitionFailPage = () => {
   const { resetScanData } = useScanDataStore();
 
   const handleNavigateToHome = () => {
-    gTagLogEvent("recognition_fail_close_button");
+    gTagLogEvent("recognition_fail_close_button_click", {
+      category: "Button",
+      label: "recognition_fail_close_button",
+    });
+
     resetScanData();
     navigateToHome();
   };
 
   const handleNavgateToReceiptInput = () => {
-    gTagLogEvent("receipt_input_button");
+    gTagLogEvent("receipt_input_button_click", {
+      category: "Button",
+      label: "receipt_input_button",
+    });
+
     resetScanData();
     navgateToReceiptInput();
   };
@@ -58,7 +66,10 @@ const RecognitionFailPage = () => {
             text="다시 촬영하기"
             variant="secondary"
             onClick={() => {
-              gTagLogEvent("camera_retry_button");
+              gTagLogEvent("camera_retry_button_click", {
+                category: "Button",
+                label: "camera_retry_button",
+              });
 
               send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
             }}

src/pages/ReviewResultPage/ReviewResultPage.tsx

@@ -49,7 +49,10 @@ export default function ReviewResultPage() {
   };
 
   const handleRetryCreateReview = () => {
-    gTagLogEvent("review_retry_button");
+    gTagLogEvent("review_retry_button_click", {
+      category: "Button",
+      label: "review_retry_button",
+    });
 
     resetGenerateReviewData();
 
@@ -92,7 +95,10 @@ export default function ReviewResultPage() {
             iconName="paste"
             size="sm"
             onClick={() => {
-              gTagLogEvent("copy_button");
+              gTagLogEvent("copy_button_click", {
+                category: "Button",
+                label: "copy_button",
+              });
 
               send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
 
@@ -106,7 +112,10 @@ export default function ReviewResultPage() {
         <Button
           text="홈으로 가기"
           onClick={() => {
-            gTagLogEvent("home_button");
+            gTagLogEvent("home_button_click", {
+              category: "Button",
+              label: "home_button",
+            });
             handleOpen();
           }}
         />

src/pages/SelectStylePage/SelectStylePage.tsx

@@ -55,7 +55,10 @@ const SelectStylePage = () => {
   };
 
   const handleCreateReview = () => {
-    gTagLogEvent("create_review_button");
+    gTagLogEvent("create_review_button_click", {
+      category: "Button",
+      label: "create_review_button",
+    });
 
     const mappedStyle = STYLE_NAME_MAPPING[selectedStyle.name];
 
@@ -92,7 +95,11 @@ const SelectStylePage = () => {
           <div className={styles.ExampleButtonBox}>
             <button
               onClick={() => {
-                gTagLogEvent("style_example_button");
+                gTagLogEvent("style_example_button_click", {
+                  category: "Button",
+                  label: "style_example_button",
+                });
+
                 handleOpen();
               }}
             >
@@ -116,7 +123,11 @@ const SelectStylePage = () => {
                   [styles.isSelected]: selectedStyle.name === style.name,
                 })}
                 onClick={() => {
-                  gTagLogEvent(style.tagId);
+                  gTagLogEvent(`${style.tagId}_click`, {
+                    category: "Button",
+                    label: `${style.tagId}`,
+                  });
+
                   handleStyleClick(style);
                 }}
               >

src/pages/SelectTagPage/SelectTagPage.tsx

@@ -80,7 +80,11 @@ const SelectTagPage = () => {
             <Tag
               variant="add"
               onClick={() => {
-                gTagLogEvent("add_tag_button");
+                gTagLogEvent("add_tag_button_click", {
+                  category: "Button",
+                  label: "add_tag_button",
+                });
+
                 setIsBottomSheetOpen(true);
               }}
             />

src/utils/gtag.ts

@@ -1,10 +1,4 @@
-export const gTagLogEvent = (eventLabel: string) => {
-  if (typeof window !== "undefined" && typeof window.gtag === "function") {
-    window.gtag("event", "click", {
-      event_category: "button",
-      event_label: eventLabel,
-    });
-  } else {
-    console.warn("Google Analytics is not initialized yet.");
-  }
+export const gTagLogEvent = (eventName: string, eventParams: object = {}) => {
+  if (!window.gtag) return;
+  window.gtag("event", eventName, eventParams);
 };