michimani.net

Hugo で生成しているブログをユニバーサルアナリティクスから Google Analytics 4 に移行する

2022-06-01

Google Analytics のユニバーサルアナリティクス (UA) が 2023年 7月に廃止され、それ以降は Google Analytics 4 (GA4) を使う必要がある。まだ UA 廃止までの猶予はあるが、PV 等の各値を比較したくなったときに 1 年前のデータが無いと困るので、なるはやで移行しておく必要がある。今回は、とりあえずこのブログを UA から GA4 に移行してみる。

ユニバーサル アナリティクスのサポートは終了します - アナリティクス ヘルプ

やること

GA4 に切り替えていない状態で対象のプロパティの画面を開くと、ページ上部に下記のようなメッセージが表示されている。

GA4 移行の案内

ここの [開始] から GA4 のプロパティを設定していく。

プロパティの設定ができたら、発行されたスクリプトをブログの <head> タグ内に配置する。

今回は、細かい設定はスキップして とりあえず GA4 のプロパティで PV だけでも計測できるようになることをゴールとする。

GA4 プロパティの設定

先ほどの [開始] を押すと下記のような画面に遷移する。

GA4 設定アシスタント

今回は新たに GA4 のプロパティを作成する。

新しい Google アナリティクス 4 プロパティを作成する

GA4 設定アシスタントの画面から 新しい Google アナリティクス 4 プロパティの作成 を開始すると、下記のようなウィザードが表示される。

新しい GA4 プロパティの作成

ここで [作成] を押すと、 GA4 設定アシスタントの画面に戻り、下記のような表示になる。

新しい GA4 プロパティの作成完了

GA4 のプロパティが作成された。

GA4 プロパティの機能の確認と設定を行う

[GA4 プロパティを確認] を押すと GA4 の設定画面に遷移する。

GA4 の設定画面

正直、設定項目が多すぎてよくわからん。ので、欲を出さずに PV だけでも計測できるようになること を目指す。

データストリーム の項目を見ると、下記のようにまだデータが受信できていない。(それはそう)

GA4 の設定画面 - データストリーム

ストリームの一覧から対象の行をクリックすると、下記のような詳細が表示される。

GA4 の設定画面 - データストリーム - 詳細

タグの設定手順 にある通り、データストリームで各値を計測するにはいずれかの方法でページ上にタグを埋め込む必要がある。
今回は 新しいページ上のタグを追加する 、且つ GTM を使っていないため gtag.js を追加する方法で進める。

埋め込むタグは下記のような形式。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXX');
</script>

これをこのブログの <head></head> 内に配置すれば良い。

GA4 のプロパティタグをブログに設置する

このブログは Hugo で生成しており、テーマには Simplog を使っている。

Simplog は UA のタグ埋め込みには対応している (UA-XXXXXXconfig.toml に追記するだけで OK) が、 GA4 の埋め込みには対応していない。ただ、 partials/additional-custom-head.html を作成すれば head 内にその内容が埋め込まれるようになっているので、 partials/additional-custom-head.html にプロパティタグを記述する方法で対応する。

simplog/head.html at c6940745f5b0751a408f3fc959f231b9ec624e5a · michimani/simplog

ゆくゆくは G-XXXXXXXXX のタグを config.toml に記述するだけでタグが埋め込まれるようにしたい。(してくれる方がいたら PR お待ちしています)

設置して様子を見る

GA4 のプロパティタグを設置したらしばらく様子を見て、先ほどのデータストリームを確認する。

他にやること

GA4 の設定を見る限りだと

あたりは設定が必要そう。


comments powered by Disqus