Google Analytics 4 から採用された Measurement ID(e.g. G-00000XXXXX) を Hugo で設定する
1.この記事で達成したいこと Google Analytics 4から採用された Measurement ID(e.g. G-00000XXXXX) の設定をHugoでしたい Tracking ID(e.g. UA-000000-2)を使ってGoogle Analyticsの設定をする方法は多く紹介されている Measurement IDの解説記事はあっても修正するファイルのパスが間違っていたりしていたので書こうと思った ※Google Analytics v4を使っている場合でも、Measurement IDとTracking ID(e.g. UA-000000-2)を併用することはできる。 ※詳細は「おまけ.Google Search Consoleを使うためにTracking IDも設定する」で書いているので最後まで読んでほしい。 2.前提 Measurement IDの取得方法については解説せず、以下の記事に譲りたい What happened to my Tracking ID? - Analytics Help 3.設定方法 以下を参考に進める Installation · adityatelange/hugo-PaperMod Wiki Google Analytics 4 Implementation in Hugo config.ymlを修正 パスは/path/to/${BLOG_DIR}/config.yml params: # Hugoにおける"production"の意味合いは、Hugoで立ち上げているウェブサイトがググって見つけることができるぐらいのニュアンス # 余談だが、ローカルで"Hugo server -D"を実行した場合のenvは"development" env: production googleAnalyticsID: <G-00000XXXXX> analytics-gtag.htmlを以下のパスに新たに作成 /path/to/${BLOG_DIR}/layouts/partials/analytics-gtag.html $ mkdir -p layouts/partials $ touch layouts/partials/analytics-gtag.html <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.GoogleAnalyticsID }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{ .Site.Params.GoogleAnalyticsID }}'); </script> PaperModが用意しているbaseof.htmlを以下のパスにコピーして修正 /path/to/${BLOG_DIR}/layouts/_default/baseof.html $ mkdir -p layouts/_default $ cp themes/PaperMod/layouts/_default/baseof.html layouts/_default/ $ find ./ -type f -name 'baseof.html' ./themes/PaperMod/layouts/_default/baseof.html ./layouts/_default/baseof.html <head> <!-- ここから追記 --> {{ if .Site.Params.GoogleAnalyticsID }} {{ partial "analytics-gtag.html" . }} {{ end }} <!-- ここまで追記 --> {{- partial "head.html" . }} </head> 4.設定ができたか確認する デプロイしてからGoogle Analyticsでアクセスがとれているか確認する以外の方法を考えてみたので書き残しておく。 ...