Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough온보딩 단계 컴포넌트 3개에 Google Analytics 이벤트 추적을 추가했습니다. MainCard에서는 단계 진행 시 이벤트를 발송하고, AlarmStep과 SocialLoginStep에서는 컴포넌트 마운트 시 GA 이벤트를 전송합니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx (1)
10-14:sendGAEvent의 세 인수가 모두 동일한 문자열입니다
sendGAEvent(action, category, label, value)시그니처에서category와label은 Google Analytics에서 이벤트를 필터링하고 분류하기 위한 별도의 파라미터입니다. 세 값을 모두 동일하게 전달하면 이러한 필드들의 분석 가치가 사라집니다.동일한 패턴이
AlarmStep,MainCard등 여러 컴포넌트에서 반복되므로, 각 파라미터에 의미있는 서로 다른 값을 할당하여 Analytics 데이터의 구분력을 높이는 것을 권장합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx` around lines 10 - 14, The call to sendGAEvent currently passes the same string for action, category, and label which loses analytic granularity; update calls in SocialLoginStep (and similar occurrences in AlarmStep and MainCard) to supply distinct, meaningful values: use a concise action (e.g., 'social_login_click'), a component/category identifier (e.g., 'onboarding_funnel' or 'social_login_step'), and a descriptive label (e.g., 'google_button' or 'facebook_button') so each parameter reflects its role in sendGAEvent(action, category, label, value); ensure any fourth value is used consistently if needed.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx`:
- Around line 188-192: The sendGAEvent call inside nextStep is firing for ALARM
and MAC steps because it runs before the existing early returns; update nextStep
so sendGAEvent is only invoked for story steps by guarding it with the imported
storySteps (or equivalent check using idx), e.g., check that the current idx is
within storySteps before calling sendGAEvent; keep existing shouldSkipMacStep
and isFinalStep early returns intact and reference sendGAEvent, nextStep,
shouldSkipMacStep, isFinalStep, storySteps and idx when making the change.
---
Duplicate comments:
In `@apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx`:
- Around line 11-15: The call to sendGAEvent in AlarmStep.tsx is passing the
same string for all three parameters; update the call to supply distinct,
meaningful values matching sendGAEvent's signature (e.g., category, action,
label) instead of repeating 'onboard-alarm-step' — mirror the corrected pattern
from SocialLoginStep.tsx and use identifiers like 'onboard', 'alarm-step', and a
contextual label such as 'alarm-permission-granted' or 'alarm-permission-prompt'
to reflect the actual event semantics.
---
Nitpick comments:
In `@apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx`:
- Around line 10-14: The call to sendGAEvent currently passes the same string
for action, category, and label which loses analytic granularity; update calls
in SocialLoginStep (and similar occurrences in AlarmStep and MainCard) to supply
distinct, meaningful values: use a concise action (e.g., 'social_login_click'),
a component/category identifier (e.g., 'onboarding_funnel' or
'social_login_step'), and a descriptive label (e.g., 'google_button' or
'facebook_button') so each parameter reflects its role in sendGAEvent(action,
category, label, value); ensure any fourth value is used consistently if needed.
| sendGAEvent( | ||
| `onboard-step-${idx + 1}`, | ||
| `onboard-step-${idx + 1}`, | ||
| `onboard-step-${idx + 1}` | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find apps/client/src/pages/onBoarding -type f -name "*.ts*" | head -20Repository: Pinback-Team/pinback-client
Length of output: 1031
🏁 Script executed:
cat apps/client/src/pages/onBoarding/constants/stepOrder.ts 2>/dev/null || \
cat apps/client/src/pages/onBoarding/constants.ts 2>/dev/null || \
rg -l "stepOrder|storySteps" apps/client/src/pages/onBoarding --type tsRepository: Pinback-Team/pinback-client
Length of output: 196
🏁 Script executed:
rg -A 20 "export.*stepOrder|export.*storySteps|export.*Step\s*=" apps/client/src/pages/onBoarding --type tsRepository: Pinback-Team/pinback-client
Length of output: 2228
🏁 Script executed:
cat -n apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx | head -250Repository: Pinback-Team/pinback-client
Length of output: 9164
🏁 Script executed:
cat -n apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx | sed -n '150,200p'Repository: Pinback-Team/pinback-client
Length of output: 1789
🏁 Script executed:
cat -n apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx | sed -n '155,220p'Repository: Pinback-Team/pinback-client
Length of output: 2240
🏁 Script executed:
cat -n apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx | grep -A 10 -B 5 "sendGAEvent\|onboard-alarm"Repository: Pinback-Team/pinback-client
Length of output: 1065
🏁 Script executed:
cat -n apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx | head -80Repository: Pinback-Team/pinback-client
Length of output: 1556
🏁 Script executed:
cat -n apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx | sed -n '235,260p'Repository: Pinback-Team/pinback-client
Length of output: 898
🏁 Script executed:
cat -n apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx | sed -n '235,280p'Repository: Pinback-Team/pinback-client
Length of output: 948
스토리 단계 외 ALARM·MAC 단계에서 의도치 않은 GA 이벤트가 발생합니다
nextStep의 sendGAEvent 호출은 두 가지 early-return(shouldSkipMacStep, isFinalStep) 이후에만 가드됩니다. 따라서 Mac 사용자가 다음 단계로 진행할 때:
- ALARM 단계 (idx = 4):
shouldSkipMacStep이false가 되어sendGAEvent('onboard-step-5', ...)가 발생합니다.AlarmStep.tsx의useEffect가 이미'onboard-alarm-step'을 발송하므로, 같은 스텝에서 두 번의 이벤트가 발생합니다. - MAC 단계 (idx = 5): early-return이 없어
sendGAEvent('onboard-step-6', ...)가 발생합니다.
onboard-step-4 이상의 이벤트명은 PR의 의도(onboard-step-1~3은 스토리 단계 전용)와 맞지 않아 Analytics 데이터를 오염시킵니다.
이미 import된 storySteps로 가드를 추가하면 해결됩니다:
🐛 제안 수정
setDirection(1);
setStep(next);
navigate(`/onboarding?step=${next}`);
+ if (storySteps.includes(step)) {
sendGAEvent(
`onboard-step-${idx + 1}`,
`onboard-step-${idx + 1}`,
`onboard-step-${idx + 1}`
);
+ }
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| sendGAEvent( | |
| `onboard-step-${idx + 1}`, | |
| `onboard-step-${idx + 1}`, | |
| `onboard-step-${idx + 1}` | |
| ); | |
| if (storySteps.includes(step)) { | |
| sendGAEvent( | |
| `onboard-step-${idx + 1}`, | |
| `onboard-step-${idx + 1}`, | |
| `onboard-step-${idx + 1}` | |
| ); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx` around lines
188 - 192, The sendGAEvent call inside nextStep is firing for ALARM and MAC
steps because it runs before the existing early returns; update nextStep so
sendGAEvent is only invoked for story steps by guarding it with the imported
storySteps (or equivalent check using idx), e.g., check that the current idx is
within storySteps before calling sendGAEvent; keep existing shouldSkipMacStep
and isFinalStep early returns intact and reference sendGAEvent, nextStep,
shouldSkipMacStep, isFinalStep, storySteps and idx when making the change.
2 participants
📌 Related Issues
📄 Tasks
온보딩 스텝별 Gtag 추가했습니다!
⭐ PR Point (To Reviewer)
기획자 로그 네이밍 혼돈을 막기 위해, gtag 네임, 페이지 네임 등을 모두 통일하였습니다.
📷 Screenshot
Summary by CodeRabbit
릴리스 노트