Hugoで使うgoogleAnalystics

Hugoで作ったブログにgoogleAnalysticsを導入しアクセス解析をする

アプリを作ってるときからちょくちょくfirebaseAnalyticsとリンクして使おう!
みたいなメールがgoogleからよく届いていたのですが、なんやねんそれと今まで思いながらスルーしていました。
しかし、いろんなブログとか見てると入れたほうがいろいろ良さそうなので楽にできそうなホームページにまずは入れてみることにしました。

Hugoのconfig.tomlという設定ファイルの上のほうにgoogleAnalyticsという項目があったのでまあよくわかってない自分でも楽にできるだろうと思ってました…。

けれども、蓋をあけてみたらなんかfireAnalytics?だかなんだかに統合するだのなんだので仕様が変わったみたいで測定IDとかなんとかを入れるだけで使えるようにるかと思ったらできませんでした!

日本語の情報も少なく泣く泣くhugoの公式ページを調べてたら手動でいろんなところをちょこちょこいじってねと書いてありました。
https://gist.github.com/zjeaton/42246742cdaf2fb46400d04c2eba9a8a#file-analytics-gtag-html

よくわかんないけど手順通りやればいいのかなと思い試行錯誤しながらやったことをまとめます。

やってみたけどうまく行かなかったこと


https://stackoverflow.com/questions/64993368/my-google-analytics-setup-for-hugo-is-not-working

簡単な方法はUniversal Analytics Property作って使うことだよ!って書いてあったので簡単な道へと流されやすい自分はまっさきにこの方法を試したのですが、前提条件が違うのかやったことが違うのかわかりませんけどうまく行かず放棄しました(´ω`)

GoogleAnalyticsのページ -> 管理ボタン -> 新しいプロパティを作成 -> 
詳細オプションを表示(show advanced options)->
ユニバーサル アナリティクス プロパティの作成をチェック ->
ホームページのアドレスを入力して終了 -> 
出来上がった測定IDをconfig.tomlのgoogleAnalyticsに設定

うまくいったこと


公式に書いてあったことをそのままやりました。 ホームページのファイルの一番上のディレクトリの
layouts -> partials

この中に

analytics-gtag.html

を作って追加。書いてあるプログラム文は公式に書いてあることをそのままコピペしました。 次はthemesフォルダのなかの

layouts -> _default -> baseof.html

と開き、headタグの中に公式のコードをコピペ!

<head>
{{ if .Site.Params.GoogleAnalyticsID }}
{{ partial "analytics-gtag.html" . }}
{{ end }}
...
</head>

最後にgoogleAnalyticsで作った測定IDをconfig.tomlファイルの中に追加します。

[params]
googleAnalyticsID = "G-00000XXXXX"

““内を測定IDにする。
言われたままやったらうまく測定してくれるようになりました(´ω`)

参考にしたページ

https://gist.github.com/zjeaton/42246742cdaf2fb46400d04c2eba9a8a#file-analytics-gtag-html

https://stackoverflow.com/questions/64993368/my-google-analytics-setup-for-hugo-is-not-working

Universal Analytics Propertyの設定
https://support.google.com/analytics/answer/10269537?ref_topic=1009620

https://froglegs.co/blog/code/2020/11/google-analytics-4/


See also