Skip to content

feat: 온보딩 스텝 별 Gtag 추가 #260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jllee000 merged 1 commit into from
Feb 19, 2026
Merged

feat: 온보딩 스텝 별 Gtag 추가 #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Progress, Button } from '@pinback/design-system/ui';
import { Progress, Button, sendGAEvent } from '@pinback/design-system/ui';
import { useState, useEffect, lazy, Suspense } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import SocialLoginStep from './step/SocialLoginStep';
Expand Down Expand Up @@ -185,6 +185,11 @@ const MainCard = () => {
setDirection(1);
setStep(next);
navigate(`/onboarding?step=${next}`);
sendGAEvent(
`onboard-step-${idx + 1}`,
`onboard-step-${idx + 1}`,
`onboard-step-${idx + 1}`
);
Comment on lines +188 to +192
Copy link

@coderabbitai coderabbitai bot Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

find apps/client/src/pages/onBoarding -type f -name "*.ts*" | head -20

Repository: 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 ts

Repository: 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 ts

Repository: Pinback-Team/pinback-client

Length of output: 2228

🏁 Script executed:

cat -n apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx | head -250

Repository: 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 -80

Repository: 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.

Suggested change
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.

};

const prevStep = () => {
Expand Down
9 changes: 9 additions & 0 deletions apps/client/src/pages/onBoarding/components/funnel/step/AlarmStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
import dotori from '/assets/onBoarding/icons/dotori.svg';
import AlarmBox from '../AlarmBox';
import { useEffect } from 'react';
import { sendGAEvent } from '@pinback/design-system/ui';
interface AlarmStepProps {
selected: 1 | 2 | 3;
setSelected: (n: 1 | 2 | 3) => void;
}
const AlarmStep = ({ selected, setSelected }: AlarmStepProps) => {
useEffect(() => {
sendGAEvent(
'onboard-alarm-step',
'onboard-alarm-step',
'onboard-alarm-step'
);
}, []);
return (
<div className="flex flex-col items-center justify-between">
<img src={dotori} className="mb-[1.2rem]" alt="dotori" />
Expand Down
10 changes: 9 additions & 1 deletion apps/client/src/pages/onBoarding/components/funnel/step/SocialLoginStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,16 @@ import GoogleLogo from '/assets/onBoarding/icons/googleLogo.svg';
import { Link } from 'react-router-dom';
import { handleGoogleLogin } from '@shared/utils/handleGoogleLogin';
import { ROUTES_CONFIG } from '@routes/routesConfig';

import { useEffect } from 'react';
import { sendGAEvent } from '@pinback/design-system/ui';
const SocialLoginStep = () => {
useEffect(() => {
sendGAEvent(
'onboard-social-login-step',
'onboard-social-login-step',
'onboard-social-login-step'
);
}, []);
return (
<div className="flex h-full flex-col items-center justify-center">
<img
Expand Down
Loading