feat(bottle): events for create profile

Nexters · Nov 12, 2024 · 609f623 · 609f623
1 parent 541022d
commit 609f623
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 20 deletions.
diff --git a/apps/bottle/src/app/profile/create/page.tsx b/apps/bottle/src/app/profile/create/page.tsx
@@ -15,23 +15,17 @@ import { useFunnel } from '@/features/funnel';
 import { Profile } from '@/models/profile';
 import { User } from '@/models/user';
 import { useProfileMutation } from '@/store/mutation/useProfileMuatation';
-import { sendGTMEvent } from '@next/third-parties/google';
-import { useRouter, usePathname } from 'next/navigation';
+import { sendGAEvent } from '@next/third-parties/google';
+import { useRouter } from 'next/navigation';
 import { useMemo } from 'react';
 
 const MAX_STEPS = 7;
 
 type CreateProfileFunnelValues = Profile & Pick<User, 'kakaoId'>;
 
-const EVENT_NAME = 'create_profile';
-
 export default function CreateProfilePage() {
   const router = useRouter();
-  const pathname = usePathname();
-  useDurationTime(duration => {
-    console.log('duration', duration);
-    sendGTMEvent({ duration, path: pathname }, EVENT_NAME);
-  });
+  const { getTime } = useDurationTime();
 
   const { onNextStep, currentStep, getValue, getValues } = useFunnel<CreateProfileFunnelValues>('/profile/create');
   const { mutate } = useProfileMutation({ type: 'create' });
@@ -45,7 +39,7 @@ export default function CreateProfilePage() {
           <Job
             initialValue={getValue('job')}
             onNext={job => {
-              sendGTMEvent('1->2', EVENT_NAME);
+              sendGAEvent('event', 'profile_create_next_click', { value: '1->2' });
               onNextStep('job', job);
             }}
             ctaButtonText="다음"
@@ -59,7 +53,7 @@ export default function CreateProfilePage() {
           <Height
             initialValue={getValue('height')}
             onNext={height => {
-              sendGTMEvent('2->3', EVENT_NAME);
+              sendGAEvent('event', 'profile_create_next_click', { value: '2->3' });
               onNextStep('height', height);
             }}
             ctaButtonText="다음"
@@ -73,7 +67,7 @@ export default function CreateProfilePage() {
           <Region
             initialValue={getValue('region')}
             onNext={region => {
-              sendGTMEvent('3->4', EVENT_NAME);
+              sendGAEvent('event', 'profile_create_next_click', { value: '3->4' });
               onNextStep('region', region);
             }}
             ctaButtonText="다음"
@@ -87,7 +81,7 @@ export default function CreateProfilePage() {
           <MBTI
             initialValue={getValue('mbti')}
             onNext={mbti => {
-              sendGTMEvent('4->5', EVENT_NAME);
+              sendGAEvent('event', 'profile_create_next_click', { value: '4->5' });
               onNextStep('mbti', mbti);
             }}
             ctaButtonText="다음"
@@ -101,7 +95,7 @@ export default function CreateProfilePage() {
           <Keywords
             initialValue={getValue('keyword')}
             onNext={keyword => {
-              sendGTMEvent('5->6', EVENT_NAME);
+              sendGAEvent('event', 'profile_create_next_click', { value: '5->6' });
               onNextStep('keyword', keyword);
             }}
             ctaButtonText="다음"
@@ -115,7 +109,7 @@ export default function CreateProfilePage() {
           <Interests
             initialValue={getValue('interest')}
             onNext={interest => {
-              sendGTMEvent('6->7', EVENT_NAME);
+              sendGAEvent('event', 'profile_create_next_click', { value: '6->7' });
               onNextStep('interest', interest);
             }}
             ctaButtonText="다음"
@@ -129,13 +123,16 @@ export default function CreateProfilePage() {
           <KakaoId
             initialValue={getValue('kakaoId')}
             onNext={kakaoId => {
-              sendGTMEvent('7->complete', EVENT_NAME);
+              sendGAEvent('event', 'profile_create_next_click', { value: '6->완료' });
+              const duration = getTime();
+              sendGAEvent('event', 'profile_create_duration', { value: duration });
               mutate({ ...(getValues() as Profile), kakaoId });
             }}
           />
         </ProfileLayout.Contents>
       </ProfileLayout>,
     ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [getValue, getValues, mutate, onNextStep, router.back]
   );
 

diff --git a/apps/bottle/src/features/analystics/useDurationTime.ts b/apps/bottle/src/features/analystics/useDurationTime.ts
@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 
 const MILLISECONDS_PER_SECOND = 1000;
 
-export function useDurationTime(onEnd: (duration: number) => void) {
+export function useDurationTime() {
   const timeRef = useRef<number>(0);
 
   useEffect(() => {
@@ -12,9 +12,8 @@ export function useDurationTime(onEnd: (duration: number) => void) {
 
     return () => {
       clearInterval(timer);
-      onEnd(timeRef.current);
     };
-  }, [onEnd]);
+  }, []);
 
-  return {};
+  return { getTime: () => timeRef.current };
 }