calendar

HugoにGoogle Analyticsを導入する

category Hugo
tag Hugo tag 設定 tag Analytics
toc目次

はじめに

アクセス解析のため、Hugoで作成したブログにGoogle Analyticsを導入してみましたのでそのメモです。

Google Analyticsの導入

HugoにはGoogle Analyticsをサポートする内部テンプレートが同梱されているため、設定ファイル（hugo.toml）の修正とテンプレートファイルにGoogle Analytics用のテンプレートを含めることで対応できます。

Google Analyticsの導入方法

hugo.tomlにGoogle Analyticsの測定IDを追記します。

[services]
  [services.googleAnalytics]
    ID = 'G-xxxxxxxxxx'

テンプレートファイル（layouts/_default/baseof.html）の<head>要素の直後にGoogle Analyticsの内部テンプレートコードを追記します。

<!DOCTYPE html>
<html>
<head>
{{ template "_internal/google_analytics.html" . }}

<!-- 以下略 -->

📖 参考

独自テンプレートを作成して導入

基本的に上記の対応で良いのですが、Google Analyticsの仕様が変更されても自身で修正できるよう、今回は独自にテンプレートを作成して対応しました。

独自テンプレートでGoogle Analyticsを導入する方法

Google Analytics用のテンプレート（layouts/partials/analytics.html）を作成します。

{{ if not hugo.IsServer }}
  {{ with .Site.Config.Services.GoogleAnalytics.ID }}
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());

    gtag("config", "{{ . }}");
  </script>
  {{ end }}
{{ end }}

テンプレートファイル（layouts/_default/baseof.html）の<head>要素の直後に上記テンプレートを読み込むコードを追記します。

<!DOCTYPE html>
<html>
<head>
{{- partial "analytics" . -}}

<!-- 以下略 -->

設定ファイル（hugo.toml）にGoogle Analyticsの測定IDを追記します。

[services]
  [services.googleAnalytics]
    ID = 'G-xxxxxxxxxx'

以上で、Google Analyticsのコードがすべてのページに設定されます。