728x90
개요
React 프로젝트에 Google Analytics 4(GA4)를 연동하여 사용자 행동을 추적하고 분석하는 방법을 소개합니다. 이 글에서는 Vite 기반의 React 프로젝트를 기준으로 설명하지만, 다른 React 프로젝트에서도 동일한 방식으로 적용할 수 있습니다.
목표
- 페이지뷰 자동 추적
- 사용자 행동 데이터 수집
- 마케팅 성과 측정
- 트래픽 소스 파악
구현 방법
1. GA4 기본 스크립트 추가
먼저 index.html 파일의 <head> 섹션에 GA4 스크립트를 추가합니다:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id="></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-F65YSR8RB6');
</script>2. 페이지뷰 추적을 위한 커스텀 훅 생성
src/hooks/useGAPageView.ts 파일을 생성하여 페이지뷰 추적 로직을 구현합니다:
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
declare global {
interface Window {
gtag: (
command: string,
action: string,
params?: {
page_path?: string;
page_title?: string;
}
) => void;
}
}
const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID || 'G-';
export const useGAPageView = () => {
const location = useLocation();
useEffect(() => {
window.gtag('config', GA_MEASUREMENT_ID, {
page_path: location.pathname + location.search,
page_title: document.title,
});
}, [location]);
};3. GA 추적을 위한 래퍼 컴포넌트 생성
src/utils/GoogleAnalytics.tsx 파일을 생성하여 추적 로직을 캡슐화합니다:
import { useGAPageView } from '@/hooks/useGAPageView';
const GoogleAnalytics = () => {
useGAPageView();
return null;
};
export default GoogleAnalytics;4. 라우터에 컴포넌트 추가
src/routes/RootRoutes.tsx 파일에서 BrowserRouter 내부에 GoogleAnalytics 컴포넌트를 추가합니다.
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import GoogleAnalytics from '@/utils/GoogleAnalytics';
const RootRoutes = () => {
return (
<BrowserRouter>
<AuthProvider>
<GoogleAnalytics />
<Routes>
{/* 라우트 설정 */}
</Routes>
</AuthProvider>
</BrowserRouter>
);
};💡 주요 포인트
1. TypeScript 타입 지원
- gtag 함수의 타입을 전역으로 선언하여 타입 안정성 확보
- 환경 변수를 통한 측정 ID 관리
2. 성능 최적화
- useEffect를 사용하여 불필요한 리렌더링 방지
- 페이지 이동 시에만 이벤트 전송
3. 구조적 장점
- 커스텀 훅을 통한 로직 재사용성
- 컴포넌트를 통한 추적 로직 캡슐화
- React Router와의 자연스러운 통합
🔍 주의사항
- 라우터 컨텍스트
- GoogleAnalytics 컴포넌트는 반드시 BrowserRouter 내부에 위치해야 합니다.
- useLocation 훅은 라우터 컨텍스트 내에서만 사용 가능합니다.
- 환경 변수 설정
- 측정 ID를 환경 변수로 관리하는 것이 좋습니다.
- .env 파일에 VITE_GA_MEASUREMENT_ID 추가
- 타입 안정성
- TypeScript를 사용하는 경우 전역 타입 선언이 필요합니다.
- gtag 함수의 파라미터 타입을 명확히 정의해야 합니다.
활용 방법
페이지뷰 분석
- 각 페이지의 방문자 수 확인
- 페이지별 체류 시간 분석
- 이탈률 확인
사용자 행동 분석
- 페이지 이동 경로 파악
- 주요 기능 사용 빈도 확인
- 사용자 흐름 최적화
마케팅 효과 측정
- 트래픽 소스 분석
- 캠페인 효과 측정
- 전환율 추적
마치며
Google Analytics 4를 React 프로젝트에 연동하는 방법을 소개했습니다. 이 구현을 통해 사용자 행동을 추적하고 분석할 수 있으며, 이를 바탕으로 제품을 개선하고 사용자 경험을 향상시킬 수 있습니다. 추가적인 이벤트 추적이나 사용자 정의 측정이 필요하다면 말씀해 주세요!
728x90
'카카오테크 부트캠프 > 프로젝트' 카테고리의 다른 글
| 데이터 베이스 백업 파일 작성 (0) | 2025.05.15 |
|---|---|
| 수동 SQL 삽입시 발생한 트러블 슈팅 (0) | 2025.05.14 |
| 데일리 스크럼 봇 생성기 (0) | 2025.05.13 |
| EC2에서 크롬 자동 로그인 이후 데이터 크롤링 트러블 슈팅 (0) | 2025.05.09 |
| 백준 문제 데이터 크롤링 트러블슈팅 (0) | 2025.05.08 |