Next.js에서 GA 연동하기

GA란?

Google Analytics (GA)는 구글에서 제공하는 웹/앱 분석 서비스이다.
웹사이트 방문자 수, 페이지뷰 등 사용자 행동을 분석할 수 있고, 이벤트도 추적 가능!

그래서 사용자 행동 데이터를 기반으로 서비스를 개선할 수 있고, 마케팅 전략 또한 수립이 가능하다.

최신 버전인 GA4에서는

- 기존 UA(Universal Analytics)와 다르게 이벤트 기반 구조
- 페이지뷰, 버튼 클릭, 사용자 상호작용을 모두 이벤트로 수집
- 모바일 앱 + 웹 통합 분석 가능

이러한 기능들이 제공된다.

Google 애널리틱스

---

GA를 Next.js에 적용하는 법

1. GA Measurement ID 준비

- GA4 계정 생성 → Property 생성 → Measurement ID 확인 (G-XXXXXXX)
- 환경 변수에 저장

2. GA 스크립트 삽입 

Next.js에서는 _app.tsx에서 <Script>를 사용해 GA 스크립트를 삽입한다!

import Script from 'next/script';
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import * as gtag from '@/lib/gtag';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  
  // SPA 환경에서 페이지뷰를 GA에 자동으로 보내기 위함
  // 새로고침 없이 이동해도 GA에 페이지뷰 누적
  useEffect(() => {
    const handleRouteChange = (url: string) => gtag.pageview(url);
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router.events]);

  return (
    <>
      {/* GA 라이브러리 불러오기 */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_MEASUREMENT_ID}`}
      />
      {/* GA 초기화 */}
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gtag.GA_MEASUREMENT_ID}', { page_path: window.location.pathname });
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

이렇게 하면 SPA 환경에서 페이지뷰 추적 준비가 끝난다.

 

3. GA 유틸 함수 작성

// lib/gtag.ts
export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID || '';

// 페이지뷰 추적
export const pageview = (url: string) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('config', GA_MEASUREMENT_ID, { page_path: url });
  }
};

// 범용 이벤트 추적
export const event = ({ action, category, label, value }: {
  action: string;
  category: string;
  label: string;
  value?: string | number;
}) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, { event_category: category, event_label: label, value });
  }
};

// ex) Footer SNS 클릭 이벤트
export const trackSNSClick = (platform: 'instagram' | 'x' | 'linkedin' | 'youtube') => {
  event({
    action: 'sns_click',
    category: 'footer_social',
    label: `Click ${platform}`,
    value: platform,
  });
};

- action: 이벤트 이름 
- category: 이벤트 그룹
- label: 세부 설명
- value(option): 수치형 데이터 전송 가능

예시인 Footer SNS 클릭 이벤트를 보면 Footer의 SNS 버튼 클릭을 GA 이벤트로 기록하는 것이다.
인스타그램 버튼을 클릭(trackSNSClick('instagram'))했다면 GA에는 다음 이벤트가 전송된다.

{
  "action": "sns_click",
  "category": "footer_social",
  "label": "Click instagram",
  "value": "instagram"
}

 

4. 컴포넌트에서 이벤트 호출

import { trackSNSClick } from '@/lib/gtag';

const Footer = () => (
  <footer>
    <button onClick={() => trackSNSClick('instagram')}>Instagram</button>
    <button onClick={() => trackSNSClick('x')}>X</button>
    <button onClick={() => trackSNSClick('linkedin')}>LinkedIn</button>
    <button onClick={() => trackSNSClick('youtube')}>YouTube</button>
  </footer>
);

export default Footer;

---

이렇게 하고나면 이제 GA4 사이트의 이벤트 메뉴와 Chrome DevTools Network 탭에서도 확인이 가능하다!

[GA4] 차세대 애널리틱스인 Google 애널리틱스 4 소개 - 애널리틱스 고객센터