Hugo+MainroadでGoogleアナリスティクス(GA4)をセットアップしたい

Web開発
Page content

1.目的

Googleアナリスティクスにこのホームページを登録して、アクセス解析を行う手順を確認したいです。

2.参考

3.環境

Googleアカウントは既に保有している状態からの手順です。

4.手順

  1. 公式にアクセスし「測定を開始」

    icon

  2. アカウントの作成

    アナリスティクス用のアカウントを作成します。

    icon

    アカウントのデータ共有設定を行います。今回はデータ共有オプションのところはデフォルトにしました。

    icon

    icon

  3. プロパティの作成

    プロパティ名、タイムゾーンと通貨を設定します。

    icon

  4. お店やサービスの詳細

    今回はブログサイトに最も近い選択肢を選びました。

    icon

  5. ビジネス目標

    目的はアクセス解析なので、一番下のベースライン～を選択します。

    icon

    利用規約の確認ダイアログが表示されます。いずれも同意します。

    icon

  6. データの収集

    プラットフォームはブログ(Web)なので、その通り選択します。

    icon

    URLやストリーム名(データのまとまりの箱みたいなもの)を設定します。

    icon

  7. タグの設定

    ブログにアナリスティクス用のタグを設定していないため、事前チェックでこのメッセージが表示されます。

    icon

    タグを設定するためには、まずhugo.tomlでトラッキングIDを指定します。

    % vi hugo.toml
～～～
googleAnalytics = "G-AAAAAAAAA"
～～～

    パーシャルテンプレートを作成し、トラッキングコードを埋め込みます。

    % mkdir layouts/partials/
% vi layouts/partials/analytics.html
{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
<!-- 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 }}

    Mainroadのベーステンプレート(themes/mainroad/layouts/_default/baseof.html)を複製し、analystics.htmlをインクルードします。

    % cp themes/mainroad/layouts/_default/baseof.html layouts/_default/.
% vi layouts/_default/baseof.html
<!DOCTYPE html>
<html class="no-js" lang="{{ .Site.Language.Lang }}">
<head>
  {{- partial "analytics" . -}} ★ここを追記★
  <meta charset="UTF-8">
  以下略

  8. トラッキング動作確認

    Googleからタグが見えているか確認します。

    icon

    「手動でインストールする」の右下に「テスト」があります。これを実行して、緑のチェックマークが表示されればOKです。

    icon

  9. データの収集(続き)

    icon

  10. データ収集待ち

    icon

  11. 動作確認

    とりあえずユーザ数を確認することができました。データは取れているので、目的は達成できたと思います。

    icon