Skip to content

Google Analytics(GA) 연동 가이드

Jump to bottom
Won Kim edited this page Dec 24, 2024 · 1 revision

@next/third-parties/google 패키지를 사용하는 것은 Google Analytics를 더 빠르게 연동하고 최신 Next.js App Router와 호환되도록 설계된 솔루션입니다.

아래는 이 방법에 대해 고려할 장점, 설정 가이드, 그리고 추가적인 트래킹 옵션입니다.

장점

  1. 간편함: Google Analytics를 위한 최소한의 설정만 필요합니다.
  2. 자동 페이지 뷰 트래킹: App Router 기반의 라우팅에 따라 자동으로 페이지 뷰를 기록합니다.
  3. 최신 App Router와 호환: Root Layout에서 사용하는 구조는 최신 Next.js 앱 구조와 완벽하게 호환됩니다.
  4. 의존성 관리: 라이브러리를 통해 GA 설정을 캡슐화하여 코드가 깔끔해집니다.

설정 가이드

1. 패키지 설치

npm install @next/third-parties

2. RootLayout에 Google Analytics 삽입

app/layout.tsx에서 아래와 같이 설정합니다:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID} />
      </body>
    </html>
  )
}

3. 환경 변수 설정

NEXT_PUBLIC_GA_MEASUREMENT_ID를 .env.local 파일에 추가합니다:

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

4. 페이지 뷰 확인

Google Analytics 대시보드의 실시간 탭에서 페이지 뷰가 기록되는지 확인하세요.

커스텀 이벤트 트래킹

자동 페이지 뷰 외에도 특정 이벤트(예: 버튼 클릭, 폼 제출)를 트래킹하려면 아래 방법을 사용할 수 있습니다.

1. 이벤트 트래킹 함수 정의

Google Analytics 이벤트를 보내는 함수를 정의합니다:

export const trackEvent = ({ action, category, label, value }: {
  action: string,
  category: string,
  label?: string,
  value?: number,
}) => {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', action, {
      event_category: category,
      event_label: label,
      value,
    });
  }
};

2. 이벤트 트래킹 호출

예를 들어, 버튼 클릭 시 이벤트를 트래킹:

import { trackEvent } from '@/lib/analytics'

export default function MyButton() {
  return (
    <button
      onClick={() =>
        trackEvent({
          action: 'click',
          category: 'Button',
          label: 'Header Button',
          value: 1,
        })
      }
    >
      Click Me
    </button>
  )
}

3. Next.js(GA 연동) 링크

Clone this wiki locally