🦔

📷Hugo由来のGithub PagesをGoogle Analytics4でモニタリングする

2025/10/14に公開

 概要有志の勉強会サイトを Hugo + Github Pagesで作成・公開している.

公開したはいいものの、どれくらいの閲覧者がいるんだろう🧐、どうしたらもっと多くの人にみてもらえるだろう🥹、といったアクセス分析に基づくサイト管理・開発をしたいと考えた.
手軽な方法として、無料で使用できる Google Analytics4 (通称, GA4)をする方法がある.
この強力なアクセスモニタリングツール GA4をHugo由来のGithub Pagesに適用しよう!! というのが本記事の狙いである.

 手順
 おおまかな流れGA4でwebサイトの監視をさせるには、大雑把に言えば、監視したいWebサイトのURLをGA4に登録すればよい、のである.
中にはこんなシンプルな方法で成り立つものもあるが, 今回のHugo由来のGithub Pagesの場合には, もう一つ工夫が必要である.
それは, 公開する htmlファイルにGA4が監視対象として識別できるタグを直接埋め込む,という作業をする.

この作業は, Google Tag Manager(通称, GTM)上で行う.
必要な作業過程は以下のものである
GA4で監視したいWebサイトをつくる(例：Github Pages)
GA4のアカウントを作成 / 分析ツールと1.のwebサイトを接続
GA4で分析できるように, GTMでタグを作成. 1.のサイトhtmlに埋め込む
(New) Hugoでの作業工程を省力化するための一手間をかける
1については過去の記事を参考にしてほしい.
https://zenn.dev/akitek/articles/4cf2fb5b4a9e0e
2,3についても他の方がわかりやすい記事を書かれているので参考にしてほしい.
https://qiita.com/tetsuro731/items/55b17227c37d0daeeccc

https://border-haze.co.jp/web-recipe/ga4-basic/

https://border-haze.co.jp/web-recipe/gtm-basic/#index_id5

 Hugo+Github Pagesへのタグの埋め込み上述の1-4をやりたいが, 4に関しては追加での説明が必要である.
3.の段階で、以下のようなコードをページに埋め込むように指示されるはずである.

(以下のコードは例で, GTMの画面で自動作成されるのでコピペしよう）
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    # headタグ直後に配置①
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
    # bodyタグ直後に配置②
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <h1>Hello World</h1>
</body>
</html>
ここで, 上記のコードをどこのファイルに貼り付ける場所を見てみよう.
/blogpage # この配下をgithubにpush
    -/...
    -/content # 記事のmarkdownが格納
    -/docs
        -/...
        -/index.html #  <--- ここに挿入

Hugoでページを作成すると,上記のようなフォルダ階層になっているはずである.

Hugoは,Markdownベースで記事を作成し, hugoコマンドでビルドし、webページ(html）を生成している.
ビルド後のページは、/docs配下にはいる(デフォルトでは/publicに格納）
Github Pagesでは, /docs配下のindex.htmlを参照してサイトのページを表示している.

なので、GA4で分析するには, index.htmlにタグを書き込んであげたらよい.

 Hugoでの作業工程を省力化このプロセスをみると,
何か新しい記事を追加するたびにビルドし,

新規のindex.htmlを作成、
そのファイルをリモートにpushし、
公開ページに反映している.
通常,2の段階でタグを埋め込むのだが, このままだと1.で新規記事を作成してビルドするたびに, 2.のindex.htmlが書き換わる（再生成される）ため, 毎回タグを書き込まないといけない.
これは面倒だ!! ということで対策を考える.

参考になったのは下の記事.

https://gist.github.com/zjeaton/42246742cdaf2fb46400d04c2eba9a8a
/blogpage
    -/...
    -/content # 記事のmarkdownが格納
    -/docs
        -/...
        -/index.html 
    -/themes
        -/hugo-PaperMod
            -/layouts
                -/_default
                    - baseof.html #  <--- ここにベースとしてタグ情報を挿入
index.htmlを生成する際の, 基本ページみたいな部分(baseof.html)に記述することで,index.html生成時に常にタグを埋めることができる.
Hugoテーマとして、PaperModを使った場合は以下の通りにしよう.
baseof.html
{{- if lt hugo.Version "0.146.0" }}
{{- errorf "=> hugo v0.146.0 or greater is required for hugo-PaperMod to build " }}
{{- end -}}

<!DOCTYPE html>
<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">

<head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
    {{- partial "head.html" . }}
</head>

<body class="
{{- if (or (ne .Kind `page` ) (eq .Layout `archives`) (eq .Layout `search`)) -}}
{{- print "list" -}}
{{- end -}}
{{- if eq site.Params.defaultTheme `dark` -}}
{{- print " dark" }}
{{- end -}}
" id="top">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) --> 
    {{- partialCached "header.html" . .Page -}}
    <main class="main">
        {{- block "main" . }}{{ end }}
    </main>
    {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
</body>

</html>
こうすることで, いちいちタグをindex.htmlに書き込むという手間を省ける☺️

 まとめ今回は アクセス解析をするGoogle Analytics 4と, 自身のwebサイトを接続する方法について説明した.
特に, Hugo由来の独自ページをGithub　Pagesで公開している人向けへのtipsをまとめた.
なにかの参考になれば嬉しい.

概要

手順

おおまかな流れ

Hugo+Github Pagesへのタグの埋め込み

Hugoでの作業工程を省力化

まとめ

Discussion