Next.js App Router에 Google Analytics 4 (GA4) 완벽 연동 및 클릭 추적

"내 Next.js 블로그나 서비스에 매일 몇 명의 방문자가 오는지, 어떤 포스트가 가장 인기 있는지 정밀하게 측정하고 계신가요?"

웹사이트의 성장과 SEO 최적화를 위해서는 사용자 행동 데이터 분석이 필수적입니다. 과거 Next.js에서 Google Analytics 4(GA4)를 연동하려면 서드파티 스크립트 로딩으로 인해 웹 성능 지표(Core Web Vitals) 점수가 깎이는 문제가 있었습니다.

Next.js 14+부터 공식 지원되는 @next/third-parties/google 모듈을 활용하면, 성능 저하 없이 단 3분 만에 GA4를 연동하고 클릭 이벤트까지 추적할 수 있습니다.

1. 패키지 설치

터미널에서 Next.js 공식 서드파티 통합 패키지를 설치합니다.

npm install @next/third-parties@latest

2. Root Layout에 GA4 스크립트 연동

app/layout.tsx 파일 상단에 GoogleAnalytics 컴포넌트를 불러와 <body> 태그 내부에 삽입합니다.

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const gaId = process.env.NEXT_PUBLIC_GA_ID || '';

  return (
    <html lang="ko">
      <body>
        {children}
        {/* GA4 측정 ID 연동 */}
        {gaId && <GoogleAnalytics gaId={gaId} />}
      </body>
    </html>
  );
}

• 환경 변수 세팅: .env.local 파일에 NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX (발급받은 GA4 측정 ID)를 추가하세요.

3. 커스텀 이벤트(버튼 클릭, 뉴스레터 신청) 추적 함수 만들기

특정 버튼을 누르거나 링크를 클릭한 이벤트를 GA4로 전송하려면 sendGAEvent 모듈을 활용합니다.

'use client';

import { sendGAEvent } from '@next/third-parties/google';

export default function SubscribeButton() {
  const handleSubscribe = () => {
    // GA4로 이벤트 데이터 전송
    sendGAEvent('event', 'button_click', {
      value: 'newsletter_subscribe_click',
      label: 'Main Landing Page Header',
    });

    alert('구독해 주셔서 감사합니다!');
  };

  return (
    <button
      onClick={handleSubscribe}
      className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
    >
      뉴스레터 구독하기
    </button>
  );
}

4. GA4 실시간(Realtime) 보고서에서 검증하기

1. 프로젝트를 배포한 뒤 해당 페이지에 접속합니다.
2. Google Analytics 대시보드 -> [실시간(Realtime)] 메뉴로 이동합니다.
3. 현재 접속자 수(1명)와 함께 page_view 및 설정한 button_click 이벤트가 실시간으로 수집되는지 확인합니다.

💡 성능 최적화 포인트

@next/third-parties 모듈은 내부적으로 next/script의 lazyOnload 또는 afterInteractive 전략을 사용하여, 사용자의 화면 렌더링에 지장을 주지 않는 타이밍에 GA4 스크립트를 다운로드하므로 웹 성능 점수를 100점으로 유지할 수 있습니다.

지금 바로 GA4를 연동하고 데이터 기반의 스마트한 웹 서비스를 만들어 보세요!