Hugo 블로그 구축기 - 이 글은 시리즈의 일부입니다.

부분 : 이 글

Hugo 블로그에 Google Analytics 4 연동하기
#

블로그를 운영하다 보면 **“과연 얼마나 많은 사람들이 내 글을 읽을까?”**라는 궁금증이 생기죠. GitHub Actions로 자동 배포까지 완성된 지금, 다음 단계는 바로 방문자 분석이에요!

오늘은 Hugo BlowFish 테마에서 Google Analytics 4(GA4)를 연동하는 방법을 알아보겠습니다. 생각보다 간단하지만, 몇 가지 함정이 있어서 실제로는 헤맬 수 있거든요. 🤔

왜 Google Analytics가 필요할까?
#

블로그를 운영하면서 이런 것들이 궁금하지 않나요?

실시간 방문자 수: 지금 내 블로그를 보고 있는 사람이 몇 명인지
인기 포스트: 어떤 글이 가장 많이 읽히는지
유입 경로: 사람들이 어떻게 내 블로그를 찾아오는지
방문자 위치: 어느 나라, 어느 도시에서 접속하는지

이런 데이터가 쌓이면 어떤 주제로 글을 써야 할지, 어떤 방식으로 홍보해야 할지 감이 잡히더라고요!

GA4 계정 만들기 - 차근차근 따라해보세요
#

이미 Google Analytics 계정이 있다면 새 속성 추가만 하면 되고, 처음이라면 계정부터 생성해야 해요. 저는 다른 사이트가 이미 연결되어 있어서 새 속성을 추가했는데, 각 사이트별로 독립적인 분석이 가능해서 좋더라고요.

1-1. Google Analytics 접속
#

Google Analytics 사이트 접속: https://analytics.google.com/
Google 계정으로 로그인 (Gmail 계정 사용)
“측정 시작” 버튼 클릭

1-2. 계정 설정
#

계정 이름 입력:

예시: CoderRed Blog Analytics

계정 데이터 공유 설정:

✅ Google 제품 및 서비스
✅ 벤치마킹 (선택사항)
✅ 기술 지원 (선택사항)
✅ 계정 전문가 (선택사항)

→ “다음” 클릭

1-3. 속성 설정
#

속성 이름:

CoderRed Blog

보고 시간대:

대한민국 (GMT+09:00) Seoul

통화:

대한민국 원 (₩)

→ “다음” 클릭

1-4. 비즈니스 정보
#

업종 카테고리:

컴퓨터 및 전자제품 > 소프트웨어
또는
참고 자료 > 온라인 커뮤니티

비즈니스 규모:

소규모 - 직원 1~10명

Google Analytics 사용 목적: (해당되는 것들 체크)

✅ 사이트 또는 앱의 사용자 행동 검토
✅ 광고 실적 측정
✅ 사용자에게 맞는 환경 구축

→ “만들기” 클릭

1-5. 약관 동의
#

Google Analytics 서비스 약관 동의
데이터 처리 조건 동의 (한국 선택)
“동의함” 클릭

2. 데이터 스트림 설정
#

2-1. 플랫폼 선택
#

“웹” 선택 (블로그이므로)

2-2. 웹 스트림 설정
#

웹사이트 URL:

https://coderred.com

스트림 이름:

CoderRed Blog - Main

향상된 측정 설정: (기본값 그대로 유지 권장)

✅ 페이지 조회수
✅ 스크롤
✅ 이탈 클릭
✅ 사이트 검색
✅ 동영상 참여도
✅ 파일 다운로드

→ “스트림 만들기” 클릭

3. 측정 ID 확인 및 복사
#

3-1. 측정 ID 찾기
#

스트림이 생성되면 자동으로 “웹 스트림 세부정보” 페이지로 이동

측정 ID 형태:

G-XXXXXXXXXX
예시: G-1234567890

3-2. 태그 설정 확인
#

“Google 태그” 섹션에서:

측정 ID: G-XXXXXXXXXX ← 이것을 복사!
전역 사이트 태그(gtag.js): 나중에 필요하면 참고용

4. Hugo BlowFish에 GA4 연동
#

여기서 중요한 포인트! BlowFish 테마에서는 일반적인 googleAnalytics = "G-XXXXX" 방식이 작동하지 않을 수 있어요. 최신 Hugo 버전에서는 services 방식을 사용해야 합니다.

4-1. config.toml 수정 (BlowFish 테마)
#

config/_default/config.toml 파일에 다음 섹션을 추가:

# Google Analytics 4 (최신 Hugo 버전 방식)
[services]
  [services.googleAnalytics]
    id = "G-XXXXXXXXXX"  # 위에서 복사한 측정 ID

주의사항:

