diff --git a/app/meeting/[id]/page.tsx b/app/meeting/[id]/page.tsx index 4d46da8..0e7af71 100644 --- a/app/meeting/[id]/page.tsx +++ b/app/meeting/[id]/page.tsx @@ -16,7 +16,6 @@ import { useToast } from '@/hooks/useToast'; import Toast from '@/components/ui/toast'; import { getMeetingUserId, removeMeetingUserId } from '@/lib/storage'; import { sendGAEvent } from '@next/third-parties/google'; - interface StationInfo { line: string; name: string; @@ -170,6 +169,21 @@ export default function Page() { show(); return; } + + if (typeof window !== 'undefined') { + const calculationType = id ? 'recalculated' : 'first'; + const isHost = localStorage.getItem(`is_host_${id}`) === 'true'; + const userRole = isHost ? 'host' : 'participant'; + const browserId = localStorage.getItem('browser_id'); + + sendGAEvent('event', 'midpoint_calculated', { + meeting_url_id: id, + browser_id: browserId, + role: userRole, + calculation_type: calculationType, + }); + } + router.push(`/result/${id}`); }; diff --git a/app/recommend/page.tsx b/app/recommend/page.tsx index f726b29..9e3b47c 100644 --- a/app/recommend/page.tsx +++ b/app/recommend/page.tsx @@ -6,6 +6,7 @@ import Image from 'next/image'; import KakaoMapRecommend from '@/components/map/kakaoMapRecommend'; import { useRecommend } from '@/hooks/api/query/useRecommend'; import { useCheckMeeting } from '@/hooks/api/query/useCheckMeeting'; +import { sendGAEvent } from '@next/third-parties/google'; function RecommendContent() { const router = useRouter(); @@ -139,8 +140,28 @@ function RecommendContent() { router.back(); }; - const handleOpenKakaoMap = (e: React.MouseEvent, placeUrl?: string) => { + const handleOpenKakaoMap = ( + e: React.MouseEvent, + placeUrl?: string, + place?: (typeof places)[0] + ) => { e.stopPropagation(); + + // 카카오맵에서 보기 클릭 시 GA 전송 (external_map_opened) + if (typeof window !== 'undefined' && meetingId && place) { + const browserId = localStorage.getItem('browser_id'); + const isHost = localStorage.getItem(`is_host_${meetingId}`) === 'true'; + const userRole = isHost ? 'host' : 'participant'; + const candidateId = `place_${String(place.id).padStart(2, '0')}`; + + sendGAEvent('event', 'external_map_opened', { + meeting_url_id: meetingId, + user_cookie_id: browserId, + role: userRole, + candidate_id: candidateId, + }); + } + if (placeUrl) { window.open(placeUrl, '_blank', 'noopener,noreferrer'); } else { @@ -148,6 +169,20 @@ function RecommendContent() { } }; + // 장소 리스트 중 하나 클릭 시 GA 전송 (place_list_viewed) + const handlePlaceClick = (place: (typeof places)[0]) => { + setSelectedPlaceId(place.id); + if (meetingId) { + const candidateId = `place_${String(place.id).padStart(2, '0')}`; + sendGAEvent('event', 'place_list_viewed', { + meeting_url_id: meetingId, + candidate_id: candidateId, + place_category: place.category, + rank_order: place.id, + }); + } + }; + return (
@@ -194,7 +229,7 @@ function RecommendContent() { {places.map((place) => (
setSelectedPlaceId(place.id)} + onClick={() => handlePlaceClick(place)} className={`flex cursor-pointer flex-col gap-2 rounded border p-4 ${ selectedPlaceId === place.id ? 'border-blue-5 border-2' @@ -247,7 +282,7 @@ function RecommendContent() { {/* 하단 버튼은 조건부 렌더링 */} {selectedPlaceId === place.id ? (