diff --git a/apps/bottle/src/app/profile/create/page.tsx b/apps/bottle/src/app/profile/create/page.tsx index a87f960..1560d6b 100644 --- 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; -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('/profile/create'); const { mutate } = useProfileMutation({ type: 'create' }); @@ -45,7 +39,7 @@ export default function CreateProfilePage() { { - 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() { { - 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() { { - 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() { { - 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() { { - 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() { { - 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() { { - 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 }); }} /> , ], + // 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 index 834573a..f8bf187 100644 --- 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(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 }; }