2026-06-18

GitHub Pages 블로그에 GA4 붙이고 Realtime으로 확인하기

Hexo와 GitHub Pages로 운영하는 정적 블로그에 Google Analytics 4를 붙이고, 실제 데이터가 들어오는지 Realtime pages에서 확인하는 과정을 정리합니다.

GitHub Pages에 블로그를 올리고 나면 바로 궁금해지는 것이 있다. 사람이 들어오기는 하는지, 어떤 글을 읽는지, 검색으로 들어오는지 직접 주소로 들어오는지 알고 싶어진다. 이때 가장 먼저 붙이기 좋은 도구가 Google Analytics 4, 줄여서 GA4다.

이번 글은 Hexo로 만든 GitHub Pages 블로그에 GA4를 붙이고, 실제로 데이터가 들어오는지 확인한 과정을 정리한 튜토리얼이다. 예시는 이 블로그의 실제 설정을 바탕으로 한다.

목표

이 글에서 하는 일은 네 가지다.

GA4에서 Web data stream을 만든다.
GitHub Pages 블로그에 Google tag를 넣는다.
배포 후 HTML에 태그가 들어갔는지 확인한다.
GA4의 Realtime pages에서 실제 조회가 잡히는지 확인한다.

공식 문서 기준으로 Google tag는 Google Analytics 같은 Google 측정 제품에 데이터를 보내기 위해 사이트에 넣는 태그다. GA4 Realtime은 최근 30분 범위의 이벤트와 사용 데이터를 보여준다.

1. GA4 Web Stream 만들기

Google Analytics에 들어가서 새 속성이나 기존 속성 안에 Web stream을 만든다.

내 경우 값은 이렇게 맞췄다.

1
2
3

Stream Name: Reasonofmoon Devlog Web
Stream URL: https://reasonofmoon.github.io
Measurement ID: G-XHD07N5RX1

여기서 중요한 값은 Measurement ID다. 보통 G-로 시작한다. 이 값이 나중에 블로그 HTML 안에 들어간다.

GA4 화면에서 위치는 대략 이렇다.

Admin
→ Data collection and modification
→ Data streams
→ Web stream 선택
→ View tag instructions

설치 안내를 열면 아래와 비슷한 Google tag 코드가 나온다.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

실제 블로그에는 G-XXXXXXXXXX 자리에 본인의 Measurement ID를 넣는다.

2. Hexo 테마에 GA4 ID 연결하기

내 블로그는 Hexo 테마 설정에서 GA4 ID를 받도록 만들어 두었다. 그래서 테마 설정 파일에 Measurement ID를 넣었다.

1	google_analytics: G-XHD07N5RX1

그리고 head.ejs에서 Google Analytics partial이 로드되도록 했다.

<head>
  <meta charset="utf-8">
  <%- partial('google-analytics') %>
  ...
</head>

Google tag partial은 설정값이 있을 때만 스크립트를 출력한다.

<% if (theme.google_analytics){ %>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= theme.google_analytics %>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<%= theme.google_analytics %>');
</script>
<!-- End Google Analytics -->
<% } %>

정적 블로그에서는 서버 코드가 없어도 된다. 최종 HTML의 <head> 안에 이 스크립트가 들어가기만 하면 GA4가 페이지뷰를 받을 수 있다.

3. Privacy 페이지도 같이 정리하기

방문 통계를 수집한다면 Privacy 페이지도 같이 정리하는 것이 좋다. 이 블로그에는 GA4 사용 사실을 이렇게 적어 두었다.

1
2

이 블로그는 방문 흐름을 이해하기 위해 Google Analytics 4를 사용합니다.
이 경우 페이지 조회, 유입 경로, 대략적인 지역, 브라우저 정보 같은 집계 정보가 기록될 수 있습니다.

나중에 AdSense를 붙일 계획이 있다면 Privacy 페이지에 쿠키와 외부 서비스 사용 가능성도 미리 적어 두는 편이 좋다. 광고를 바로 붙이지 않더라도, 운영 원칙을 먼저 정리해 두면 나중에 수정할 부분이 줄어든다.

4. 빌드하고 배포하기

Hexo에서는 보통 아래 순서로 정적 파일을 다시 만든다.

1
2
3

npx hexo clean
npx hexo generate
npx hexo deploy

이 블로그는 GitHub Pages 배포 브랜치를 gh-pages로 쓰고 있다. 소스는 main에 커밋하고, hexo deploy가 생성된 정적 파일을 gh-pages로 밀어 올리는 구조다.

5. HTML에 태그가 들어갔는지 확인하기

배포 전에 로컬 생성물에서 먼저 확인할 수 있다.

1
2
3

$html = Get-Content .\public\index.html -Raw
$html -match "G-XHD07N5RX1"
$html -match "googletagmanager.com/gtag/js"

배포 후에는 공개 URL을 직접 확인한다.

$r = Invoke-WebRequest -Uri "https://reasonofmoon.github.io/" -UseBasicParsing
$r.Content -match "G-XHD07N5RX1"
$r.Content -match "googletagmanager.com/gtag/js"
$r.Content -match "gtag\('config', 'G-XHD07N5RX1'\)"

