feat: amplitude tracking 코드 작성 (#733)

* feat: amplitude 트래킹 코드 구현

Co-authored-by: JinHo Kim <[email protected]>

* chore: 불필요한 console.log제거

* feat: 이벤트 생성, 시작버튼 클릭, 지출내역 체류시간 track 함수 제작

* feat: track 코드에 진입 브라우저 프로퍼티 추가

* feat: 정산 시작하기 track 코드 추가

* feat: 이벤트 로더에서 총액 계산

* feat: 이벤트 초대 클릭 track 코드 추가

* feat: 지출내역 시작, 종료 tracking 코드 추가

* feat: 송금하기 tracking 코드 추가

* chore: 필요하지 않은 의존성 제거

* style: lint 맞춰줌

* fix: 개발 편의로 인한 sentry 주석 해제

---------

Co-authored-by: 이태훈 <[email protected]>
Co-authored-by: JinHo Kim <[email protected]>

client/index.html

@@ -16,15 +16,6 @@
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:alt" content="행댕이" />
     <link rel="icon" href="favicon.ico" type="image/x-icon" />
-    <script src="https://cdn.amplitude.com/libs/analytics-browser-2.9.3-min.js.gz"></script>
-    <script src="https://cdn.amplitude.com/libs/plugin-session-replay-browser-1.6.8-min.js.gz"></script>
-    <script src="https://cdn.amplitude.com/libs/plugin-autocapture-browser-1.0.0-min.js.gz"></script>
-    <script>
-      window.amplitude.add(window.sessionReplay.plugin({sampleRate: 1})).promise.then(function () {
-        window.amplitude.add(window.amplitudeAutocapturePlugin.plugin());
-        window.amplitude.init('<%= process.env.AMPLITUDE_KEY %>');
-      });
-    </script>
     <script
       src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
       integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"

client/package.json

@@ -85,6 +85,7 @@
     "webpack-merge": "^6.0.1"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.11.7",
     "@emotion/react": "^11.11.4",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-query": "^5.51.23",

client/src/App.tsx

@@ -6,6 +6,7 @@ import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoun
 import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
 import ToastContainer from '@components/Toast/ToastContainer';
 import KakaoInitializer from '@components/KakaoInitializer/KakaoInitializer';
+import AmplitudeInitializer from '@components/AmplitudeInitializer/AmplitudeInitializer';
 
 import {HDesignProvider} from '@HDesign/index';
 
@@ -24,9 +25,11 @@ const App: React.FC = () => {
             <ReactQueryDevtools initialIsOpen={false} />
             <NetworkStateCatcher />
             <ToastContainer />
-            <KakaoInitializer>
-              <Outlet />
-            </KakaoInitializer>
+            <AmplitudeInitializer>
+              <KakaoInitializer>
+                <Outlet />
+              </KakaoInitializer>
+            </AmplitudeInitializer>
           </QueryClientBoundary>
         </ErrorCatcher>
       </UnPredictableErrorBoundary>

client/src/components/AmplitudeInitializer/AmplitudeInitializer.tsx

@@ -0,0 +1,17 @@
+import {useEffect} from 'react';
+
+import {useAmplitudeStore} from '@store/amplitudeStore';
+
+const AmplitudeInitializer = ({children}: React.PropsWithChildren) => {
+  const {amplitude} = useAmplitudeStore();
+
+  useEffect(() => {
+    amplitude.init(process.env.AMPLITUDE_KEY, undefined, {
+      defaultTracking: true,
+    });
+  }, []);
+
+  return children;
+};
+
+export default AmplitudeInitializer;

client/src/components/Loader/EventLoader.tsx

@@ -1,9 +1,13 @@
 import {useQueries} from '@tanstack/react-query';
+import {useEffect} from 'react';
 
 import {requestGetEvent} from '@apis/request/event';
 import {requestGetReports} from '@apis/request/report';
 import {requestGetSteps} from '@apis/request/step';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
+import {requestGetAllMembers} from '@apis/request/member';
+
+import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
 
@@ -23,9 +27,23 @@ const EventLoader = ({children, ...props}: React.PropsWithChildren<WithErrorHand
         queryKey: [QUERY_KEYS.steps],
         queryFn: () => requestGetSteps({eventId, ...props}),
       },
+      {
+        queryKey: [QUERY_KEYS.allMembers],
+        queryFn: () => requestGetAllMembers({eventId, ...props}),
+      },
     ],
   });
 