services 섹션 안에 중첩된 구조로 작성
id = “G-XXXXXXXXXX” 형태로 정확히 입력
기존의 googleAnalytics = “G-XXXXXXXXXX” 방식은 구버전

참고: 다른 방법들

# 구버전 Hugo 방식 (일부 테마에서 작동)
googleAnalytics = "G-XXXXXXXXXX"

# params.toml에 직접 추가 (수동 설정)
[analytics]
  google = "G-XXXXXXXXXX"

4-2. 설정 저장 및 배포
#

# 로컬에서 테스트
hugo server -D

# 브라우저에서 개발자 도구 열고 Network 탭 확인
# gtag 관련 요청이 나가는지 확인

# 정상 작동하면 배포
git add .
git commit -m "Google Analytics 4 설정 추가"
git push origin main

5. 작동 확인
#

5-1. 실시간 보고서 확인
#

Google Analytics → 보고서 → 실시간
본인이 블로그 접속
1-2분 내에 실시간 사용자 1명 표시되는지 확인

5-2. 개발자 도구로 확인
#

Chrome 개발자 도구:

F12 → Network 탭
블로그 새로고침
google-analytics.com 또는 googletagmanager.com 요청 확인

5-3. Google Tag Assistant (선택사항)
#

Chrome 확장프로그램:

“Tag Assistant Legacy (by Google)” 설치
블로그 방문 후 확장프로그램 클릭
Google Analytics 태그가 정상 작동하는지 확인

6. 유용한 보고서들
#

6-1. 실시간 보고서
#

보고서 → 실시간

현재 접속자 수
실시간 페이지뷰
사용자 위치
트래픽 소스

6-2. 잠재고객 보고서
#

보고서 → 잠재고객

사용자 개요
인구통계 (연령, 성별)
기술 (브라우저, OS, 기기)
지역 (국가, 도시)

6-3. 획득 보고서
#

보고서 → 획득

사용자 획득 (첫 방문 경로)
트래픽 획득 (세션별 경로)
채널별 트래픽 분석

6-4. 참여도 보고서
#

보고서 → 참여도

페이지 및 화면 ← 가장 중요! 인기 포스트 확인
이벤트 (스크롤, 클릭 등)
전환 (목표 달성)

6-5. 수익 창출 보고서 (광고 운영시)
#

보고서 → 수익 창출

AdSense 수익
제휴 마케팅 수익
전자상거래 추적

7. 고급 설정 (선택사항)
#

7-1. 맞춤 이벤트 설정
#

특정 링크 클릭 추적:

<!-- 포스트 내에서 외부 링크 추적 -->
<a href="https://github.com/user/repo" 
   onclick="gtag('event', 'click', {
     'event_category': 'outbound',
     'event_label': 'github-link'
   });">
   GitHub 저장소
</a>

7-2. 목표(전환) 설정
#

관리 → 데이터 디스플레이 → 전환:

특정 페이지 방문 (예: /about 페이지)
특정 이벤트 발생 (예: 댓글 작성)
체류시간 기준 (예: 3분 이상)

7-3. 맞춤 측정기준
#

관리 → 데이터 디스플레이 → 맞춤 정의:

포스트 카테고리별 분석
시리즈별 조회수
태그별 인기도

7-4. 연결된 사이트 태그 (여러 도메인)
#

만약 나중에 서브도메인이나 다른 사이트를 추가할 경우:

[services]
  [services.googleAnalytics]
    id = "G-XXXXXXXXXX"
    # 여러 도메인 추가 설정은 Hugo 템플릿 커스터마이징 필요

8. 개인정보보호 설정
#

8-1. IP 익명화 (GDPR 대응)
#

GA4는 기본적으로 IP를 자동 익명화하므로 별도 설정 불필요

8-2. 쿠키 동의 배너 (선택사항)
#

법적 요구사항이 있는 경우:

<!-- layouts/partials/head.html에 추가 -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// 쿠키 동의 전까지 추적 비활성화
gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied'
});

// 사용자 동의 후 활성화 (쿠키 배너에서 호출)
function enableAnalytics() {
  gtag('consent', 'update', {
    'ad_storage': 'granted',
    'analytics_storage': 'granted'
  });
}
</script>

9. 문제 해결
#

9-1. 데이터가 안 보이는 경우
#

체크리스트:

측정 ID가 정확한가? (G-로 시작)
services.googleAnalytics.id 형태로 설정했나?
Hugo 빌드 후 배포했나?
애드블록 비활성화 했나?
24시간 정도 기다렸나? (완전한 데이터 반영)

9-2. BlowFish 테마 관련 이슈
#

해결 방법 순서:

services 방식 사용 (최신 Hugo 표준):

[services]
  [services.googleAnalytics]
    id = "G-XXXXXXXXXX"

