구글 애널리틱스

Google 애널리틱스(Google Analytics)는 웹사이트 방문자의 행동을 추적하고 분석할 수 있는 강력한 도구입니다. 이를 통해 사이트 트래픽, 사용자 행동, 전환율 등을 모니터링하고, 데이터에 기반한 전략적 결정을 내릴 수 있습니다. Hugo는 Google Analytics를 쉽게 통합할 수 있는 구조를 가지고 있습니다.

Google 애널리틱스 계정 생성

계정 만들기: Google Analytics 페이지에 접속하여 Google 계정으로 로그인한 후 새로운 계정을 생성합니다.
웹사이트 또는 앱 추가: 계정을 만들고 나면, 웹사이트(또는 앱)에 대한 속성을 설정합니다. 사이트 이름, URL, 산업 카테고리, 시간대 등을 입력해야 합니다.

추적 코드 설치

추적 코드 생성: 웹사이트를 설정하면 Google 애널리틱스가 고유한 추적 ID(예: UA-XXXXXXXXX-X)를 생성해줍니다. 이와 함께 웹사이트에 삽입할 추적 코드(script)를 제공합니다. 예를 들어, Google Analytics 4(GA4)를 사용하는 경우 G-XXXXXXXXXX 형식의 Measurement ID를 얻게 됩니다.

사이트에 Google Analytics 추가

Google Analytics ID를 얻었으면, 이를 Hextra Theme에 추가하는 과정입니다. Hugo Hextra 테마는 보통 테마의 기본 설정에서 Google Analytics 통합을 지원합니다.

`config.toml` 수정

Hugo의 기본 설정 파일인 config.toml에 Google Analytics Measurement ID를 추가합니다.

[services.googleAnalytics]
ID = "G-MEASUREMENT_ID"

config.yaml 을 사용하는 경우는 다음과 같습니다.

services:
  googleAnalytics:
    ID: G-MEASUREMENT_ID

코드를 추가하면, Hugo가 자동으로 GA 추적 코드를 사이트에 삽입하게 됩니다.

수동 설치 방법

만약 사용하는 Hugo 테마가 기본적으로 Google Analytics 통합을 지원하지 않는다면, 직접 HTML 템플릿에 Google Analytics 코드를 삽입할 수 있습니다.

`layouts/partials/head.html` 파일 수정

테마의 템플릿 파일에 직접 Google Analytics 스크립트를 추가하는 방법입니다. 보통 layouts/partials/head.html 파일에 사이트의 <head> 태그가 정의되어 있습니다.

layouts/partials/head.html 파일을 엽니다. 만약 이 파일이 존재하지 않는다면 해당 경로에 새로 생성할 수도 있습니다.
다음 Google Analytics 스크립트를 <head> 태그 내 적절한 위치에 추가합니다.

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

G-MEASUREMENT_ID 부분을 실제 Google Analytics에서 받은 ID로 변경합니다.

Buy me a coffee

Git 에러 구글 애널리틱스 활용