Next.js 14+ 프로젝트에 GA4(Google Analytics) 도입 및 커스텀 이벤트 추적하기
Next.js 14+ 프로젝트에 GA4(Google Analytics) 도입 및 커스텀 이벤트 추적하기
안녕하세요! 오늘은 Next.js 기반의 MVP 프로젝트인 'Beauty Inside Lab'에 Google Analytics 4(GA4)를 연동하고, 단순 페이지 뷰를 넘어 사용자 행동을 정밀하게 분석하기 위한 커스텀 이벤트 추적(Custom Event Tracking) 구현 과정을 공유합니다.
1. 도입 배경
MVP(Minimum Viable Product) 단계에서 가장 중요한 것은 데이터 기반의 의사결정입니다.
단순히 "방문자가 들어왔다"는 사실만으로는 부족합니다. 사용자가 우리 서비스의 핵심 기능인 'AI 번역(Transcreation)'을 얼마나 사용하는지, '마켓 예측 리포트'를 신뢰하고 복사해가는지 등 진짜 가치 있는 행동(Key Value Actions) 을 추적해야만 제품을 개선할 수 있습니다.
2. 연동 방법 선택: @next/third-parties
Next.js 14 버전부터는 Google에서 공식적으로 제공하는 @next/third-parties 라이브러리를 사용하는 것이 권장됩니다.
이전의 next/script를 직접 사용하는 방식보다 성능 최적화가 잘 되어 있고, 구현이 훨씬 간결합니다.
2.1 설치
npm install @next/third-parties2.2 기본 설정 (Page View)
app/layout.tsx 파일에 <GoogleAnalytics /> 컴포넌트만 추가하면 모든 페이지의 방문 기록이 자동으로 수집됩니다.
// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{/* ... existing layout code ... */}
{children}
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || ''} />
</body>
</html>
);
}.env.local 파일에 Measurement ID(G-XXXXXXXXXX)를 설정하는 것도 잊지 마세요.
3. 핵심: 커스텀 이벤트 설계 및 구현
단순 페이지 뷰 외에, 우리 서비스에서 정의한 '가치 있는 행동'은 다음과 같습니다.
- 초벌 번역 요청 (
transcreate_request): 사용자가 AI에게 번역을 시도함. - 결과 복사 (
copy_translation): 결과물에 만족하여 실제로 사용함. - 전략 확인 (
view_strategy): AI의 제안 이유를 궁금해함 (심화 학습). - 시장 예측 요청 (
request_prediction): 관세청 데이터를 기반으로 한 AI 예측 보고서를 조회함. - 에러 발생 (
analysis_error): AI 분석 실패 등 병목 지점 파악.
3.1 구현 포인트: sendGAEvent
@next/third-parties/google에서 제공하는 sendGAEvent 함수를 사용하여 이벤트를 전송합니다.
데이터의 정확도를 높이기 위해 모든 이벤트에 page_location을 공통 파라미터로 추가했습니다.
예시: 번역 요청 이벤트 (LocalizationTool.tsx)
import { sendGAEvent } from '@next/third-parties/google';
const handleTranscreate = async () => {
// ... validation ...
// 1. 요청 이벤트 전송
sendGAEvent('event', 'transcreate_request', {
category: category.label, // 어떤 카테고리 제품인가? (예: 스킨케어)
source_length: sourceText.length, // 입력 텍스트 길이는?
page_location: window.location.href,
});
try {
// API 호출
const data = await fetchLocalization(category.id, sourceText);
setResult(data);
} catch (err) {
// 2. 에러 트래킹 (중요!)
sendGAEvent('event', 'analysis_error', {
feature_name: 'Localization',
error_message: err.message,
page_location: window.location.href,
});
}
};예시: AI 리포트 복사 이벤트 (AIPrediction.tsx)
<button
onClick={() => {
navigator.clipboard.writeText(prediction.report_summary);
// 사용자가 정보를 '가져가는' 핵심 순간 포착
sendGAEvent('event', 'copy_prediction_report', {
model_name: selectedModel, // 어떤 AI 모델을 선호하는가?
page_location: window.location.href,
});
}}
>
Copy Report
</button>4. 데이터 확인 및 검증
작성한 코드를 배포하기 전, 로컬 환경(localhost)에서도 GA 데이터가 잘 들어오는지 확인해야 합니다.
- 앱 실행:
npm run dev - 브라우저에서 버튼 클릭 등 액션 수행.
- Google Analytics > Realtime(실시간) 대시보드 확인.
실시간 대시보드의 '이벤트 수(Event Count)' 카드에서 우리가 정의한 transcreate_request, copy_translation 등의 이벤트가 즉시 찍히는 것을 확인할 수 있습니다.
5. 마치며
이제 GA4를 통해 단순 방문자 수가 아닌, **"누가 어떤 기능을 왜 사용하는지"**를 숫자로 볼 수 있게 되었습니다.
특히 analysis_error 이벤트를 통해 사용자에게 발생한 AI 오류를 실시간으로 감지할 수 있게 된 점이 운영 측면에서 큰 이점입니다.
앞으로 이 데이터를 바탕으로 어떤 카테고리의 제품이 인기가 많은지, 어떤 텍스트가 주로 번역되는지 분석하여 서비스를 고도화할 예정입니다.
Beauty Insight Editor
Sharing insights on K-Beauty trends and data-driven export strategies. We help brands expand globally with the power of AI.