+  const {updateTotalExpenseAmount} = useTotalExpenseAmountStore();
+
+  const stepsData = queries[2];
+
+  useEffect(() => {
+    if (stepsData.isSuccess && stepsData.data) {
+      updateTotalExpenseAmount(stepsData.data);
+    }
+  }, [stepsData.data, stepsData.isSuccess, updateTotalExpenseAmount]);
+
   const isLoading = queries.some(query => query.isLoading === true);
 
   return !isLoading && children;

client/src/hooks/queries/step/useRequestGetSteps.ts

@@ -1,30 +1,20 @@
 import {useQuery} from '@tanstack/react-query';
-import {useEffect} from 'react';
 
 import {requestGetSteps} from '@apis/request/step';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
-import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore';
-
 import getEventIdByUrl from '@utils/getEventIdByUrl';
 
 import QUERY_KEYS from '@constants/queryKeys';
 
 const useRequestGetSteps = ({...props}: WithErrorHandlingStrategy | null = {}) => {
   const eventId = getEventIdByUrl();
-  const {updateTotalExpenseAmount} = useTotalExpenseAmountStore();
 
   const queryResult = useQuery({
     queryKey: [QUERY_KEYS.steps],
     queryFn: () => requestGetSteps({eventId, ...props}),
   });
 
-  useEffect(() => {
-    if (queryResult.isSuccess && queryResult.data) {
-      updateTotalExpenseAmount(queryResult.data);
-    }
-  }, [queryResult.data, queryResult.isSuccess, updateTotalExpenseAmount]);
-
   return {
     steps: queryResult.data ?? [],
     ...queryResult,

client/src/hooks/useAmplitude.ts

@@ -0,0 +1,83 @@
+import {useAmplitudeStore} from '@store/amplitudeStore';
+
+import detectBrowser from '@utils/detectBrowser';
+
+type EventUniqueData = {
+  eventName: string;
+  eventToken: string;
+};
+
+type ShareMethod = 'link' | 'kakao';
+
+export type EventSummary = EventUniqueData & {
+  totalExpenseAmount: number; // 총 지출금액
+  allMembersCount: number; // 행사에 참여한 총 인원
+  billsCount: number; // 총 지출내역 수
+  isAdmin: boolean; // 관리자 여부
+  shareMethod: ShareMethod; // 공유 방법
+};
+
+type SendMethod = 'clipboard' | 'toss' | 'kakaopay';
+
+type SendMoneyData = EventUniqueData & {
+  sendMethod: SendMethod;
+  amount: number;
+};
+
+const useAmplitude = () => {
+  const {amplitude} = useAmplitudeStore();
+  const domainEnv = process.env.NODE_ENV;
+
+  const track = (eventName: string, eventProps: Record<string, any> = {}) => {
+    amplitude.track(eventName, {
+      domain: domainEnv,
+      browser: detectBrowser(),
+      ...eventProps,
+    });
+  };
+
+  const trackStartCreateEvent = () => {
+    track('정산 시작하기 버튼 클릭');
+  };
+
+  const trackCompleteCreateEvent = (eventUniqueData: EventUniqueData) => {
+    track('이벤트 생성 완료', {
+      ...eventUniqueData,
+    });
+  };
+
+  const trackShareEvent = (eventSummary: EventSummary) => {
+    track('이벤트 초대 클릭', {
+      ...eventSummary,
+    });
+  };
+
+  const trackAddBillStart = (eventUniqueData: EventUniqueData) => {
+    track('지출내역 추가 시작', {
+      ...eventUniqueData,
+    });
+  };
+
+  const trackAddBillEnd = (eventUniqueData: EventUniqueData) => {
+    track('지출내역 추가 완료', {
+      ...eventUniqueData,
+    });
+  };
+
+  const trackSendMoney = (sendMoneyData: SendMoneyData) => {
+    track('송금 버튼 클릭', {
+      ...sendMoneyData,
+    });
+  };
+
+  return {
+    trackStartCreateEvent,
+    trackCompleteCreateEvent,
+    trackShareEvent,
+    trackAddBillStart,
+    trackAddBillEnd,
+    trackSendMoney,
+  };
+};
+
+export default useAmplitude;