Skip to content

Commit 43facfa

Browse files
sikkzzsikkzz
authored
[Feat/#137] 구글 애널리틱스 버튼 이벤트 추적 태그 추가 (#138)
* feat: 홈, 영수증 인식 실패 페이지 태그 추적 추가 * feat: 전체 페이지 태그 추적 추가
1 parent 432a695 commit 43facfa

File tree

11 files changed

+98
-14
lines changed

11 files changed

+98
-14
lines changed

‎src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
99
import { useCreateReviewStore } from "@/store/useReviewStore";
1010
import { useScanDataStore } from "@/store/useScanDataStore";
1111

12+
import { gTagLogEvent } from "@/utils/gtag";
13+
1214
const CreateReviewFailPage = () => {
1315
const { navigateToHome } = useRoute();
1416

@@ -17,6 +19,7 @@ const CreateReviewFailPage = () => {
1719
const { resetScanData } = useScanDataStore();
1820

1921
const handleNavigateHome = () => {
22+
gTagLogEvent("create_review_fail_home_button");
2023
resetGenerateReviewData();
2124
resetCreateReviewData();
2225
resetScanData();

‎src/pages/HomePage/HomePage.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import styles from "@/pages/HomePage/HomePage.module.scss";
1212

1313
import { useScanDataStore } from "@/store/useScanDataStore";
1414

15+
import { gTagLogEvent } from "@/utils/gtag";
16+
1517
const SHARE_TEXT =
1618
"영수증을 촬영하면 AI가 자동으로 맛집 리뷰를 생성! 🍽️✨ 간편하게 추억을 남기고, 나만의 미식 기록을 완성하세요. 미식 경험을 더욱 스마트하게, 미식 MISIK!";
1719

@@ -36,9 +38,11 @@ const HomePage = () => {
3638
<>
3739
<Navbar>
3840
<Navbar.RightButton
39-
onClick={() =>
40-
send({ type: AppBridgeMessageType.SHARE, payload: { shareText: SHARE_TEXT } })
41-
}
41+
onClick={() => {
42+
gTagLogEvent("share_button");
43+
44+
send({ type: AppBridgeMessageType.SHARE, payload: { shareText: SHARE_TEXT } });
45+
}}
4246
>
4347
<Text variant="bodySm" color="secondary">
4448
앱 공유하기
@@ -64,6 +68,8 @@ const HomePage = () => {
6468
text="갤러리"
6569
iconName="gallery"
6670
onClick={() => {
71+
gTagLogEvent("gallery_button");
72+
6773
send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" });
6874

6975
send({ type: AppBridgeMessageType.RECEIVE_SCAN_RESULT, payload: { result: "" } });
@@ -73,6 +79,8 @@ const HomePage = () => {
7379
text="카메라"
7480
iconName="camera"
7581
onClick={() => {
82+
gTagLogEvent("camera_button");
83+
7684
send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
7785

7886
send({ type: AppBridgeMessageType.RECEIVE_SCAN_RESULT, payload: { result: "" } });

‎src/pages/LoadingPage/LoadingPage.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
1414
import { useCreateReviewStore } from "@/store/useReviewStore";
1515
import { useScanDataStore } from "@/store/useScanDataStore";
1616

17+
import { gTagLogEvent } from "@/utils/gtag";
18+
1719
const LoadingPage = () => {
1820
const { send } = useAppBridge();
1921

@@ -24,6 +26,8 @@ const LoadingPage = () => {
2426
const { resetScanData } = useScanDataStore();
2527

2628
const handleNavigateToHome = () => {
29+
gTagLogEvent("loading_close_button");
30+
2731
resetGenerateReviewData();
2832
resetCreateReviewData();
2933
resetScanData();

‎src/pages/ReceiptEditPage/ReceiptEditPage.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import styles from "@/pages/ReceiptEditPage/ReceiptEditPage.module.scss";
1313
import { useCreateReviewStore } from "@/store/useReviewStore";
1414
import { useScanDataStore } from "@/store/useScanDataStore";
1515

16+
import { gTagLogEvent } from "@/utils/gtag";
17+
1618
const ReceiptEditPage = () => {
1719
const { navigateToHome, navigateToSelectTag } = useRoute();
1820

@@ -81,7 +83,13 @@ const ReceiptEditPage = () => {
8183
return (
8284
<>
8385
<Navbar>
84-
<Navbar.LeftButton onClick={handleNavigateToHome}>
86+
<Navbar.LeftButton
87+
onClick={() => {
88+
gTagLogEvent("receipt_edit_home_button");
89+
90+
handleNavigateToHome();
91+
}}
92+
>
8593
<Icon name="leftArrow" />
8694
</Navbar.LeftButton>
8795
</Navbar>
@@ -132,7 +140,11 @@ const ReceiptEditPage = () => {
132140
key="scan"
133141
text="다시 스캔하기"
134142
variant="secondary"
135-
onClick={handleNavigateToHome}
143+
onClick={() => {
144+
gTagLogEvent("receipt_edit_rescan_button");
145+
146+
handleNavigateToHome();
147+
}}
136148
/>
137149
<Button
138150
key="confirm"

‎src/pages/ReceiptInputPage/ReceiptInputPage.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import styles from "@/pages/ReceiptInputPage/ReceiptInputPage.module.scss";
1313
import { useCreateReviewStore } from "@/store/useReviewStore";
1414
import { useScanDataStore } from "@/store/useScanDataStore";
1515

16+
import { gTagLogEvent } from "@/utils/gtag";
17+
1618
const ReceiptInputPage = () => {
1719
const { navigateToHome, navigateToSelectTag } = useRoute();
1820

@@ -65,6 +67,7 @@ const ReceiptInputPage = () => {
6567
};
6668

6769
const handleHomeClick = () => {
70+
gTagLogEvent("receipt_input_back_button");
6871
resetScanData();
6972
navigateToHome();
7073
};

‎src/pages/RecognitionFailPage/RecognitionFailPage.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import styles from "@/pages/RecognitionFailPage/RecognitionFailPage.module.scss"
1111

1212
import { useScanDataStore } from "@/store/useScanDataStore";
1313

14+
import { gTagLogEvent } from "@/utils/gtag";
15+
1416
const RecognitionFailPage = () => {
1517
const { send } = useAppBridge();
1618

@@ -19,10 +21,17 @@ const RecognitionFailPage = () => {
1921
const { resetScanData } = useScanDataStore();
2022

2123
const handleNavigateToHome = () => {
24+
gTagLogEvent("recognition_fail_close_button");
2225
resetScanData();
2326
navigateToHome();
2427
};
2528

29+
const handleNavgateToReceiptInput = () => {
30+
gTagLogEvent("receipt_input_button");
31+
resetScanData();
32+
navgateToReceiptInput();
33+
};
34+
2635
return (
2736
<>
2837
<Navbar>
@@ -44,11 +53,15 @@ const RecognitionFailPage = () => {
4453
<img src="/assets/img/img-recognition-fail.png" alt="recognitionFailImg" />
4554
</div>
4655
<div className={styles.Bottom}>
47-
<Button text="직접 입력하기" variant="secondary" onClick={navgateToReceiptInput} />
56+
<Button text="직접 입력하기" variant="secondary" onClick={handleNavgateToReceiptInput} />
4857
<Button
4958
text="다시 촬영하기"
5059
variant="secondary"
51-
onClick={() => send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" })}
60+
onClick={() => {
61+
gTagLogEvent("camera_retry_button");
62+
63+
send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
64+
}}
5265
/>
5366
</div>
5467
</div>

‎src/pages/ReviewResultPage/ReviewResultPage.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import styles from "@/pages/ReviewResultPage/ReviewResultPage.module.scss";
1818
import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
1919
import { useCreateReviewStore } from "@/store/useReviewStore";
2020

21+
import { gTagLogEvent } from "@/utils/gtag";
22+
2123
import type { Options as ConfettiOptions } from "canvas-confetti";
2224

2325
export default function ReviewResultPage() {
@@ -47,6 +49,8 @@ export default function ReviewResultPage() {
4749
};
4850

4951
const handleRetryCreateReview = () => {
52+
gTagLogEvent("review_retry_button");
53+
5054
resetGenerateReviewData();
5155

5256
send({
@@ -88,6 +92,8 @@ export default function ReviewResultPage() {
8892
iconName="paste"
8993
size="sm"
9094
onClick={() => {
95+
gTagLogEvent("copy_button");
96+
9197
send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
9298

9399
addToast("리뷰가 복사되었어요");
@@ -97,7 +103,13 @@ export default function ReviewResultPage() {
97103
</div>
98104
<div className={styles.Bottom}>
99105
<Button text="다시생성" variant="secondary" onClick={handleRetryCreateReview} />
100-
<Button text="홈으로 가기" onClick={handleOpen} />
106+
<Button
107+
text="홈으로 가기"
108+
onClick={() => {
109+
gTagLogEvent("home_button");
110+
handleOpen();
111+
}}
112+
/>
101113
</div>
102114

103115
<HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />

‎src/pages/SelectStylePage/SelectStylePage.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,18 @@ import styles from "@/pages/SelectStylePage/SelectStylePage.module.scss";
1717

1818
import { useCreateReviewStore } from "@/store/useReviewStore";
1919

20+
import { gTagLogEvent } from "@/utils/gtag";
21+
2022
interface StyleProps {
2123
name: string;
2224
image: string;
25+
tagId: string;
2326
}
2427

2528
const IMG_STYLE_DATA = [
26-
{ name: "친근한 말투", image: "/assets/img/img-style-friendly.webp" },
27-
{ name: "믿음직한 말투", image: "/assets/img/img-style-trust.webp" },
28-
{ name: "귀여운 말투", image: "/assets/img/img-style-cute.webp" },
29+
{ name: "친근한 말투", image: "/assets/img/img-style-friendly.webp", tagId: "friendly_button" },
30+
{ name: "믿음직한 말투", image: "/assets/img/img-style-trust.webp", tagId: "trust_button" },
31+
{ name: "귀여운 말투", image: "/assets/img/img-style-cute.webp", tagId: "cute_button" },
2932
];
3033

3134
const STYLE_NAME_MAPPING: { [key: string]: string } = {
@@ -52,6 +55,8 @@ const SelectStylePage = () => {
5255
};
5356

5457
const handleCreateReview = () => {
58+
gTagLogEvent("create_review_button");
59+
5560
const mappedStyle = STYLE_NAME_MAPPING[selectedStyle.name];
5661

5762
if (mappedStyle) {
@@ -85,7 +90,12 @@ const SelectStylePage = () => {
8590
</div>
8691

8792
<div className={styles.ExampleButtonBox}>
88-
<button onClick={handleOpen}>
93+
<button
94+
onClick={() => {
95+
gTagLogEvent("style_example_button");
96+
handleOpen();
97+
}}
98+
>
8999
<Text variant="bodyXsm" color="secondary">
90100
말투 예시보기
91101
</Text>
@@ -105,7 +115,10 @@ const SelectStylePage = () => {
105115
className={classNames({
106116
[styles.isSelected]: selectedStyle.name === style.name,
107117
})}
108-
onClick={() => handleStyleClick(style)}
118+
onClick={() => {
119+
gTagLogEvent(style.tagId);
120+
handleStyleClick(style);
121+
}}
109122
>
110123
<Text
111124
color={selectedStyle.name === style.name ? "white" : "secondary"}

‎src/pages/SelectTagPage/SelectTagPage.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import styles from "@/pages/SelectTagPage/SelectTagPage.module.scss";
1313

1414
import { useCreateReviewStore } from "@/store/useReviewStore";
1515

16+
import { gTagLogEvent } from "@/utils/gtag";
17+
1618
const SelectTagPage = () => {
1719
const { navigateToSelectStyle, navigateToBack } = useRoute();
1820

@@ -75,7 +77,13 @@ const SelectTagPage = () => {
7577
isSelect={hashTag.includes(tag)}
7678
/>
7779
))}
78-
<Tag variant="add" onClick={() => setIsBottomSheetOpen(true)} />
80+
<Tag
81+
variant="add"
82+
onClick={() => {
83+
gTagLogEvent("add_tag_button");
84+
setIsBottomSheetOpen(true);
85+
}}
86+
/>
7987
</div>
8088
</div>
8189

‎src/types/global.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ declare global {
2727
parsed: Array<{ key: string; value: string }>;
2828
}
2929
interface Window {
30+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
31+
gtag: (...args: any[]) => void;
3032
response?: {
3133
receiveScanResult: (jsonData: string) => void;
3234
receiveGeneratedReview: (jsonData: string) => void;

0 commit comments

Comments
 (0)