Quartz 4

Quartz 블로그에서 방문자 수 확인 (google analytics)

3 min read

Quartz 블로그에 Google Analytics 추가하기

소요 시간: 10분

1. Google Analytics 설정

측정 ID 발급

  1. Google Analytics 접속 및 로그인

  2. 관리자 페이지 (왼쪽 하단 톱니바퀴 ⚙️)

  3. 속성 만들기

    + 만들기 → 속성

속성 이름: Quartz 블로그
보고 시간대: 대한민국
통화: 한국 원 (₩)

  4. 데이터 스트림 추가

    데이터 수집 및 수정 → 데이터 스트림 → 웹

웹사이트 URL: https://your-site.pages.dev
스트림 이름: Quartz Blog

  5. 측정 ID 복사

    형식: G-XXXXXXXXXX

2. Quartz 설정

quartz.config.ts 파일 수정:

const config: QuartzConfig = {
  configuration: {
    pageTitle: "내 블로그",
    enableSPA: true,
    enablePopovers: true,
    
    // Google Analytics 추가
    analytics: {
      provider: "google",
      tagId: "G-XXXXXXXXXX",  // 복사한 측정 ID
    },
    
    locale: "ko-KR",
    baseUrl: "your-site.pages.dev",
    // ... 나머지 설정
  },
}

3. 배포 및 확인

배포

git add quartz.config.ts
git commit -m "Add Google Analytics"
git push

작동 확인

  1. 브라우저에서 자신의 블로그 접속
  2. 개발자 도구(F12) → Network 탭
  3. gtag 검색 → 스크립트 로딩 확인

데이터 확인

Google Analytics → 보고서 → 실시간

1-2분 내 자신의 방문 기록 표시됨

참고사항

  • 데이터 수집 시작: 설정 직후부터
  • 실시간 데이터: 즉시 확인 가능
  • 과거 데이터: 24시간 후 정확한 통계
  • 개인정보 보호: EU/한국 사용자는 쿠키 동의 배너 고려

대안: Cloudflare Web Analytics

Google Analytics보다 가볍고 프라이버시 친화적:

// quartz.config.ts
analytics: {
  provider: "cloudflare",
  siteToken: "YOUR_CLOUDFLARE_TOKEN",
}

장점:

  • 쿠키 없음 (GDPR 친화적)
  • 더 빠른 로딩
  • 간단한 통계

단점:

  • 기본 통계만 제공
  • 상세 분석 부족

트러블슈팅

GA 스크립트가 안 보임

# 캐시 문제일 수 있음
# 브라우저 시크릿 모드에서 확인

데이터가 수집 안 됨

1. 측정 ID 다시 확인
2. quartz.config.ts 구문 오류 확인
3. 빌드 로그 확인

과도한 트래픽 집계

Google Analytics → 관리 → 데이터 필터
→ Internal Traffic 필터 추가 (자신의 IP 제외)

relates

Graph View