Hugo에 Google 애널리틱스에 대한 트래킹 코드 삽입 (googleAnalytics)

Hugo에 Google 애널리틱스에 대한 트래킹 코드 삽입하는 방법에 대해 설명한다.
Tags:

Google 웹로그 분석을 사용하면, 웹사이트 액세스 정보를 다각적으로 분석할 수 있다. 여기에서는 Hugo에서 만든 웹 사이트에 Google Analytics용 코드를 쉽게 삽입할 수 있다.

추적 ID를 구성 파일에 설정

먼저 Google 애널리틱스 관리 화면에서 ‘속성 추가’를 실행하고, 분석하려는 웹 사이트의 주소를 추가한다(Google 애널리틱스 계정이 없다면 먼저 계정에서 생성해야 한다). 이 때 발행되는 트래킹 ID(G-AB1CD2EFGH와 같은 ID)는 해당 웹 사이트에 대한 액세스를 판별하기 위한 식별 정보이다. 이 ID는 웹 사이트마다 다른 것을 사용하므로 Hugo 구성 파일에서 설정하는 것이 좋다.

Hugo는 구성 파일의 매개 변수로 미리 매개 변수를 googleAnalytics 제공한다. 아래와 같이 Google Analytics 사이트에서 발행한 추적 ID를 설정한다.
config.toml

baseURL = "https://www.devkuam.com/"
languageCode = "ko-kr"
title = "내 블로그"
theme = "devkuma"

googleAnalytics = "G-AB1CD2EFGH" # 예시 코드

위와 같이 설정하면 템플릿 파일에서 .Site.GoogleAnalytics으로 트래킹 ID를 확인할 수 있다.

트래킹 코드(JS)를 자동으로 삽입하도록 설정

Google 웹로그 분석을 사용하려면, 각 페이지의 요소 head앞에 다음과 같은 추적 코드를 포함해야 한다.

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

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

여기에서는 Hugo의 부분 템플릿을 사용하여 위의 HTML 코드를 각 페이지에 포함시킨다. G-AB1CD2EFGH와 같은 트래킹 ID 를 지정하는 부분은, 구성 파일의 googleAnalytics 파라미터로 지정한 값으로 치환하도록 한다.

layouts/partials/analytics.html

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

  gtag('config', '{{ "{{" }} . }}');
</script>

{{ end }}
{{ end }}

위 템플릿의 1, 2행에서는 로컬의 Hugo 서버에서 테스트하고 있거나 googleAnalytics가 설정되어 있지 않은 경우에 트래킹 코드를 출력하지 않도록 제어하고 있다.

작성한 부분 템플릿은 아래와 같이 템플릿 파일에서 포함된다 (여기서는 기본 템플릿 (baseof) 에서 포함되어 있다).
layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="ja">
<head>
  {{- partial "analytics" . -}}
  <meta charset="UTF-8">
  ...생략...
</head>
<body>
  ...생략...
</body>
</html>

이제 모든 페이지에 Google 애널리틱스 트래킹 코드가 포함된다.

(부록) Hugo 내장 템플릿

사실 Hugo는 내장 Internal Template로 Google 웹 로그 분석 추적 코드를 포함하는 템플릿을 제공한다.

모든 템플릿 파일 중에서 아래 처럼 쓰는 것만으로 쉽게 추적 코드를 삽입 할 수 있다.

{{ template "_internal/google_analytics.html" . }}  <!-- 동기 버전 -->
{{ template "_internal/google_analytics_async.html" . }}  <!-- 비동기 버전 -->

단, 내장 템플릿은 로컬 서버 동작시의 코드 출력 억제에는 대응하지 않고, Google의 변경에 유연하게 대응할 수도 없기 때문에, 가능하면 부분 템플릿은 만들어 놓는 것이 좋다.




최종 수정 : 2023-05-14