홈 페이지 방문 → 회원가입/로그인 → 그룹 생성/참여 → 모멘트 작성 → 코멘트 작성

이벤트 체계
├── 인게이지먼트 이벤트
│   ├── scroll_depth (스크롤 깊이)
│   ├── dwell_start / dwell_end (체류 시간)
│   └── give_likes (좋아요)
│
├── 전환 이벤트
│   ├── click_cta (CTA 클릭)
│   ├── click_navigation (네비게이션 클릭)
│   ├── click_auth (인증 버튼 클릭)
│   └── open_composer (작성 시작)
│
├── 완료 이벤트
│   ├── publish_moment (모멘트 발행)
│   └── submit_comment (코멘트 작성)
│
├── 이탈 이벤트
│   └── abandon_composer (작성 포기)
│
└── 그룹 이벤트
    ├── select_group / create_group
    ├── join_group / leave_group
    └── invite_member

open_composer → publish_moment (성공)
open_composer → abandon_composer (포기)

// 작성 시작 - 어디서 진입했는지 추적
track('open_composer', {
  entry: 'nav' | 'cta' | 'reminder', // 진입 경로
  composer: 'moment' | 'comment', // 작성 유형
});
 
// 작성 포기 - 어느 정도 작성했는지 추적
track('abandon_composer', {
  composer: 'moment',
  has_media: true, // 이미지 첨부 여부
  content_length_bucket: 's' | 'm' | 'l', // 작성량
});

// 스크롤 깊이: 연속값 → 5단계 버킷
percent_bucket: '0' | '25' | '50' | '75' | '100'
 
// 콘텐츠 길이: 연속값 → 3단계 버킷
content_length_bucket: 's' (≤60) | 'm' (≤140) | 'l' (>140)

src/shared/lib/ga/
├── index.ts          # GA4 초기화 및 페이지뷰
├── track.ts          # 이벤트 트래킹 함수 및 타입 정의
└── hooks/
    ├── useScrollDepth.ts  # 스크롤 깊이 추적 훅
    └── useDwell.ts        # 체류 시간 추적 훅

// src/shared/lib/ga/index.ts
import ReactGA from 'react-ga4';
 
const GA_MEASUREMENT_ID = process.env.REACT_APP_GA_ID;
const isProdEnv = process.env.NODE_ENV === 'production';
const allowedHosts = ['connectingmoment.com', 'www.connectingmoment.com'];
const isAllowedHost = allowedHosts.includes(window.location.hostname);
 
let initialized = false;
 
export const initGA = () => {
  // 프로덕션 환경이 아니면 초기화하지 않음
  if (!isProdEnv || !isAllowedHost) return;
  if (initialized) return;
  if (!GA_MEASUREMENT_ID) {
    console.warn('GA_MEASUREMENT_ID is not set');
    return;
  }
 
  ReactGA.initialize(GA_MEASUREMENT_ID);
  initialized = true;
};
 
export const isGAEnabled = () => initialized;
 
export const sendPageview = (path: string) => {
  if (!isGAEnabled()) return;
  ReactGA.send({
    hitType: 'pageview',
    page: path,
    title: document.title,
  });
};

// src/shared/lib/ga/track.ts
import ReactGA from 'react-ga4';
import { isGAEnabled } from '.';
 
// 이벤트별 파라미터 타입 정의
type EventMap = {
  // 그룹 관련
  select_group: { source?: 'home' | 'my_page' };
  create_group: Record<string, never>;
  join_group: Record<string, never>;
  leave_group: Record<string, never>;
  invite_member: Record<string, never>;
 
  // 모멘트/코멘트
  give_likes: { item_type: 'moment' | 'comment' };
  open_composer: {
    entry?: 'nav' | 'cta' | 'reminder';
    composer: 'moment' | 'comment';
  };
  publish_moment: {
    has_media?: boolean;
    content_length_bucket?: 's' | 'm' | 'l';
  };
  submit_comment: { length_bucket?: 's' | 'm' | 'l' };
  abandon_composer: {
    composer: 'moment' | 'comment';
    has_media?: boolean;
    content_length_bucket?: 's' | 'm' | 'l';
  };
 
  // 체류/스크롤
  dwell_start: { surface: 'composer' | 'feed' | 'collection' };
  dwell_end: {
    surface: 'composer' | 'feed' | 'collection';
    dwell_seconds: number;
  };
  scroll_depth: { percent_bucket: '0' | '25' | '50' | '75' | '100' };
 
  // CTA/네비게이션
  click_navigation: {
    destination: 'today_moment' | 'today_comment' | 'collection';
  };
  click_auth: { device: 'desktop' | 'mobile' };
  click_cta: { cta_type: 'primary' | 'secondary' };
};
 
// 공통 파라미터
type CommonParams = { screen?: string };
 
const getCommonParams = (): CommonParams => ({
  screen: window.location.pathname,
});
 
// 타입 안전한 track 함수
export function track<E extends keyof EventMap>(
  eventName: E,
  params: EventMap[E] & CommonParams = {} as any,
) {
  if (!isGAEnabled()) return;
  ReactGA.event(eventName as string, {
    ...getCommonParams(),
    ...params,
  });
}

