あらすじ
「Hugoで生成したサイトを公開したぞ〜！よぉし次はGoogle Analytics設定しよう！！」と思った
↓
rootディレクトリのconfig.tomlにある「googleAnalytics = “"」にトラッキングIDを設定すればおk！というのを見てやってみる
↓
確かにhtmlにトラッキングコードが追加されてる凄い！！ウッでも方式がanalytics.jsだ..！！
(せっかくなら最新のgtag.jsを設定したい)
↓
そもどの様にトラッキングコードが追加されるかを確認しつつ、gtag.jsで設定する→本記事の趣旨
オチを先に
ウッでも方式がanalytics.jsだ..！！
Hugoで提供しているテンプレートがanalytics.jsだから、というのが根本的な理由でした。
この件は既にIssuesでやり取りされていて(Update the internal GA template #4479)、
Hugoのv0.56のマイルストーンでテンプレートをgtag.jsに変更するissueが含まれているので今後変更されそうです。
(Update Google Analytics internal template to new style(gtag.js) #4327)
本記事では自前で内部テンプレートを作成する手法を記載していますが、
今後変更に併せ公式のテンプレートを使用した方が良さそうです。
どの様にトラッキングコードが追加されるか
Hugoの公式リファレンスでは、大まかに「設定ファイルにトラッキングIDを指定した後_internal/配下のテンプレートを含められるよ！」と記載があり、これを各themeが実装している様でした。
前述の様にテンプレートがanalytics.jsのため、themeフォルダ内に自前でgtag.js版のhtmlを用意しそちらを読み込ませる様にします。
gtag.jsで設定する
forkしたthemeに対し以下の変更を加えました。(変更内容はthemeによって異なると思いますが、参考になれば..)
https://github.com/mogimogitomato/kiss/commit/88158ed079f8ddb6062fa5a8868321558cdcfab5
変更に当たっては、以下の記事を参考にしました。
Google アナリティクス用のトラッキングコードを埋め込む
最後に
gtag.jsのトラッキングコードはheadタグの直下に配置する必要があり、Hugoのテンプレートが変更されたら
themeも対応する必要があるところが多そうです。
軽微ではありますが、Hugoのアップデートに伴って更新しつつプルリク出せるといいな..