はじめに

作成したブログのアクセス解析にGoogle Analyticsを利用するための設定を実施します。

Google Analyticsに登録する

今まで利用したことがない場合、Google Analyticsで検索して登録を行う。

最近はGoogle Analytics 4という新しいサービスが展開されているので、それで登録する。

利用したことがあれば古いサービスからの移行が必要になる。

アナリティクスの設定ページのGA4設定アシスタントに移動し、Go to your GA4 propertyから GA4の設定を実施する。

登録できたら以下のデータストリームの項目から設定のためのタグを取得できる。

データストリーム

表示されているストリームをクリックし、タグ設定手順 -> グローバルサイトタグの項目を開く。

以下のようなタグがあるので、これを後でHugoの方に設定する。

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

  gtag('config', 'G-****');
</script>

Hugoにタグを設定する

GA4のタグはHTMLのheadタグ内に置く必要がある。

Hugoではページの部品がいくつかのファイルに分割されており、全体の生成時にまとめられる。

この中でheadの部品にあたるファイルに、新たにタグを加える。

ディレクトリ構成は以下で、mainディレクトリ以下での作業がメインである。

blog
  ┃━ docker-compose.yaml
  ┃━ main  # このディレクトリはHugoが生成する　名前は任意で、このディレクトリをgitで管理する
      ┃━ README.md  # これは生成されたものでなく、後から作成したもの
      ┃━ archetypes
      ┃━ config.toml
      ┃━ content
      ┃━ data
      ┃━ docs
      ┃━ layouts
      ┃━ public
      ┃━ resources
      ┃━ static
      ┃━ themes  # 好きなHugoのテーマを入れる　submoduleで管理する
          ┃━ beautifulhugo

まず、main/layouts/partials/head/custom.htmlを作成し、以下のような中身にしておく。

<!-- Global site tag (gtag.js) - Google Analytics -->
{{ if not .Site.IsServer }}  <!-- ローカルでない場合 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-****"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-****');
</script>
{{ end }}

次に、main/layouts/_default/baseof.htmlを作成するが、これはmain/themes/beautifulhugo/layouts/_default/baseof.html からコピーしてくる。

themeのbaseof.htmlが通常使われるが、ルートディレクトリ以下に同じディレクトリ構成でbaseof.htmlがあればそちらが優先されるため、改造を加えたい場合は持ってきて加えるのが良さそう。

以下のように変更を加える。

 1<!DOCTYPE html>
 2<html lang="{{ .Lang }}" itemscope itemtype="http://schema.org/WebPage">
 3  <head>
 4    {{ partial "head.html" . }}
 5    {{ partial "head/custom.html" . }}  <!-- この行を加える -->
 6  </head>
 7  <body>
 8    {{ partial "nav.html" . }}
 9    {{ block "header" . }}{{ partial "header.html" . }}{{ end }}
10    {{ block "main" . }}{{ end }}
11    {{ partial "footer.html" . }}
12    {{ block "footer" . }}{{ end }}
13  </body>
14</html>

先ほど作成したcustom.htmlをhead内に付け足す感じ。

これで設定は完了。

pushしてみて、更新されたページをデベロッパーツールで確認してみる。

<script async src="https://www.googletagmanager.com/gtag/js?id=G-****></script>が記載されていればOK！

なおローカルでは機能しない設定になっているので確認はpush後にやること。

さいごに

これでGoogleAnalytics4の設定が完了です。

今までも特に上手く利用できていたわけではないので、今回はうまく使っていきたい・・・

hugo google_analytics

HugoでGoogleAnalyticsを設定する

はじめに

Google Analyticsに登録する

Hugoにタグを設定する

さいごに

See also