Engineering

HugoでGoogle Analyticsの設定をする方法

概要

HugoをでGoogle Analyticsを設定する方法をサクッと解説します。

実現までの流れ

  1. Google Analyticsへの登録
  2. トラッキングIDの取得
  3. Hugoの設定にトラッキングIDを追加

Google Analyticsの登録

[GA4] アナリティクスで新しいウェブサイトまたはアプリのセットアップを行う に従い登録を行います。
データストリームを追加すると、トラッキングIDが取得できるのでメモしておきます。 データストリーム追加画面 ※ トラッキングIDは日本語訳の影響か、測定IDという表示になっています。

Hugoの設定にトラッキングIDを追加

tomlに設定を追加

config.tomlにgoogleAnalytics = トラッキングIDを追加します。

1
2
3
4
5
6

baseURL = 'https://bossagyu.com'
languageCode = 'ja-jp'
title = 'Bossagyu Blog'
theme = 'hugo-bearcub'
googleAnalytics = "G-1234ABCDEF"
# ↑ この行を追加、トラッキングIDは自分のものに変更してください。

トラッキングコードを埋め込む

テンプレートによってはtomlの設定を入れるだけで読めるものもあるみたいですが、 私の使用しているbearcubのテンプレートは対応してなかったので、 自分でヘッダにトラッキングコードを読み込むように追加します。

コードスニペットについてはまくまく Hugo ノートを参考にさせていただきました。

トラッキングコードを読むために layouts/partials/analytics.html を作成する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{{ 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 }}

ページヘッダで analytics.html を読み込むようにする。

1
2
3

# テンプレートの内容をコピーしてきてオーバーライドする
cp themes/hugo-bearcub/layouts/_default/baseof.html layouts/_default/baseof.html 
vim layouts/_default/baseof.html

baseof.htmlに{{- partial "analytics" . -}} を追加する。

1
2
3
4
5
6

<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">

<head>
  {{- partial "analytics" . -}}
  <meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett" /

上記ソースコードを追加した状態で、再度ビルドするとGoogle Analyticsにデータが送信されるようになります。

tips

こちらの対応をしても、Google Analyticsにデータが連携されていないように見える場合は、タグの追加がうまくいっていない可能性があります。
まずはタグがちゃんと入っているかの切り分けをするために、googleデベロッパーツールを開きトラッキングがhtml内に含まれているか確認してみるとよいです。