1.この記事で達成したいこと

  • Google Analytics 4から採用された　Measurement ID(e.g. G-00000XXXXX) の設定をHugoでしたい
    • Tracking ID(e.g. UA-000000-2)を使ってGoogle Analyticsの設定をする方法は多く紹介されている
    • Measurement IDの解説記事はあっても修正するファイルのパスが間違っていたりしていたので書こうと思った
※Google Analytics v4を使っている場合でも、Measurement IDとTracking ID(e.g. UA-000000-2)を併用することはできる。

※詳細は「おまけ.Google Search Consoleを使うためにTracking IDも設定する」で書いているので最後まで読んでほしい。

2.前提

3.設定方法

params:
    # Hugoにおける"production"の意味合いは、Hugoで立ち上げているウェブサイトがググって見つけることができるぐらいのニュアンス
    # 余談だが、ローカルで"Hugo server -D"を実行した場合のenvは"development"
    env: production
    googleAnalyticsID: <G-00000XXXXX>
  • analytics-gtag.htmlを以下のパスに新たに作成
    • /path/to/${BLOG_DIR}/layouts/partials/analytics-gtag.html
$ mkdir -p layouts/partials
$ touch layouts/partials/analytics-gtag.html

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

  gtag('config', '{{ .Site.Params.GoogleAnalyticsID }}');
</script>
  • PaperModが用意しているbaseof.htmlを以下のパスにコピーして修正
    • /path/to/${BLOG_DIR}/layouts/_default/baseof.html
$ mkdir -p layouts/_default
$ cp themes/PaperMod/layouts/_default/baseof.html layouts/_default/
$ find ./ -type f -name 'baseof.html'
./themes/PaperMod/layouts/_default/baseof.html
./layouts/_default/baseof.html

<head>
  <!-- ここから追記 -->
  {{ if .Site.Params.GoogleAnalyticsID }}
  {{ partial "analytics-gtag.html" . }}
  {{ end }}
  <!-- ここまで追記 -->

  {{- partial "head.html" . }}
</head>

4.設定ができたか確認する

デプロイしてからGoogle Analyticsでアクセスがとれているか確認する以外の方法を考えてみたので書き残しておく。

  • ローカルで設定ファイルを読み込むことが出来るか
$ hugo server -D
Start building sites … 
hugo v0.87.0-B0C541E4 linux/amd64 BuildDate=2021-08-03T10:57:28Z VendorInfo=gohugoio

                   | EN  
-------------------+-----
  Pages            | 16  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  2  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 94 ms
Watching for changes in /path/to/${BLOG_DIR}{archetypes,content,data,layouts,static,themes}
Watching for config changes in /path/to/${BLOG_DIR}/config.yml
Environment: "development"

略

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

5.Google Analyticsの設定を適用する

  • Firebase Hostingを使っているウェブサイトの場合の適用方法を書いておく
  • ウェブサイトのデプロイ方法に合わせて適用方法は変わるはずなので、参考程度に読んでほしい
$ GCP_PROJECT_ID=your-project-id
$ hugo -D && firebase deploy --only hosting --project ${GCP_PROJECT_ID}

おまけ.Google Search Consoleを使うためにTracking IDも設定する

2022/04/01時点ではGA4でもGoogle Search Consoleが使えるようである。 [GA4] Search Console との統合 - アナリティクス ヘルプ

  • ~Google Search ConsoleとGoogle Analyticsを連携させるためにはTracking IDを使わなければならない~

GA4 Properties are still not linkable.

As of now, Google recommends creating both UA and GA4 properties together. So this linking is not possible at the moment

参考: How to link new Google Analytics (version 4) property with Search Console? - Webmasters Stack Exchange

  • config.ymlに googleAnalytics: UA-000000000-0 を追記
# https://github.com/adityatelange/hugo-PaperMod/wiki/Installation
baseURL: https://gkzz.dev/
#languageCode: en-us
title: gkzz.dev
paginate: 5
theme: PaperMod
googleAnalytics: UA-000000000-0

params:
    env: production
    googleAnalyticsID: <G-00000XXXXX>

$ grep -n "_internal/google_analytics.html" themes/PaperMod/layouts/partials/*.html
themes/PaperMod/layouts/partials/head.html:121:{{- template "_internal/google_analytics.html" . }}

参考