アプリを作ってるときからちょくちょく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/