hugoのconfigに書いただけではGoogleAnalyticsが動かないテンプレートがある

· 726 words · 2 minute read

これまでブログはhatenaでやっていたのですが,ポートフォリオなどいろいろと付け足すと使い勝手が悪かったので,hugoで新築しました. その際にGoogleAnalyticsを設定しようとしたのですが,一発でうまく動作しませんでしたので,トラブルシュートの記録です.

HugoにはデフォルトでGoogleAnalyticsを簡単に設定するためのテンプレートが組み込まれています. google_analytics_async.html と google_analytics.htmlの2種類が用意されています.

config.tomlにGoogleAnalyticsのトラッキングコードを書くことでトラッキング用の Javascriptを読み込んでいい感じにしてくれるのですが,google_analytics_async.htmlの方では,GoogleAnalytics 4に対応していないので,google_analytics.htmlを使う必要があります. 使っていたテーマのhugo-theme-miniでは,head.htmlでansyncの方を読み込んでいたので,タグをconfig.tomlに書いてもうまく動作しませんでした.

/themes/mini/layout/partials/head.html/layouts/partial/head.htmlにコピーして,google_analytics_async.htmlを読み込んでいる部分をgoogle_analytics.html書き換えればうごきます.

このテンプレートは,ここで見れます. タグのprefixでGoogleAnalyticsのバージョンを判別できるようで,prefixがUAかGかで読み込むスクリプトを変更するようになっていました.

comments powered by Disqus