[Feat/#137] 구글 애널리틱스 버튼 이벤트 추적 태그 추가

src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx

@@ -9,6 +9,8 @@ import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 const CreateReviewFailPage = () => {
   const { navigateToHome } = useRoute();
 
@@ -17,6 +19,7 @@ const CreateReviewFailPage = () => {
   const { resetScanData } = useScanDataStore();
 
   const handleNavigateHome = () => {
+    gTagLogEvent("create_review_fail_home_button");
     resetGenerateReviewData();
     resetCreateReviewData();
     resetScanData();

src/pages/HomePage/HomePage.tsx

@@ -12,6 +12,8 @@ import styles from "@/pages/HomePage/HomePage.module.scss";
 
 import { useScanDataStore } from "@/store/useScanDataStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 const SHARE_TEXT =
   "영수증을 촬영하면 AI가 자동으로 맛집 리뷰를 생성! 🍽️✨ 간편하게 추억을 남기고, 나만의 미식 기록을 완성하세요. 미식 경험을 더욱 스마트하게, 미식 MISIK!";
 
@@ -36,9 +38,11 @@ const HomePage = () => {
     <>
       <Navbar>
         <Navbar.RightButton
-          onClick={() =>
-            send({ type: AppBridgeMessageType.SHARE, payload: { shareText: SHARE_TEXT } })
-          }
+          onClick={() => {
+            gTagLogEvent("share_button");
+
+            send({ type: AppBridgeMessageType.SHARE, payload: { shareText: SHARE_TEXT } });
+          }}
         >
           <Text variant="bodySm" color="secondary">
             앱 공유하기
@@ -64,6 +68,8 @@ const HomePage = () => {
             text="갤러리"
             iconName="gallery"
             onClick={() => {
+              gTagLogEvent("gallery_button");
+
               send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" });
 
               send({ type: AppBridgeMessageType.RECEIVE_SCAN_RESULT, payload: { result: "" } });
@@ -73,6 +79,8 @@ const HomePage = () => {
             text="카메라"
             iconName="camera"
             onClick={() => {
+              gTagLogEvent("camera_button");
+
               send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
 
               send({ type: AppBridgeMessageType.RECEIVE_SCAN_RESULT, payload: { result: "" } });

src/pages/LoadingPage/LoadingPage.tsx

@@ -14,6 +14,8 @@ import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 const LoadingPage = () => {
   const { send } = useAppBridge();
 
@@ -24,6 +26,8 @@ const LoadingPage = () => {
   const { resetScanData } = useScanDataStore();
 
   const handleNavigateToHome = () => {
+    gTagLogEvent("loading_close_button");
+
     resetGenerateReviewData();
     resetCreateReviewData();
     resetScanData();

src/pages/ReceiptEditPage/ReceiptEditPage.tsx

@@ -13,6 +13,8 @@ import styles from "@/pages/ReceiptEditPage/ReceiptEditPage.module.scss";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 const ReceiptEditPage = () => {
   const { navigateToHome, navigateToSelectTag } = useRoute();
 
@@ -81,7 +83,13 @@ const ReceiptEditPage = () => {
   return (
     <>
       <Navbar>
-        <Navbar.LeftButton onClick={handleNavigateToHome}>
+        <Navbar.LeftButton
+          onClick={() => {
+            gTagLogEvent("receipt_edit_home_button");
+
+            handleNavigateToHome();
+          }}
+        >
           <Icon name="leftArrow" />
         </Navbar.LeftButton>
       </Navbar>
@@ -132,7 +140,11 @@ const ReceiptEditPage = () => {
                 key="scan"
                 text="다시 스캔하기"
                 variant="secondary"
-                onClick={handleNavigateToHome}
+                onClick={() => {
+                  gTagLogEvent("receipt_edit_rescan_button");
+
+                  handleNavigateToHome();
+                }}
               />
               <Button
                 key="confirm"

src/pages/ReceiptInputPage/ReceiptInputPage.tsx

@@ -13,6 +13,8 @@ import styles from "@/pages/ReceiptInputPage/ReceiptInputPage.module.scss";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 const ReceiptInputPage = () => {
   const { navigateToHome, navigateToSelectTag } = useRoute();
 
@@ -65,6 +67,7 @@ const ReceiptInputPage = () => {
   };
 
   const handleHomeClick = () => {
+    gTagLogEvent("receipt_input_back_button");
     resetScanData();
     navigateToHome();
   };

src/pages/RecognitionFailPage/RecognitionFailPage.tsx

@@ -11,6 +11,8 @@ import styles from "@/pages/RecognitionFailPage/RecognitionFailPage.module.scss"
 
 import { useScanDataStore } from "@/store/useScanDataStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 const RecognitionFailPage = () => {
   const { send } = useAppBridge();
 
@@ -19,10 +21,17 @@ const RecognitionFailPage = () => {
   const { resetScanData } = useScanDataStore();
 
   const handleNavigateToHome = () => {
+    gTagLogEvent("recognition_fail_close_button");
     resetScanData();
     navigateToHome();
   };
 
+  const handleNavgateToReceiptInput = () => {
+    gTagLogEvent("receipt_input_button");
+    resetScanData();
+    navgateToReceiptInput();
+  };
+
   return (
     <>
       <Navbar>
@@ -44,11 +53,15 @@ const RecognitionFailPage = () => {
           <img src="/assets/img/img-recognition-fail.png" alt="recognitionFailImg" />
         </div>
         <div className={styles.Bottom}>
-          <Button text="직접 입력하기" variant="secondary" onClick={navgateToReceiptInput} />
+          <Button text="직접 입력하기" variant="secondary" onClick={handleNavgateToReceiptInput} />
           <Button
             text="다시 촬영하기"
             variant="secondary"
-            onClick={() => send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" })}
+            onClick={() => {
+              gTagLogEvent("camera_retry_button");
+
+              send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
+            }}
           />
         </div>
       </div>

src/pages/ReviewResultPage/ReviewResultPage.tsx

@@ -18,6 +18,8 @@ import styles from "@/pages/ReviewResultPage/ReviewResultPage.module.scss";
 import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 import type { Options as ConfettiOptions } from "canvas-confetti";
 
 export default function ReviewResultPage() {
@@ -47,6 +49,8 @@ export default function ReviewResultPage() {
   };
 
   const handleRetryCreateReview = () => {
+    gTagLogEvent("review_retry_button");
+
     resetGenerateReviewData();
 
     send({
@@ -88,6 +92,8 @@ export default function ReviewResultPage() {
             iconName="paste"
             size="sm"
             onClick={() => {
+              gTagLogEvent("copy_button");
+
               send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
 
               addToast("리뷰가 복사되었어요");
@@ -97,7 +103,13 @@ export default function ReviewResultPage() {
       </div>
       <div className={styles.Bottom}>
         <Button text="다시생성" variant="secondary" onClick={handleRetryCreateReview} />
-        <Button text="홈으로 가기" onClick={handleOpen} />
+        <Button
+          text="홈으로 가기"
+          onClick={() => {
+            gTagLogEvent("home_button");
+            handleOpen();
+          }}
+        />
       </div>
 
       <HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />

src/pages/SelectStylePage/SelectStylePage.tsx

@@ -17,15 +17,18 @@ import styles from "@/pages/SelectStylePage/SelectStylePage.module.scss";
 
 import { useCreateReviewStore } from "@/store/useReviewStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 interface StyleProps {
   name: string;
   image: string;
+  tagId: string;
 }
 
 const IMG_STYLE_DATA = [
-  { name: "친근한 말투", image: "/assets/img/img-style-friendly.webp" },
-  { name: "믿음직한 말투", image: "/assets/img/img-style-trust.webp" },
-  { name: "귀여운 말투", image: "/assets/img/img-style-cute.webp" },
+  { name: "친근한 말투", image: "/assets/img/img-style-friendly.webp", tagId: "friendly_button" },
+  { name: "믿음직한 말투", image: "/assets/img/img-style-trust.webp", tagId: "trust_button" },
+  { name: "귀여운 말투", image: "/assets/img/img-style-cute.webp", tagId: "cute_button" },
 ];
 
 const STYLE_NAME_MAPPING: { [key: string]: string } = {
@@ -52,6 +55,8 @@ const SelectStylePage = () => {
   };
 
   const handleCreateReview = () => {
+    gTagLogEvent("create_review_button");
+
     const mappedStyle = STYLE_NAME_MAPPING[selectedStyle.name];
 
     if (mappedStyle) {
@@ -85,7 +90,12 @@ const SelectStylePage = () => {
           </div>
 
           <div className={styles.ExampleButtonBox}>
-            <button onClick={handleOpen}>
+            <button
+              onClick={() => {
+                gTagLogEvent("style_example_button");
+                handleOpen();
+              }}
+            >
               <Text variant="bodyXsm" color="secondary">
                 말투 예시보기
               </Text>
@@ -105,7 +115,10 @@ const SelectStylePage = () => {
                 className={classNames({
                   [styles.isSelected]: selectedStyle.name === style.name,
                 })}
-                onClick={() => handleStyleClick(style)}
+                onClick={() => {
+                  gTagLogEvent(style.tagId);
+                  handleStyleClick(style);
+                }}
               >
                 <Text
                   color={selectedStyle.name === style.name ? "white" : "secondary"}

src/pages/SelectTagPage/SelectTagPage.tsx

@@ -13,6 +13,8 @@ import styles from "@/pages/SelectTagPage/SelectTagPage.module.scss";
 
 import { useCreateReviewStore } from "@/store/useReviewStore";
 
+import { gTagLogEvent } from "@/utils/gtag";
+
 const SelectTagPage = () => {
   const { navigateToSelectStyle, navigateToBack } = useRoute();
 
@@ -75,7 +77,13 @@ const SelectTagPage = () => {
                 isSelect={hashTag.includes(tag)}
               />
             ))}
-            <Tag variant="add" onClick={() => setIsBottomSheetOpen(true)} />
+            <Tag
+              variant="add"
+              onClick={() => {
+                gTagLogEvent("add_tag_button");
+                setIsBottomSheetOpen(true);
+              }}
+            />
           </div>
         </div>
 

src/types/global.d.ts

@@ -27,6 +27,8 @@ declare global {
     parsed: Array<{ key: string; value: string }>;
   }
   interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gtag: (...args: any[]) => void;
     response?: {
       receiveScanResult: (jsonData: string) => void;
       receiveGeneratedReview: (jsonData: string) => void;

src/utils/gtag.ts

@@ -0,0 +1,6 @@
+export const gTagLogEvent = (eventLabel: string) => {
+  window.gtag("event", "click", {
+    event_category: "button",
+    event_label: eventLabel,
+  });
+};