1. Web Analytics를 추가하려는 이유#

Cloudflare Pages를 통해 블로그를 배포하면, 사이트가 정상적으로 열리는지는 확인할 수 있다.

하지만 단순히 사이트가 열린다는 것만으로는 부족하다. 실제로 블로그가 운영되기 시작하면 다음과 같은 정보가 필요해진다.

방문자가 실제로 들어오고 있는지
어떤 국가에서 요청이 발생하는지
어떤 페이지가 많이 조회되는지
페이지 조회수와 방문 수가 어느 정도인지
HTTPS 요청이 정상적으로 처리되고 있는지

Cloudflare Analytics 화면에서는 전체 요청 수, 대역폭, 방문 수, 페이지뷰, 국가별 요청 등을 확인할 수 있다.

다만 기본 Analytics 화면은 요청 수와 트래픽 중심이기 때문에, 특정 글이나 페이지가 얼마나 조회되었는지를 확인하려면 Web Analytics를 별도로 설정해야 한다.

2. Cloudflare Web Analytics 설정#

Cloudflare 대시보드에서 Web Analytics 메뉴로 이동한 뒤, 분석할 사이트의 hostname을 등록한다.

Web Analytics의 hostname 입력란에는 프로토콜과 마지막 슬래시를 제외하고 다음과 같이 입력한다.

lampseeker-github-io.pages.dev

입력 후 Done을 누르면 다음 단계로 넘어간다.

이때 다음과 같은 안내가 표시될 수 있다.

This hostname does not belong to any website on your Cloudflare account.
You will need to install a JS Snippet on the website.

이 메시지는 Cloudflare가 해당 hostname에 대해 자동으로 분석 코드를 삽입할 수 없으므로, 사용자가 직접 JavaScript snippet을 사이트에 추가해야 한다는 의미이다.

3. Hugo에 Cloudflare Web Analytics 코드 추가#

Cloudflare가 제공하는 Web Analytics snippet은 다음과 같은 형태이다.

<script defer src="https://static.cloudflareinsights.com/beacon.min.js"
        data-cf-beacon='{"token":"Cloudflare에서_발급받은_토큰"}'></script>

현재 블로그는 Hugo 기반으로 구성되어 있고, 사용하는 테마는 hugo-book이다.

이 테마에서는 <head> 영역에 추가 코드를 삽입할 수 있는 위치가 따로 있다.

layouts/partials/docs/inject/head.html

따라서 Cloudflare Web Analytics snippet은 이 파일에 추가한다.

다만 로컬 개발 서버에서까지 Analytics 코드가 실행되면 CORS 오류가 발생할 수 있다.

예를 들어 hugo server로 로컬에서 실행하면 주소는 다음과 같다.

http://localhost:1313

이 상태에서 Cloudflare Analytics script가 실행되면 cloudflareinsights.com/cdn-cgi/rum으로 요청을 보내게 되는데, Cloudflare 쪽에서 localhost:1313 origin을 허용하지 않아 CORS 오류가 발생한다.

따라서 Analytics 코드는 운영 환경에서만 실행되도록 Hugo 조건문으로 감싸준다.

{{- if hugo.IsProduction -}}
<script defer src="https://static.cloudflareinsights.com/beacon.min.js"
        data-cf-beacon='{"token":"Cloudflare에서_발급받은_토큰"}'></script>
{{- end -}}

이렇게 하면 로컬 개발 서버에서는 Web Analytics 코드가 삽입되지 않고, Cloudflare Pages에 배포된 운영 환경에서만 실행된다.

4. 로컬 CORS 오류의 의미#

Web Analytics 코드를 추가한 뒤 로컬 서버에서 다음과 같은 오류가 보일 수 있다.

Access to XMLHttpRequest at 'https://cloudflareinsights.com/cdn-cgi/rum'
from origin 'http://localhost:1313' has been blocked by CORS policy

이 오류는 사이트 코드 자체가 잘못되었다는 뜻이 아니다.

로컬 개발 주소인 localhost:1313에서 Cloudflare Analytics 수집 서버로 요청을 보내려 했지만, Cloudflare가 해당 origin을 허용하지 않아서 차단된 것이다.

즉, 실제 배포 사이트에서 발생하는 문제가 아니라 로컬 개발 환경에서만 발생하는 문제로 보면 된다.

그래서 Analytics 코드를 다음과 같이 운영 환경에서만 실행되도록 처리했다.

{{- if hugo.IsProduction -}}
...
{{- end -}}

5. 배포 후 확인#

코드를 추가한 뒤에는 변경사항을 GitHub에 push한다.

git add layouts/partials/docs/inject/head.html
git commit -m "Add Cloudflare Web Analytics"
git push

Cloudflare Pages는 GitHub 저장소의 변경사항을 감지해 자동으로 다시 배포한다.

배포가 끝난 뒤 실제 사이트에 접속해보자

https://lampseeker-github-io.pages.dev/

그 다음 브라우저 개발자 도구에서 cloudflareinsights 또는 beacon.min.js가 로드되는지 확인한다.

정상적으로 로드된다면 Cloudflare Web Analytics에서 방문 수와 페이지뷰가 수집되기 시작한다.

다만 Web Analytics 데이터는 바로 표시되지 않을 수 있으므로, 몇 분 정도 기다린 뒤 Cloudflare 대시보드에서 확인해보자

6. 정리#

이번 단계에서는 Cloudflare Web Analytics를 블로그에 추가했다.

기존 Cloudflare Analytics에서는 전체 요청 수, 대역폭, 국가별 요청 정도를 확인할 수 있었지만, Web Analytics를 추가하면 페이지별 조회수와 방문 흐름을 더 구체적으로 확인할 수 있다.

또한 로컬 개발 환경에서 발생하는 CORS 오류를 피하기 위해 Analytics script를 운영 환경에서만 삽입하도록 처리했다.

결과적으로 블로그는 다음과 같은 구조로 동작하게 되었다.

로컬 개발 환경
→ hugo server
→ Web Analytics script 미삽입
→ CORS 오류 없음

운영 배포 환경
→ Cloudflare Pages
→ Web Analytics script 삽입
→ 방문 및 페이지 조회 수집

이제 블로그에 어떤 글이 실제로 조회되는지 Cloudflare Web Analytics를 통해 확인할 수 있게 되었다.

Github 블로그 생성(4) - Web Analytics 추가