트래픽 및 사용자 행동 추적

웹사이트를 운영하면서 방문자가 어디서 오고, 어떤 행동을 하는지 파악하는 것은 필수입니다.
Google Analytics 4(GA4)와 Hotjar를 설치하여 데이터 기반의 의사결정을 시작하세요.

※ 코드 입력은 바이브 코딩으로 진행하세요.

1. Google Analytics 4 (GA4) 설치

GA4는 구글이 제공하는 무료 웹 분석 도구입니다.
방문자 수, 유입 경로, 페이지별 조회수, 이탈률 등 핵심 지표를 한눈에 파악할 수 있습니다.

Step 1: GA4 계정 및 속성 생성

  1. Google Analytics에 접속하여 구글 계정으로 로그인합니다.
  2. 좌측 하단의 [관리자(톱니바퀴)] 아이콘을 클릭합니다.
  3. [계정 만들기] 또는 [속성 만들기]를 클릭하여 새 속성을 생성합니다.
  4. 웹사이트 URL과 스트림 이름을 입력한 후 [스트림 만들기]를 클릭합니다.

Step 2: 측정 ID 복사

속성이 생성되면 측정 ID가 발급됩니다. (예: G-XXXXXXXXXX)
이 ID를 복사해 두세요. 앞으로 웹사이트에 연동할 때 필요합니다.

Step 3: Next.js에 GA4 적용

Next.js 프로젝트에서 GA4를 적용하는 가장 간단한 방법은 next/script를 사용하는 것입니다.
src/app/layout.js 파일에 아래 코드를 추가하세요.

import Script from 'next/script';

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

💡 Tip: G-XXXXXXXXXX 부분을 본인의 측정 ID로 교체하세요.
배포 후 24~48시간 내에 GA4 대시보드에 데이터가 수집되기 시작합니다.

2. Hotjar 설치

Hotjar는 사용자 행동을 시각적으로 분석할 수 있는 도구입니다.
히트맵(Heatmap), 세션 녹화(Recording), 사용자 피드백 수집 등의 기능을 제공합니다.

Hotjar Dashboard

▲ Hotjar 대시보드 화면

Step 1: Hotjar 계정 생성

  1. Hotjar.com에 접속하여 무료 계정을 생성합니다.
  2. 사이트 URL을 등록하고 Tracking Code를 발급받습니다.

Step 2: Next.js에 Hotjar 적용

GA4와 마찬가지로 next/script를 사용합니다.
src/app/layout.js에 아래 코드를 추가하세요.

<Script id="hotjar" strategy="afterInteractive">
  {`
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  `}
</Script>

💡 Tip: YOUR_HOTJAR_ID 부분을 Hotjar 대시보드에서 발급받은 Site ID로 교체하세요.

Hotjar 주요 기능

  • 히트맵: 사용자가 어디를 클릭하고, 어디까지 스크롤하는지 시각적으로 확인합니다.
  • 세션 녹화: 실제 사용자의 마우스 움직임과 행동을 녹화하여 UX 문제를 발견합니다.
  • 피드백 위젯: 사용자에게 직접 피드백을 요청하여 정성적 데이터를 수집합니다.

💡 종합: GA4는 정량적 데이터(숫자, 비율)를, Hotjar는 정성적 데이터(행동, 맥락)를 제공합니다.
두 도구를 함께 사용하면 데이터 기반의 사이트 개선이 훨씬 수월해집니다.

←→방향키로 이동