Next.js 프로젝트에 Google Analytics 4 (GA4) 연동하여 사용자 행동 분석하기

Google Analytics 4 데이터 분석

블로그와 웹 서비스 성장의 이정표, 데이터 분석

웹 서비스나 블로그를 론칭한 이후에는 어떤 글이나 페이지가 인기가 많은지, 사용자들이 어떤 유입 경로를 통해 들어왔으며 얼마나 오랫동안 페이지에 체류하는지 등의 통계를 파악해야 더 나은 마케팅 방향과 콘텐츠 기획을 수립할 수 있습니다.

웹 트래픽 분석의 표준 도구인 **Google Analytics 4 (GA4)**를 활용하면 방문자의 세밀한 행동 통계를 무료로 손쉽게 얻을 수 있습니다. 특히 Next.js App Router 생태계에서는 이전 스크립트 태그 직접 주입 방식 대신, 공식 라이브러리를 사용해 웹 최적화 성능(Lighthouse 점수)을 떨어뜨리지 않으면서 깔끔하게 GA4를 이식할 수 있습니다.

이번 가이드에서는 Next.js 프로젝트에 GA4 측정 ID를 공식 표준 방법으로 설치하고 제대로 트래픽이 쌓이는지 검증하는 방법을 알아봅니다.

1. GA4 스트림 생성 및 측정 ID 획득

우선 구글 애널리틱스 대시보드에서 내 웹 서비스를 등록하고 측정 ID(Measurement ID)를 받아와야 합니다.

Google Analytics 공식 웹사이트에 구글 계정으로 로그인합니다.
**'관리' (톱니바퀴 아이콘) -> '속성 생성'**을 클릭하여 블로그 정보와 국가, 통화를 입력합니다.
데이터 수집 플랫폼으로 **'웹 (Web)'**을 선택합니다.
내 블로그 URL 주소(예: https://goldenwhale.co.kr)와 스트림 이름을 입력하고 **'스트림 생성'**을 완료합니다.
스트림 세부정보 창에서 **'G-'**로 시작하는 고유의 **측정 ID (Measurement ID)**를 복사해 둡니다.

2. Next.js 공식 패키지 `@next/third-parties` 사용하기

Next.js는 서드파티 스크립트를 성능 저하 없이 최적화 로드할 수 있도록 자체적인 @next/third-parties 공식 라이브러리를 제공합니다. 이를 통해 웹 바이탈 점수를 갉아먹는 비효율적인 구글 스크립트 로드 방식을 방지할 수 있습니다.

라이브러리 설치

터미널에서 다음 명령어를 실행해 서드파티 통합 패키지를 설치합니다.

npm install @next/third-parties

3. Root Layout에 GA4 컴포넌트 추가

설치가 끝났다면 Next.js App Router의 최상단 레이아웃 파일인 app/layout.tsx (혹은 layout.js)에 패키지에서 가져온 <GoogleAnalytics /> 컴포넌트를 주입하기만 하면 모든 페이지 추적이 전역에서 자동으로 작동합니다.

`app/layout.tsx` 수정 예시

import { GoogleAnalytics } from '@next/third-parties/google';
import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: 'Goldenwhale Blog',
  description: 'AI & 영어 학습 & 생산성 블로그',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body>
        {children}
      </body>
      {/* 구글 애널리틱스 측정 ID 주입 */}
      <GoogleAnalytics gaId="G-XXXXXXXXXX" />
    </html>
  );
}

[!TIP]
보안 권장 사항: 측정 ID(G-XXXXXXXXXX)를 코드에 직접 노출하지 않고 .env.local 환경 변수에 등록한 뒤 process.env.NEXT_PUBLIC_GA_ID 형태로 참조해 사용하는 것이 환경 관리 측면에서 매우 효율적입니다.

4. 연동 결과 검증하기

구글 애널리틱스 연동 코드를 배포한 뒤, 데이터가 정상적으로 수집되는지 즉시 실시간 리포트로 검증해야 합니다.

블로그를 빌드하고 Vercel에 배포(혹은 로컬 개발서버 npm run dev 실행)하여 직접 내 웹사이트에 접속합니다.
구글 애널리틱스 대시보드로 이동한 뒤 보고서 -> 실시간 (Real-time) 메뉴를 클릭합니다.
현재 활성 사용자 수에 **'1'**이 찍히면서 내 브라우저가 위치한 지역과 조회하고 있는 페이지 경로가 감지되는지 확인합니다. 실시간 통계에 내 접속이 찍힌다면 완벽히 성공한 것입니다.

맺음말

Google Analytics 4를 웹에 설치하는 것은 장기적인 성장을 위한 첫걸음입니다. 어떤 경로를 통해 사용자가 유입되었고 어떤 글이 흥미를 끌어냈는지 지표를 모니터링하면서 꾸준히 글을 써 내려가면, 보다 확실하고 정량적인 독자층 타겟팅 전략을 완성할 수 있습니다.

지금 바로 연동을 완료하고, 쌓여가는 트래픽 통계를 즐겨 보세요!