ブログやサイトを立ち上げたら、「どれくらいの人が見てくれているのか（アクセス解析）」や「Googleの検索結果にどう表示されているか（Search Console）」を知りたくなりますよね。

これらを個別に設定していくと、テンプレート（baseof.html など）が様々なタグでごちゃごちゃになってしまいます。そこで登場するのが Google Tag Manager (GTM) です！
GTMを一つサイトに埋め込んでおけば、あとはGTMの管理画面（ブラウザ）からAnalyticsやSearch Consoleなどのタグを自由にON/OFFできるようになります。

このチュートリアルテーマには、最初からGTMを簡単に埋め込める仕組みを用意してあります。さっそく導入してみましょう！

1. GTMのアカウントを作成する

まずはGoogle Tag Managerの公式サイトにアクセスし、アカウントと「コンテナ」を作成します。

  1. Google Tag Manager にGoogleアカウントでログイン。
  2. 「アカウントを作成」をクリックし、アカウント名（例: My Blog）と国名を入力。
  3. 「コンテナのセットアップ」で、コンテナ名（例: diyhugo.com のようなドメイン名）を入力し、ターゲットプラットフォームとして 「ウェブ」 を選択。
  4. 作成を押して利用規約に同意します。

すると、「Google タグ マネージャーをインストール」という画面が表示され、2つのコードスニペットが出てきます。
この画面の上部に、GTM-XXXXXXX という形式の「コンテナID（ワークスペースID）」が表示されているはずです。これをコピーしておきます。

2. HugoテーマにGTM IDを設定する

ご自身のHugoプロジェクトにある hugo.toml を開き、一番下の [params] セクション（なければ追記）に、先ほどコピーしたGTM IDを記入します。

# -----------------------------------------------------------------------------
# カスタムパラメータ (Params)
# -----------------------------------------------------------------------------
[params]
  # Google Tag Manager (GTM) のコンテナIDを設定します。
  # 例: gtm_id = "GTM-XXXXXXX" (空欄の場合は出力されません)
  gtm_id = "GTM-XXXXXXX"  # ここにあなたのIDを貼り付け！

これだけで設定は完了です！
このテーマのベーステンプレート（layouts/baseof.html）には、以下のような仕掛けが既に組み込まれています。

<head>
    {{/* Google Tag Manager (Head) */}}
    {{ with .Site.Params.gtm_id }}
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': /* 中略 */
    })(window,document,'script','dataLayer','{{ . }}');</script>
    <!-- End Google Tag Manager -->
    {{ end }}
    <!-- ...その他のheadタグ... -->
</head>

hugo.toml に gtm_id が設定されている場合（{{ with .Site.Params.gtm_id }}）にのみ、<head> 内部と <body> の直後に必要なタグが自動的に出力されるようになっています。シンプルですね！

3. Google Analytics (GA4) と連携させる

GTMがサイトに埋め込まれたら、次はGTMの画面上でGoogle Analytics (GA4) を設定します。

  1. Google Analytics でプロパティを作成し、「測定ID（G-XXXXXXXXXX）」を取得します。
  2. GTMの管理画面に戻り、「タグ」メニューから「新規」をクリック。
  3. タグの種類で 「Google アナリティクス」 > 「Google タグ」 を選びます。（※以前の「GA4 設定」は「Google タグ」に統合されました。「GA4 イベント」ではないので注意！）
  4. 「タグ ID」の入力欄に、Analyticsで確認した「測定ID（G-XXXXXXXXXX）」を入力します。
  5. トリガーの設定で 「All Pages（すべてのページ）」 を選びます。
  6. 保存して、画面右上の 「公開」 ボタンを押します。

これで、あなたのサイトの全ページでアクセス（ページビュー）計測がスタートしました！

4. Google Search Console と連携させる

Search Consoleの所有権確認も、GTMが入っていればコードをいじることなく一瞬で終わります。

  1. Google Search Console にアクセス。
  2. 「プロパティの追加」から、「URL プレフィックス」 を選択して、サイトのURL（例: https://diyhugo.com）を入力。
  3. 所有権の確認方法で 「Google タグ マネージャー」 を選んで「確認」ボタンを押すだけ！

（※GTMとSearch Consoleを管理しているGoogleアカウントが同一である必要があります。）

まとめ

GTMを使うことで、サイト側のコード（HTML）を直接編集するリスクを減らしながら、様々なマーケティングツールや解析ツールを安全に追加できるようになります。
HugoとGTMの組み合わせは非常に相性が良いので、サイトを公開したらぜひ真っ先に設定しておきましょう！🚀