트래픽 및 사용자 행동 추적
웹사이트를 운영하면서 방문자가 어디서 오고, 어떤 행동을 하는지 파악하는 것은 필수입니다. Google Analytics 4(GA4)와 Hotjar를 설치하여 데이터 기반의 의사결정을 시작하세요.
※ 코드 입력은 바이브 코딩으로 진행하세요.
GA4 (Google Analytics 4)
GA4는 구글이 제공하는 무료 웹 분석 도구입니다. 방문자 수, 유입 경로, 페이지별 조회수, 이탈률 등 핵심 지표를 한눈에 파악할 수 있습니다.
Step 1: GA4 계정 및 속성 생성
- Google Analytics에 접속하여 구글 계정으로 로그인합니다.
- 좌측 하단의 [관리자(톱니바퀴)] 아이콘을 클릭합니다.
- [계정 만들기] 또는 [속성 만들기]를 클릭하여 새 속성을 생성합니다.
- 웹사이트 URL과 스트림 이름을 입력한 후 [스트림 만들기]를 클릭합니다.
Step 2: 측정 ID 복사
속성이 생성되면 측정 ID가 발급됩니다. 이 ID를 복사해 두세요. 앞으로 웹사이트에 연동할 때 필요합니다.
G-XXXXXXXXXX
Step 3: Next.js에 GA4 적용
바이브 코딩(AI 에이전트)에게 "위 측정 ID로 트래픽 추적이 가능하도록 Google Analytics 4(GA4)를 적용해 줘"라고 요청하세요. AI가 프로젝트 레이아웃 파일에 GA4 추적 스크립트를 올바르게 삽입해 줍니다.
Hotjar (핫자)
Hotjar는 사용자 행동을 시각적으로 분석할 수 있는 도구입니다. 히트맵(Heatmap), 세션 녹화(Recording), 사용자 피드백 수집 등의 기능을 제공합니다.
▲ Hotjar 대시보드 화면
Step 1: Hotjar 계정 생성
- Hotjar.com에 접속하여 무료 계정을 생성합니다.
- 사이트 URL을 등록하고 Tracking Code를 발급받습니다.
Step 2: Next.js에 Hotjar 적용
바이브 코딩(AI 에이전트)에게 "위 트래킹 코드를 바탕으로 Hotjar 라이브러리를 설치하고 사이트에 연동해 줘"라고 요청하세요. AI가 필요한 패키지를 자동으로 설치하고 연동해 줍니다.
Hotjar 주요 기능
- 히트맵: 사용자가 어디를 클릭하고, 어디까지 스크롤하는지 시각적으로 확인합니다.
- 세션 녹화: 실제 사용자의 마우스 움직임과 행동을 녹화하여 UX 문제를 발견합니다.
- 피드백 위젯: 사용자에게 직접 피드백을 요청하여 정성적 데이터를 수집합니다.
💡 종합: GA4는 정량적 데이터(숫자, 비율)를, Hotjar는 정성적 데이터(행동, 맥락)를 제공합니다. 두 도구를 함께 사용하면 데이터 기반의 사이트 개선이 훨씬 수월해집니다.