// 컴파일 타임에 오류 감지
track('click_cta', { cta_type: 'tertiary' }); // Error: 'tertiary'는 허용되지 않음
track('open_composer', { entry: 'nav' }); // Error: 'composer' 필드 누락
track('unknwon_event', {}); // Error: 존재하지 않는 이벤트
 
// 올바른 사용
track('click_cta', { cta_type: 'primary' }); // OK
track('open_composer', { entry: 'nav', composer: 'moment' }); // OK

// src/shared/lib/ga/hooks/useScrollDepth.ts
import { useEffect, useRef } from 'react';
import { track } from '../track';
 
export function useScrollDepth() {
  const maxDepth = useRef(0);
 
  useEffect(() => {
    const onScroll = () => {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const percent =
        docHeight > 0 ? Math.min(100, Math.round((scrollTop / docHeight) * 100)) : 100;
 
      // 최대 스크롤 깊이만 기록 (후퇴는 무시)
      if (percent > maxDepth.current) {
        maxDepth.current = percent;
      }
    };
 
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll(); // 초기 위치 기록
 
    // 페이지 이탈 시 최종 스크롤 깊이 전송
    return () => {
      window.removeEventListener('scroll', onScroll);
      const p = maxDepth.current;
      const bucket: '0' | '25' | '50' | '75' | '100' =
        p >= 100 ? '100' : p >= 75 ? '75' : p >= 50 ? '50' : p >= 25 ? '25' : '0';
 
      track('scroll_depth', { percent_bucket: bucket });
    };
  }, []);
}

// src/pages/home/index.tsx
function HomePage() {
  useScrollDepth(); // 홈페이지 스크롤 깊이 추적
 
  return (
    <main>
      {/* 페이지 컨텐츠 */}
    </main>
  );
}

// src/shared/lib/ga/hooks/useDwell.ts
import { useEffect, useRef } from 'react';
import { track } from '../track';
 
export function useDwell(surface: 'composer' | 'feed' | 'collection') {
  const start = useRef<number>(0);
 
  useEffect(() => {
    start.current = Date.now();
    track('dwell_start', { surface });
 
    return () => {
      const dwellMs = Date.now() - start.current;
      const dwell = Math.max(0, Math.round(dwellMs / 1000));
      track('dwell_end', { surface, dwell_seconds: dwell });
    };
  }, [surface]);
}

// src/pages/todayMoment/index.tsx
function TodayMomentPage() {
  useDwell('composer'); // 모멘트 작성 페이지 체류 시간 추적
 
  return (
    <MomentComposer />
  );
}

// src/features/moment/hook/useSendMoments.ts
export function useSendMoments() {
  const [content, setContent] = useState('');
  const [imageData, setImageData] = useState<ImageData | null>(null);
  const { mutate, isSuccess } = useMomentsMutation();
 
  // 작성 포기 추적
  useEffect(() => {
    return () => {
      // 작성을 시작했는지 확인 (텍스트 입력 또는 이미지 첨부)
      const typed = content.trim().length > 0 || imageData != null;
 
      // 성공하지 않았는데 작성을 시작한 경우 = 포기
      if (!isSuccess && typed) {
        const length = content.length;
        const content_length_bucket = length <= 60 ? 's' : length <= 140 ? 'm' : 'l';
        const has_media = Boolean(imageData);
 
        track('abandon_composer', {
          composer: 'moment',
          has_media,
          content_length_bucket,
        });
      }
    };
  }, [content, imageData, isSuccess]);
 
  // ... 나머지 로직
}

// src/pages/home/index.tsx
function HomePage() {
  const navigate = useNavigate();
 
  const handleCtaClick = () => {
    track('click_cta', { cta_type: 'primary' });
    navigate(ROUTES.LOGIN);
  };
 
  return (
    <main>
      <HeroSection>
        <Button onClick={handleCtaClick}>
          지금 시작하기
        </Button>
      </HeroSection>
    </main>
  );
}

// src/widgets/navigatorsBar/index.tsx
function NavigatorsBar() {
  const handleTodayMomentClick = () => {
    track('click_navigation', { destination: 'today_moment' });
  };
 
  const handleTodayCommentClick = () => {
    track('click_navigation', { destination: 'today_comment' });
  };
 
  const handleCollectionClick = () => {
    track('click_navigation', { destination: 'collection' });
  };
 
  return (
    <nav>
      <NavButton onClick={handleTodayMomentClick}>오늘의 모멘트</NavButton>
      <NavButton onClick={handleTodayCommentClick}>오늘의 코멘트</NavButton>
      <NavButton onClick={handleCollectionClick}>컬렉션</NavButton>
    </nav>
  );
}

// src/features/moment/api/useMomentsMutation.ts
export function useMomentsMutation() {
  return useMutation({
    mutationFn: postMoment,
    onSuccess: (_, variables) => {
      const has_media = Boolean(variables.image);
      const length = variables.content?.length ?? 0;
      const content_length_bucket = length <= 60 ? 's' : length <= 140 ? 'm' : 'l';
 
      track('publish_moment', {
        has_media,
        content_length_bucket,
      });
    },
  });
}

page_view (980) → scroll (229) → click_cta (166)