chore: GA4 이벤트 트래킹 작업 #46
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,6 +10,7 @@ | |
| import { setMeetingUserId } from '@/lib/storage'; | ||
| import Image from 'next/image'; | ||
| import { getRandomHexColor } from '@/lib/color'; | ||
| import { sendGAEvent } from '@next/third-parties/google'; | ||
|
|
||
| interface JoinFormProps { | ||
| meetingId: string; | ||
|
|
@@ -65,6 +66,28 @@ | |
| e.preventDefault(); | ||
| if (!isFormValid || !meetingId) return; | ||
|
|
||
| // ⭐️ 1. 비즈니스 로직 실행 전 GA 이벤트 선(先) 전송! | ||
| if (typeof window !== 'undefined') { | ||
| let browserId = localStorage.getItem('browser_id'); | ||
| if (!browserId) { | ||
| browserId = `bid_${Math.random().toString(36).substring(2, 15)}${Date.now().toString(36)}`; | ||
| localStorage.setItem('browser_id', browserId); | ||
| } | ||
|
|
||
| // ⭐️ 개발자님의 완벽한 엣지케이스 방어 로직! | ||
| // 로컬스토리지에 '이 방의 생성자(방장)'라는 징표가 있는지 확인 | ||
| const isHost = localStorage.getItem(`is_host_${meetingId}`) === 'true'; | ||
| const userRole = isHost ? 'host' : 'participant'; | ||
|
|
||
| sendGAEvent('event', 'participant_registration', { | ||
| meeting_url_id: meetingId, | ||
| user_cookie_id: browserId, // 생성 때 썼던 그 browserId와 일치하게 됨! | ||
| role: userRole, // 완벽하게 방장/참여자 구분 완료 | ||
| remember_me: isRemembered ? 'yes' : 'no', | ||
| }); | ||
| } | ||
|
|
||
| // ⭐️ 2. 기존 참여 API 호출 로직 | ||
|
Comment on lines
+69
to
+90
There was a problem hiding this comment. 등록 성공 이벤트를 API 호출 전에 전송하면 지표 왜곡과 기능 차단 위험이 있습니다. 현재 구조는 (1) 실제 등록 실패도 🔧 제안 수정안- if (typeof window !== 'undefined') {
- let browserId = localStorage.getItem('browser_id');
- if (!browserId) {
- browserId = `bid_${Math.random().toString(36).substring(2, 15)}${Date.now().toString(36)}`;
- localStorage.setItem('browser_id', browserId);
- }
-
- const isHost = localStorage.getItem(`is_host_${meetingId}`) === 'true';
- const userRole = isHost ? 'host' : 'participant';
-
- sendGAEvent('event', 'participant_registration', {
- meeting_url_id: meetingId,
- user_cookie_id: browserId,
- role: userRole,
- remember_me: isRemembered ? 'yes' : 'no',
- });
- }
-
try {
// `@ts-ignore`
const result = await participantEnter.mutateAsync({
meetingId,
data: {
userId: name,
password,
},
});
if (result.success) {
+ try {
+ if (typeof window !== 'undefined') {
+ let browserId = localStorage.getItem('browser_id');
+ if (!browserId) {
+ browserId = `bid_${Math.random().toString(36).substring(2, 15)}${Date.now().toString(36)}`;
+ localStorage.setItem('browser_id', browserId);
+ }
+ const isHost = localStorage.getItem(`is_host_${meetingId}`) === 'true';
+ const userRole = isHost ? 'host' : 'participant';
+ sendGAEvent('event', 'participant_registration', {
+ meeting_url_id: meetingId,
+ user_cookie_id: browserId,
+ role: userRole,
+ remember_me: isRemembered ? 'yes' : 'no',
+ });
+ }
+ } catch (analyticsError) {
+ console.warn('GA tracking skipped:', analyticsError);
+ }
setMeetingUserId(meetingId, name, isRemembered);
router.push(`/meeting/${meetingId}`);
} else {Also applies to: 91-103 🤖 Prompt for AI Agents |
||
| try { | ||
| // @ts-ignore | ||
| const result = await participantEnter.mutateAsync({ | ||
|
|
@@ -82,7 +105,7 @@ | |
| setErrorMessage(result.data?.message || '모임 참여에 실패했습니다. 다시 시도해주세요.'); | ||
| show(); | ||
| } | ||
| } catch (error: any) { | ||
| const errorData = error.data || error.response?.data; | ||
| setErrorMessage(errorData?.message || '모임 참여에 실패했습니다. 다시 시도해주세요.'); | ||
| show(); | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,7 @@ import Link from 'next/link'; | |
| import Toast from '@/components/ui/toast'; | ||
| import { useShareMeeting } from '@/hooks/api/query/useShareMeeting'; | ||
| import Image from 'next/image'; | ||
| import { sendGAEvent } from '@next/third-parties/google'; | ||
|
|
||
| interface ShareContentProps { | ||
| id: string; | ||
|
|
@@ -14,6 +15,28 @@ export default function ShareContent({ id }: ShareContentProps) { | |
| // useParams() 대신 부모(Page)에서 전달받은 id 사용 | ||
| const { shareUrl, isError, isLoading, handleCopyLink, isVisible } = useShareMeeting(id); | ||
|
|
||
| // 복사 버튼 클릭 시 실행할 래퍼 함수 생성 | ||
| const handleCopyClickWithGA = () => { | ||
| handleCopyLink(); | ||
|
|
||
| // 2. GA4 이벤트 전송 로직 인라인 처리 | ||
| if (typeof window !== 'undefined') { | ||
| // 브라우저 식별자(browser_id) 확인 및 생성 (Get or Create) | ||
| let browserId = localStorage.getItem('browser_id'); | ||
| if (!browserId) { | ||
| const randomStr = Math.random().toString(36).substring(2, 15); | ||
| browserId = `bid_${randomStr}${Date.now().toString(36)}`; | ||
| localStorage.setItem('browser_id', browserId); | ||
| } | ||
|
|
||
| sendGAEvent('event', 'share_link', { | ||
| meeting_url_id: id, | ||
| location: 'creation_complete', | ||
| browser_id: browserId, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| if (isError) notFound(); | ||
| if (isLoading) return null; | ||
|
|
||
|
|
@@ -44,7 +67,7 @@ export default function ShareContent({ id }: ShareContentProps) { | |
| /> | ||
| <button | ||
| type="button" | ||
| onClick={handleCopyClickWithGA} | ||
| className="bg-gray-1 text-gray-6 border-gray-1 hover:bg-gray-2 cursor-pointer rounded-r-sm border px-3.5 py-3 text-sm font-semibold whitespace-nowrap transition-colors" | ||
| > | ||
| 복사 | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
재촉하기(NUDGE) 액션이
share_link로 집계됩니다.Line 102는 NUDGE 모달 오픈인데 Line 103에서 공유 이벤트(
share_link)를 전송하고 있어 공유 지표가 오염될 수 있습니다. NUDGE 전용 이벤트로 분리하거나 최소한location/event name을 구분해 주세요.🔧 제안 수정안
const handleNudgeClick = (e: React.MouseEvent<HTMLButtonElement>) => { openModal('NUDGE', { meetingId: id }, e); - trackShareEvent(); + if (typeof window !== 'undefined') { + let browserId = localStorage.getItem('browser_id'); + if (!browserId) { + browserId = `bid_${Math.random().toString(36).substring(2, 15)}${Date.now().toString(36)}`; + localStorage.setItem('browser_id', browserId); + } + + sendGAEvent('event', 'nudge_opened', { + meeting_url_id: id, + browser_id: browserId, + location: 'meeting_room', + }); + } };🤖 Prompt for AI Agents