트래픽 추적 (Google Analytics)

내 웹사이트에 누가 방문하는지 분석하기 위해 Google Analytics(GA4)를 설치합니다.

1. Google Analytics 계정 생성

Google Analytics 접속 및 로그인
[측정 시작] 버튼 클릭
계정 이름 입력 (예: 내 프로젝트 이름) 후 [다음]
속성 이름 입력, 보고 시간대(대한민국), 통화(KRW) 설정 후 [다음]
비즈니스 정보(업종, 규모) 대충 선택 후 [만들기] 및 약관 동의
데이터 수집 플랫폼에서 [웹] 선택
웹사이트 URL (배포된 주소) 및 스트림 이름 입력 후 [스트림 만들기] 클릭

2. 측정 ID 확인

데이터 스트림이 생성되면 "측정 ID"가 발급됩니다.
G-XXXXXXXXXX 형식의 ID를 복사해둡니다. 혹은, 화면에 보여진 코드를 복사해둡니다.

3. Next.js에 GA 설치 코드 추가

Next.js 앱 라우터(App Router) 방식에서는 layout.js 파일에 스크립트를 추가하는 것이 가장 간편합니다.
다만, 우리는 바이브코딩을 하고 있으므로, 프롬프트에 받은 정보를 그냥 붙여넣고 각 페이지마다 적용시켜달라고 하시면 됩니다.

// src/app/layout.js

// 1. Script 컴포넌트 import
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <head>
        {/* 2. Google Analytics Script 추가 */}
        <Script
          strategy="afterInteractive"
          src={'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX'} // 측정 ID 입력
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXXXX'); // 측정 ID 입력
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

⚠️ 주의: 위 코드의 G-XXXXXXXXXX 부분을 본인의 실제 측정 ID로 반드시 변경해야 합니다.

4. 설치 확인

코드를 적용하고 배포한 뒤, Google Analytics 대시보드의 [보고서] > [실시간] 탭을 확인하세요.
내 사이트에 접속했을 때 사용자 수가 1명 이상으로 잡히면 성공입니다.