React 앱에서 사용자 행동 분석 추적하기

React 앱에서 사용자 행동을 추적하는 것은 사용자 경험을 개선하고, 마케팅 전략을 세우는 데 필수적입니다. 이번 글에서는 실무에서 많이 사용하는 Google Analytics와 React에서 쉽게 통합하는 방법을 소개합니다.

1. Google Analytics 설치하기

먼저 Google Analytics 계정을 만들고 추적 ID(Tracking ID)를 얻습니다. 대부분 UA- 또는 G- 로 시작하는 ID입니다.

2. React에 Google Analytics 연동하기

가장 간단한 방법은 react-ga 라이브러리를 사용하는 것입니다. 아래 명령어로 설치하세요.

npm install react-ga

3. 초기화 및 페이지 조회 추적

App 컴포넌트 최상단에 Google Analytics를 초기화하고 라우팅 시 페이지 뷰를 보내는 코드를 작성합니다.

import React, { useEffect } from 'react';
import ReactGA from 'react-ga';
import { useLocation } from 'react-router-dom';

const TRACKING_ID = 'UA-XXXXXXXXX-X'; // 본인의 ID로 교체

function usePageViews() {
  const location = useLocation();
  useEffect(() => {
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
}

function App() {
  useEffect(() => {
    ReactGA.initialize(TRACKING_ID);
  }, []);

  usePageViews();

  return (
    

      {/* 앱 내용 */}
    
  );
}

export default App;

4. 사용자 이벤트 추적하기

버튼 클릭 등 사용자의 특정 행동을 추적할 때는 ReactGA.event를 사용합니다.

const handleClick = () => {
  ReactGA.event({
    category: 'User',
    action: 'Clicked Sample Button'
  });
};

return <button onClick={handleClick}>샘플 버튼</button>;

5. 주요 팁

• 개발 환경에서 테스트 이벤트를 보내지 않도록 조건문 추가
• GA4에 맞춘 설정이나 다른 분석 도구(Hotjar, Mixpanel 등)도 필요에 따라 고려
• 프라이버시와 사용자 동의 관련 법규 준수

이처럼 React 앱에 간단한 설정만 추가하면 사용자 행동 데이터를 효과적으로 수집할 수 있습니다. 실무에 맞게 코드를 응용해보세요.