본문으로 건너뛰기

08. 방문 통계 (Google Analytics 4)

1. 개요​

GitHub Pages에는 사이트 방문자 통계 기능이 없음.

위치보여주는 것
GitHub 저장소 → Insights → Traffic저장소(코드 페이지) 방문 통계. 사이트 방문자와 무관
Search Console / 서치어드바이저검색을 통해 들어온 클릭 수, 검색어
방문 분석 도구 (GA4 등)사이트 전체 방문자, 페이지별 조회수, 유입 경로

→ 사이트 전체 방문 현황을 보려면 별도의 분석 도구 연결이 필요함.

2. 도구 비교​

도구비용특징
Google Analytics 4 (선택)무료기능이 가장 많음 (실시간, 유입 경로, 페이지별 조회수, 체류 시간). Docusaurus 기본 지원
Cloudflare Web Analytics무료쿠키 미사용, 개인정보 수집 최소화. 기능은 단순
네이버 애널리틱스무료국내 유입 분석 화면에 익숙함

GA4를 선택한 이유:

  • Search Console과 같은 구글 계정으로 관리 가능 (추후 검색어별 유입 연동)
  • Docusaurus classic preset에 gtag 옵션이 포함되어 있어 config 몇 줄로 설정 가능
  • 상세 분석 기능

3. GA4 계정 · 속성 · 웹 스트림 생성​

analytics.google.com → 측정 시작

단계입력 값
계정 만들기계정 이름: SecureNomad
속성 만들기속성 이름: SecureNomad Wiki / 시간대: 대한민국 / 통화: 원(₩)
비즈니스 정보업종 · 규모 · 목표 적당히 선택 (예: 트래픽 이해)
데이터 수집플랫폼: 웹
웹 스트림URL: https://wiki.securenomad.kr / 스트림 이름: SecureNomad Wiki / 향상된 측정 켜기

스트림을 만들면 측정 ID(G-XXXXXXXXXX)가 발급됨. GA4가 안내하는 설치 코드는 직접 붙여 넣지 않고 Docusaurus 설정으로 대신함.

:::info 향상된 측정 페이지 조회 외에 스크롤, 외부 링크 클릭, 사이트 내 검색, 파일 다운로드 등을 코드 추가 없이 자동으로 측정함. :::

4. Docusaurus 설정​

docusaurus.config.js 의 classic preset 옵션에 gtag 를 추가함.

docusaurus.config.js (presets → classic)
        gtag: {                        // Google Analytics 4 방문 통계
          trackingID: 'G-XXXXXXXXXX',
          anonymizeIP: true,
        },
옵션의미
trackingIDGA4 측정 ID
anonymizeIPIP 익명화. GA4는 기본적으로 IP를 저장하지 않지만 명시적으로 설정함

빌드 결과의 모든 페이지 <head> 에 GA4 스크립트(googletagmanager.com/gtag/js?id=...)가 들어감. Docusaurus는 페이지 이동이 새로고침 없이 일어나는 구조(SPA)인데, gtag 플러그인이 페이지 이동마다 조회를 기록해 줌.

:::note 측정 ID 공개 여부 측정 ID는 사이트 소스에 노출되는 값이라 비밀 정보는 아님. 다만 문서에는 자리 표시로만 기록함. :::

5. 방문 통계 수집 안내 (About)​

GA4는 쿠키로 방문자를 구분하므로, 개인 사이트라도 방문자 정보를 수집하는 셈임. 보안 담당자로서 수집 사실을 알리는 것이 맞다고 판단해 About 페이지에 안내를 추가함.

항목안내 내용
수집 항목방문 페이지, 방문 일시, 유입 경로, 브라우저 · 기기 종류, 대략적 지역
수집 방식Google Analytics 스크립트 및 쿠키
이용 목적방문 통계 확인 및 콘텐츠 개선
미수집 항목이름, 연락처 등 개인을 직접 식별할 수 있는 정보
거부 방법브라우저 쿠키 차단, Google Analytics 차단 부가기능

:::caution 배포 순서 안내문만 먼저 배포되면 실제로는 수집하지 않는데 수집한다고 안내하는 상태가 되므로, GA4 설정과 안내문을 같은 커밋으로 배포함. :::

6. 배포 후 확인​

  1. Commit → Push → GitHub Actions 배포 완료 대기
  2. 다른 브라우저 또는 휴대폰으로 https://wiki.securenomad.kr 접속
  3. GA4 보고서 → 실시간 에서 활성 사용자 1명 확인

집계되지 않는 경우​

원인설명
로컬 미리보기npm start 로 보는 localhost 화면은 GA4가 동작하지 않음 (프로덕션 빌드에서만 동작)
광고 차단기광고 차단 확장 프로그램이 GA4 스크립트를 차단함
배포 전Actions 배포가 끝나기 전에는 이전 버전이 표시됨

배포된 페이지에서 우클릭 → 페이지 소스 보기 → gtag/js?id= 검색으로 스크립트 포함 여부를 확인할 수 있음.

7. 조회수 확인 방법​

GA4 왼쪽 보고서 메뉴 기준.

보고 싶은 것위치
지금 접속 중인 사용자보고서 → 실시간
일별 방문자 수보고서 → 보고서 개요 (기간 선택)
페이지별 조회수보고서 → 참여도 → 페이지 및 화면
유입 경로 (검색, 직접 접속, 링크)보고서 → 획득 → 트래픽 획득
국가 · 도시보고서 → 사용자 속성 → 인구통계 세부정보
기기 · 브라우저보고서 → 기술 → 기술 세부정보

:::info 데이터 반영 시간 실시간 보고서는 바로 반영되지만, 일별 통계 보고서는 보통 하루 정도 지나야 쌓임. :::

8. 이후 할 일​

  • Search Console 연동: 데이터가 쌓인 뒤 GA4 관리 → 제품 링크 → Search Console 링크 에서 연결하면 GA4에서 검색어별 유입을 함께 볼 수 있음
  • 내 방문 제외 (선택): 관리 → 데이터 스트림 → 태그 설정 → 내부 트래픽 정의 에서 내 IP를 등록하고 데이터 필터를 활성화하면 본인 방문을 통계에서 제외할 수 있음
최종 수정: 에