셋 다 True라면 GitHub Pages HTML 안에 GA4 태그가 들어간 것이다.

6. GA4에서 Data flowing 확인하기

GA4의 Web stream 상세 화면으로 돌아가면 처음에는 이런 경고가 보일 수 있다.

1	Data collection isn't active for your website.

방금 설치했다면 바로 사라지지 않을 수 있다. 시간이 조금 지나고 실제 페이지뷰가 들어오면 아래처럼 바뀐다.

1 2	Data collection is active in the past 48 hours. Data flowing

이 문구가 뜨면 Google이 해당 stream에서 데이터를 받고 있다는 뜻이다.

7. Realtime pages에서 확인하기

GA4 화면에서 실시간 확인은 이쪽으로 들어간다.

1
2
3

Reports
→ Realtime
→ Realtime pages

여기서 봐야 할 값은 두 가지다.

1 2	Active users in last 30 minutes Views in last 30 minutes

내가 확인했을 때는 이런 식으로 나왔다.

Views in last 30 minutes: 20

Page path and screen class
/
/about/
/page/2/
/topics/ai-agent-lab/
/topics/blog-ops/
/topics/learning-notes/
/2026/06/16/llm-wiki-번역해설/

이렇게 reasonofmoon.github.io의 실제 경로가 보이면 성공이다.

8. Active users가 0이어도 당황하지 않기

처음에는 이상한 장면을 볼 수 있다.

1 2	Active users in last 30 minutes: 0 Views in last 30 minutes: 20

처음 보면 모순처럼 보인다. 하지만 설치 검증 단계에서는 Views와 Page path가 잡히는지가 더 중요하다. 브라우저 광고 차단기, 추적 방지 설정, GA4 화면 갱신 타이밍 때문에 active users가 늦거나 0으로 보일 수 있다.

확인할 때는 이렇게 하는 편이 낫다.

GA4 Realtime pages를 켜 둔다.
다른 브라우저나 시크릿 창에서 블로그에 접속한다.
광고 차단기와 추적 차단 확장 프로그램을 잠시 끈다.
홈만 보지 말고 글과 topic 페이지를 몇 개 클릭한다.
1-2분 기다린다.

9. 헷갈렸던 지점

이번에 실제로 헷갈렸던 지점은 세 가지였다.

첫째, 블로그 화면에는 Realtime 메뉴가 없다. Realtime은 내 블로그가 아니라 Google Analytics 사이트 안에 있다.

둘째, GA4의 Home이나 Reports snapshot은 전체 요약 화면이다. Realtime을 보려면 왼쪽 메뉴에서 Reports → Realtime으로 들어가야 한다.

셋째, 기존에 다른 사이트 데이터를 보던 GA4 property라면 MoonLang 같은 예전 페이지 제목이 같이 보일 수 있다. 이럴 때는 Data stream의 URL과 Measurement ID가 현재 블로그와 맞는지 확인해야 한다.

10. 최소 체크리스트

GA4가 제대로 붙었는지 확인할 때는 아래 순서로 보면 된다.

[ ] GA4 Web stream URL이 https://reasonofmoon.github.io 로 되어 있는가?
[ ] Measurement ID가 블로그 HTML에 들어갔는가?
[ ] googletagmanager.com/gtag/js 스크립트가 로드되는가?
[ ] gtag('config', 'G-XXXXXXXXXX') 호출이 있는가?
[ ] GA4 stream 화면에 Data flowing이 뜨는가?
[ ] Realtime pages에 /, /about/, /topics/... 같은 실제 경로가 보이는가?

이 체크리스트를 통과하면 설치는 끝난 것이다. 이후부터는 실시간 숫자 하나에 집착하기보다, 하루 단위로 Reports → Engagement → Pages and screens에서 어떤 글이 읽혔는지 보는 것이 더 실용적이다.

AI agent 실습과 학습 노트를 운영 가능한 기록으로 남깁니다.

GitHub Pages 블로그에 GA4 붙이고 Realtime으로 확인하기

목표

1. GA4 Web Stream 만들기

2. Hexo 테마에 GA4 ID 연결하기

3. Privacy 페이지도 같이 정리하기

4. 빌드하고 배포하기

5. HTML에 태그가 들어갔는지 확인하기

6. GA4에서 Data flowing 확인하기

7. Realtime pages에서 확인하기

8. Active users가 0이어도 당황하지 않기

9. 헷갈렸던 지점

10. 최소 체크리스트

참고 자료

댓글

목표

1. GA4 Web Stream 만들기

2. Hexo 테마에 GA4 ID 연결하기

3. Privacy 페이지도 같이 정리하기

4. 빌드하고 배포하기

5. HTML에 태그가 들어갔는지 확인하기

6. GA4에서 Data flowing 확인하기

7. Realtime pages에서 확인하기

8. Active users가 0이어도 당황하지 않기

9. 헷갈렸던 지점

10. 최소 체크리스트

참고 자료

더 읽어보기

댓글