구버전 방식 시도:
```
googleAnalytics = "G-XXXXXXXXXX"
```
루트 config.toml 파일 확인: 프로젝트 루트에 config.toml 파일이 있으면 삭제

테마 업데이트:

# git submodule 방식
git submodule update --remote themes/blowfish

# Hugo Module 방식  
hugo mod get -u

9-3. 실시간 데이터는 있는데 보고서가 비어있는 경우
#

정상 현상: GA4는 데이터 처리에 24-48시간 소요
실시간 보고서만 즉시 반영됨

9-4. 내 접속이 너무 많이 집계되는 경우
#

필터 설정:

관리 → 데이터 설정 → 데이터 필터
“내부 트래픽” 필터 생성
본인 IP 주소 제외

10. 블로그 운영에 유용한 분석 팁
#

10-1. 주간/월간 체크 항목들
#

인기 포스트 TOP 10
검색 키워드 (Search Console 연결 필요)
방문자 추이
평균 세션 시간

10-2. 콘텐츠 전략에 활용
#

높은 조회수 포스트: 비슷한 주제로 확장
높은 이탈률 페이지: 콘텐츠 개선 필요
유입 키워드: SEO 최적화 방향

10-3. 정기 보고서 자동화
#

Google Analytics → 라이브러리 → 맞춤 보고서:

월간 블로그 성과 리포트
포스트별 상세 분석
이메일 자동 발송 설정

이제 GA4 설정 완료! 🎉

24-48시간 후에 완전한 데이터가 나타나니까 조금만 기다려보세요. 그 전에도 실시간 보고서에서는 바로 확인 가능해요!

블로그 운영이 재미있어지는 순간
#

데이터가 쌓이기 시작하면 정말 재미있어져요:

주간 체크 루틴:

월요일 아침에 지난 주 통계 확인
인기 포스트 TOP 5 파악
새로운 유입 키워드 발견
평균 읽기 시간이 긴 글 분석

콘텐츠 전략 개선:

높은 조회수 포스트 → 비슷한 주제로 시리즈 확장
높은 이탈률 페이지 → 내용 보완이나 가독성 개선
검색 유입 키워드 → SEO 최적화 방향 설정

블로그 쓰는 재미가 두 배가 될 거예요! 다음에는 댓글 시스템이나 검색 기능도 추가해봐야겠네요. 😊

Hugo 블로그 구축기 - 이 글은 시리즈의 일부입니다.

부분 : 이 글

부분 : Hugo 블로그 구축기 3편 - CI/CD 파이프라인 구축

부분 : Hugo 블로그 구축기 2편 - 실제 겪은 문제들과 해결책

부분 : Hugo 블로그 구축기 1편 - 환경 설정부터 배포까지

Hugo 블로그에 Google Analytics 4 연동하기#

왜 Google Analytics가 필요할까?#

GA4 계정 만들기 - 차근차근 따라해보세요#

1-1. Google Analytics 접속#

1-2. 계정 설정#

1-3. 속성 설정#

1-4. 비즈니스 정보#

1-5. 약관 동의#

2. 데이터 스트림 설정#

2-1. 플랫폼 선택#

2-2. 웹 스트림 설정#

3. 측정 ID 확인 및 복사#

3-1. 측정 ID 찾기#

3-2. 태그 설정 확인#

4. Hugo BlowFish에 GA4 연동#

4-1. config.toml 수정 (BlowFish 테마)#

4-2. 설정 저장 및 배포#

5. 작동 확인#

5-1. 실시간 보고서 확인#

5-2. 개발자 도구로 확인#

5-3. Google Tag Assistant (선택사항)#

6. 유용한 보고서들#

6-1. 실시간 보고서#

6-2. 잠재고객 보고서#

6-3. 획득 보고서#

6-4. 참여도 보고서#

6-5. 수익 창출 보고서 (광고 운영시)#

7. 고급 설정 (선택사항)#

7-1. 맞춤 이벤트 설정#

7-2. 목표(전환) 설정#

7-3. 맞춤 측정기준#

7-4. 연결된 사이트 태그 (여러 도메인)#

8. 개인정보보호 설정#

8-1. IP 익명화 (GDPR 대응)#

8-2. 쿠키 동의 배너 (선택사항)#

9. 문제 해결#

9-1. 데이터가 안 보이는 경우#

9-2. BlowFish 테마 관련 이슈#

9-3. 실시간 데이터는 있는데 보고서가 비어있는 경우#

9-4. 내 접속이 너무 많이 집계되는 경우#

10. 블로그 운영에 유용한 분석 팁#

10-1. 주간/월간 체크 항목들#

10-2. 콘텐츠 전략에 활용#

10-3. 정기 보고서 자동화#

블로그 운영이 재미있어지는 순간#