UX 이벤트와 사용자 속성 트래킹 구현

이전 글에서는 사용자가 입력한 GA4, Amplitude 스크립트를 각자의 서브도메인 환경에 삽입하는 방법을 다루었습니다. 이번 글에서는 사용자 행동(UX 이벤트) 및 사용자 속성(User Properties) 을 트래킹하는 방법을 설명합니다.

이 기능은 분석 도구의 핵심인 "사용자가 어떤 행동을 했는지, 어떤 특성을 가지고 있는지"를 실시간으로 기록하여 실습자가 실제 마케팅 분석 시나리오를 재현할 수 있도록 합니다.

1. 기본 UX 이벤트 설계

Analytics Playground의 데모 사이트는 다음과 같은 UX 이벤트를 트리거할 수 있도록 구성됩니다:

이벤트 이름 트리거 조건 설명

PAGE_VIEW	각 페이지 진입 시	자동 발생
CTA_CLICK	CTA 버튼 클릭 시	Home 페이지 등
PRODUCT_VIEW	상품 상세 페이지 진입 시	product/:id
ADD_TO_CART	장바구니 버튼 클릭	상세 페이지 내
FORM_SUBMIT	회원가입/결제 시	conversion 포인트
SEARCH_KEYWORD	검색어 입력	블로그 또는 제품 검색

2. 이벤트 전송 코드 (GA4 & Amplitude)

2-1. GA4 gtag 이벤트 예시

window.gtag('event', 'CTA_CLICK', {
  page_location: window.location.href,
  user_id: 'user123'
});

2-2. Amplitude 이벤트 예시

amplitude.getInstance().logEvent('CTA_CLICK', {
  page: window.location.pathname,
  user_id: 'user123'
});

2-3. React 내 공통 함수로 추출

export const trackEvent = (name: string, payload?: any) => {
  if (window.gtag) {
    window.gtag('event', name, payload);
  }
  if (window.amplitude) {
    window.amplitude.getInstance().logEvent(name, payload);
  }
};

3. 사용자 속성 설정 방법

분석 도구에서는 단순한 이벤트 외에도 사용자의 특성을 함께 저장하여 세그먼트를 구성하거나 조건 필터링에 활용할 수 있습니다.

3-1. GA4 사용자 속성 (set user_properties)

window.gtag('set', 'user_properties', {
  subscription_level: 'free',
  region: 'KR',
  device_type: 'desktop'
});

3-2. Amplitude Identify 예시

const identify = new amplitude.Identify()
  .set('subscription_level', 'free')
  .set('region', 'KR')
  .set('device_type', 'desktop');

amplitude.getInstance().identify(identify);

3-3. 사용 예시: 로그인 직후 사용자 속성 설정

useEffect(() => {
  if (user) {
    trackEvent('LOGIN_SUCCESS');
    setUserProperties(user);
  }
}, [user]);

4. 실습 페이지와 연결하기

예: CTA 버튼 클릭 시 이벤트 전송

<button onClick={() => trackEvent('CTA_CLICK')}>무료 체험 시작하기</button>

예: 검색 입력 시 검색어 기록

<input onBlur={(e) => trackEvent('SEARCH_KEYWORD', { keyword: e.target.value })} />

예: 상품 상세 페이지 진입 시 자동 트리거

useEffect(() => {
  trackEvent('PRODUCT_VIEW', { id: product.id, name: product.name });
}, []);

5. DebugView, Live View로 실시간 확인

5-1. GA4 DebugView

?debug_mode=true 또는 gtag('config', ..., { debug_mode: true })
https://analytics.google.com → DebugView 메뉴에서 실시간 이벤트 확인 가능

5-2. Amplitude Live View

프로젝트 → Events → Live View 메뉴에서 전송된 이벤트 실시간 확인
user_id 및 속성 정보도 함께 표시됨

6. 실습자 가이드: 미션 기반 활용 예시

실습 미션 측정 기준

CTA 클릭률 비교	CTA_CLICK 이벤트 수 / 방문자 수
회원가입 전환 퍼널	PAGE_VIEW → FORM_SUBMIT 순서 확인
상품 관심도 분석	PRODUCT_VIEW 횟수 / 사용자 수

다음 글에서는 이렇게 수집된 이벤트 데이터를 기반으로 퍼널 분석, 사용자 흐름 추적, 실습 미션 설계 등에 대해 설명합니다.
→ 6편. 분석 툴 기반 퍼널 분석 실습 가이드