概要

Hugoで作成したブログにGoogle Analyticsを導入する方法を解説する。

まずPaperModに導入する方法を紹介する。

その後にPaperModに導入した際の思考の過程を紹介することで、他のテーマにも応用できるようにする。

環境

  • Hugo 0.146.6
  • PaperMod (commit 7cf752f8644fea1fc3dc7299352718d492c55182)

PaperModに導入する方法

1. Google Analyticsのスクリプトタグを取得

Google Analyticsの管理画面でスクリプトタグを取得する。

タグ発行の手順は色々な方が書いてくれていると思うので今回は省略。

スクリプトタグの取得

2. /layouts/partials/google_analytics.htmlにスクリプトタグを追加

/layouts/partials/google_analytics.htmlに取得したスクリプトをコピペする。

/layouts/partials/google_analytics.html
<!-- Google tag (gtag.js) -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-HTNQ9KZXWH"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());

  gtag("config", "G-HTNQ9KZXWH");
</script>
<!-- End Google tag (gtag.js) -->

3. テスト

管理画面からテストボタンを実行してテストする。

緑のチェックマークが出れば成功。

テスト

以上。

思考過程

自分がどのようにして上記の手法にたどり着いたか、その思考過程を紹介する。

考え方はどのテーマでも共通していると思うので、他のテーマでGoogle Analyticsを導入する際のヒントになると思う。

1. ドキュメントを探す

まず「PaperMod Google Analytics」のようなキーワードでGoogle検索をした。

PaperModの場合は適切なドキュメントを見つけることができなかったので、テンプレートをコードリーディングすることにした。

テーマによってはドキュメントが見つかりやすいと思うので、まずはドキュメントを探してみることをおすすめする。

2. /layouts/partials/head.htmlをコードリーディング

まずは、/layouts/partials/head.htmlを読んだ。

GitHub上のコードはこちら。

このファイルはHTMLのheadタグに対応するテンプレートでHugo標準の部品だ。

なので、どのテーマを選んでも基本的には定義されているはず。

そして、恐らく大半のテーマでは拡張性を意識してhead.html内で更に他の拡張用の部品を読み込んでいるはず。

例えばPaperModの場合は以下のような感じだ。

/layouts/partials/head.html(一部抜粋)
{{- partial "extend_head.html" . -}}

{{- /* Misc */}}
{{- if hugo.IsProduction | or (eq site.Params.env "production") }}
{{- partial "google_analytics.html" . }}
{{- partial "templates/opengraph.html" . }}
{{- partial "templates/twitter_cards.html" . }}
{{- partial "templates/schema_json.html" . }}
{{- end -}}

{{- partial "google_analytics.html" . }}という記述から、/layouts/partials/google_analytics.htmlを読み込んでいることが分かった。

なので、/layouts/partials/google_analytics.htmlを作成して、スクリプトタグをコピペしてやれば良いことが分かる。

もし、このようなGoogle Analytics専用のファイル読み込みの記述が無かったとしても、例えば{{- partial "extend_head.html" . -}}のようなheadタグを拡張するための部品用のファイル読み込みの記述があるなら、extend_head.htmlを作成してスクリプトタグをコピペしてやれば良い。

もし、拡張用のHTMLの読み込みすらない場合は、head.html自体をまるまるコピペして、末尾にスクリプトタグを追加してやれば良い。

感想

またHugoのテンプレートを拡張してしまった…。

保守性がどんどん低くなっている気がするが、未来の俺が頑張ってくれるだろう…。