react-ga4

react-ga4

react-ga4는 React 애플리케이션에서 Google Analytics 4 (GA4) 를 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다.

이는 Google이 이전 Universal Analytics에서 GA4로 전환함에 따라 생긴 변화에 대응하기 위해 만들어졌습니다.

주요 특징

• GA4 지원: react-ga는 Universal Analytics에 맞춰져 있고, react-ga4는 GA4 전용입니다.
• React 친화적 사용법: React 앱 내에서 페이지뷰, 이벤트, 사용자 속성 등을 추적하기 쉽게 해줍니다.
• SPA 지원: 페이지 리로드 없이 라우팅이 이루어지는 React 환경에서도 정확한 페이지 추적이 가능하도록 설계되어 있습니다.

설치 방법

npm install react-ga4

기본 사용법

import ReactGA from 'react-ga4';

ReactGA.initialize('G-XXXXXXXXXX'); // GA4 측정 ID

ReactGA.send('pageview'); // 초기 페이지 뷰 전송

페이지 뷰 추적 (예: React Router와 함께)

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import ReactGA from 'react-ga4';

const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.send({ hitType: 'pageview', page: location.pathname });
  }, [location]);
};

이벤트 추적

Google Analytics 4 (GA4)에서의 이벤트 추적은 사용자 행동을 분석하는 핵심 도구입니다.
react-ga4를 사용하면 이벤트를 쉽고 체계적으로 전송할 수 있습니다.

GA4의 이벤트 구조

GA4에서는 모든 상호작용이 이벤트입니다.
기존 Universal Analytics에서는 category, action, label 구조가 있었지만,

GA4는 이벤트 이름과 매개변수(parameters) 중심으로 바뀌었습니다.

기본 사용 예

import ReactGA from 'react-ga4';

ReactGA.event({
  category: '버튼',
  action: '클릭',
  label: '홈 CTA',
});

주의: 이 형식은 react-ga의 레거시 구조를 따르고 있지만, react-ga4는 실제로 GA4에 맞는 방식도 지원합니다. GA4 방식으로 매개변수를 직접 지정할 수도 있습니다.

GA4 방식 이벤트 예시 (권장)

ReactGA.event('login', {
  method: 'Google',
});

• 'login' → 이벤트 이름
• { method: 'Google' } → 추가 매개변수 (파라미터)

이벤트 이름은 문자열이며, 매개변수는 최대 25개까지 보낼 수 있습니다.

예제: 제품 클릭 이벤트

ReactGA.event('select_item', {
  item_name: '아이폰 15',
  item_category: '스마트폰',
  price: 1200000,
});

이렇게 보내면 GA4 보고서에서 'select_item' 이벤트로 해당 정보를 볼 수 있습니다.

추천 이벤트 이름 (GA4 공식 명세 기준) 

이벤트 이름	설명
login	로그인 시
sign_up	회원가입 시
purchase	구매 완료 시
add_to_cart	장바구니 추가 시
view_item	상품 상세 페이지 진입 시
generate_lead	리드 생성 시 (폼 제출 등)

이런 이벤트는 GA4에서 자동 보고서로 정리되기 때문에 이름을 공식 이름대로 쓰는 것이 좋습니다.

사용자 정의 이벤트

사용자 정의 이벤트도 사용할 수 있지만, GA4 관리 페이지에서 직접 등록하거나 보고서에 추가 구성이 필요합니다.

ReactGA.event('share_button_click', {
  platform: 'kakao',
});

이벤트 추적 요약

항목	설명
기본 구조	이벤트 이름 + 매개변수
공식 이벤트 사용	자동 보고서 연결 가능
사용자 정의 이벤트	자유롭게 이름 지정, 수동 설정 필요
매개변수 수 제한	한 이벤트당 최대 25개

이벤트 데이터를 GA4에서 확인하려면 보통 실시간 → 이벤트 탭이나,
"이벤트" 보고서에서 확인 가능합니다.

사용자 설정

ReactGA.set({
  user_id: '1234',
});

요약

항목	설명
목적	Google Analytics 4 추적
주요 기능	페이지뷰, 이벤트, 사용자 속성 추적 등
SPA 지원	React Router 등과 잘 작동
대안	gtag.js 직접 사용 (더 복잡함)

https://www.npmjs.com/package/react-ga4

react-ga4