Next.js에 GA4 붙여봤습니다 – 페이지뷰 & 이벤트 트래킹까지 실전 적용 가이드

 

 

안녕하세요, 이웃님들! 😊

오늘은 제가 실제로 **Next.js 프로젝트에 Google Analytics 4(GA4)**를 연동하면서
페이지뷰 트래킹과 이벤트 로그 수집까지 설정한 과정을 정리해보려고 해요.

막상 해보면 복잡하지는 않지만,
초기 설정부터 실전 사용까지 꼼꼼히 챙겨야 할 포인트가 은근히 많더라고요.

---

✅ 1️⃣ GA4 기본 설정부터 시작하기

🔗 analytics.google.com 접속해서 아래 순서대로 진행:

1. '측정 시작' 클릭 → Google 계정으로 로그인
2. 새 GA4 속성 생성
3. 웹 스트림 등록 후 발급되는 측정 ID (예: G-XXXXXXXXXX) 복사해두세요

---

✅ 2️⃣ 환경 변수로 GA ID 보관

루트에 .env.local 파일 만들어서 다음처럼 추가:

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

👉 환경 변수는 반드시 NEXT_PUBLIC_ 접두사를 붙여야 Next.js에서 클라이언트 측에서도 접근 가능합니다.

---

✅ 3️⃣ GA4 스크립트 삽입 (_app.tsx에서 처리)

GA는 페이지 전환을 추적해야 하므로, pages/_app.tsx에서 아래처럼 설정합니다:

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
        page_path: url,
      });
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router.events]);

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

✅ 이 설정을 통해 페이지 이동 시마다 자동으로 페이지뷰 이벤트 전송됩니다.

---

✅ 4️⃣ 이벤트 트래킹 함수 만들기 (lib/gtag.ts)

GA에서 추천하는 방식대로 별도 파일에 함수 정의해두면 깔끔합니다:

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;

// 페이지뷰 트래킹
export const pageview = (url: string) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};

// 이벤트 전송
export const event = ({
  action,
  category,
  label,
  value,
}: {
  action: string;
  category: string;
  label: string;
  value?: number;
}) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value,
  });
};

---

✅ 5️⃣ 이벤트 보내보기 (버튼 클릭 트래킹 예시)

import * as gtag from '../lib/gtag';

const ExampleComponent = () => {
  const handleClick = () => {
    gtag.event({
      action: 'click_button',
      category: 'engagement',
      label: 'example_button',
    });
  };

  return <button onClick={handleClick}>클릭해보세요</button>;
};

 

이렇게 하면 버튼 클릭 시 GA4 대시보드에 이벤트가 기록됩니다!
이벤트 카테고리/라벨 명은 일관성 있게 작성하는 걸 추천합니다.

---

💡 실전 적용 팁 & 주의사항

• ✅ API 키는 클라이언트에 넣을 수밖에 없지만, 민감 정보는 절대 포함 X
• ✅ 의미 없는 이벤트 남발하지 말고, 측정 목적이 뚜렷한 행동만 트래킹
• ✅ 페이지 속도 영향 거의 없지만, Script afterInteractive로 최적화
• ✅ 개발 환경에서는 GA 작동 안 하게 조건 분기 넣는 것도 좋습니다
• ✅ GA4 대시보드에서 실시간 이벤트 확인 가능 (테스트할 때 유용!)

---

✅ 결론 – Next.js에 GA4 붙이는 건 생각보다 쉽고 강력합니다

저는 이번에 프로젝트에 GA4 붙이면서
페이지별 방문자 흐름, 버튼 클릭률, 유입 경로까지 한눈에 볼 수 있어서
기획/마케팅 팀과 소통할 때도 훨씬 수월해졌어요.

✅ Next.js 기반 웹사이트 운영 중이라면 꼭 한 번 적용해보세요.
퍼포먼스 측정 & UX 개선 아이디어 얻는 데 큰 도움 됩니다.

---

💬 여러분은 GA4 연동해보셨나요?

• 어떤 트래킹 전략을 쓰고 계신가요?
• 혹시 실무에서 겪었던 문제나 노하우 있으신가요?

댓글로 공유해주시면 서로 배우는 시간 가져봐요! 😊