概要
Universal Analyticsで実装しているイベントのGoogle Analytics 4移行の備忘録となります。内容に誤りあればコメントで指摘いただけると助かります。
※GA4はアップデートを繰り返しているため、この記事の内容はすぐに古くなる可能性があります。
前提
今回はUAをGTMにて配信しているサイトにて、新たにGA4プロパティを作成してUA/GA4の並行運用を実現させていきます。
| AS-IS (現状の実装) | TO-BE (UA/GA4で並行運用) |
|---|---|
| GTMからanalytics.jsを配信している | 1) GTMでanalytics.jsを配信しつつgtag()を有効にする |
| イベント名のルールが策定されていない | 2) GA4を考慮しイベント名のルールを策定する |
| UAで複数プロパティで計測中 | 3) 複数の送信先を考慮する |
| GA4で複数プロパティで計測予定 | 3) 複数の送信先を考慮する |
1) GTMでanalytics.jsを配信しつつgtag()を有効にする
ーーーーーー
※2022年9月追記
カスタムHTMLでのgtagコマンド実行は推奨されていませんので、カスタムHTMLではなくサイト側のフロントエンドに直接埋め込んだほうがいいかと思います。
https://developers.google.com/tag-platform/tag-manager/web/datalayer
ーーーーーー
GA4に対してはga()でイベント送信できないため、gtag()を呼び出せる状態にする必要があります。
GTMでGA4設定をすればgtag.jsが配信されますが、そのままではgtag()を実行してもgtag is not defined になってしまいますので以下のようなカスタムHTMLをGTMで配信してgtag()を有効にします。
※GTMでのUA/GA4併用状態にて、どのような管理画面設定でgtag()が有効になるのかはまだ分かっていません。
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA4-MEASUREMENT-ID', {'send_page_view' : false});
gtag('config', 'UA-TRACKING-ID', {'send_page_view' : false});
</script>
ここではイベントトラッキングを目的としているため、念のため{'send_page_view':false}として、このタイミングでのページビューの送信を防ぎます。
2) GA4を考慮しイベント名のルールを策定する
「ga()でのUA送信」と「gtag()でのUA/GA4送信」の対応関係は以下のようになりまして、「UAのイベントアクションがGA4のイベント名に相当する」ことがポイントとなります。
ga()でのUA送信
ga('send','event','category_name','action_name','label_name','value')
gtag()でのUA/GA4送信
gtag('event', 'action_name', {
'event_category': 'category_name',
'event_label': 'label_name',
'value': 'value',
});
※gtag()のevent_category、event_label、valueはUA用として予約されているようです。
命名規則の整理
イベント名はルール無しに運用されていることもあり、例えば以下のような命名規則でイベントが飛んでいることがあります。
| イベントカテゴリ | イベントアクション | イベントラベル |
|---|---|---|
| トップページ | カルーセル | 1枚目 |
| イベントカテゴリ | イベントアクション | イベントラベル |
|---|---|---|
| 詳細ページ | おすすめ枠 | ボタン1 |
このように、厳密にルールを定めていない場合には「カテゴリ・アクション・ラベル」が「大カテゴリ・中カテゴリ・小カテゴリ」のような形で運用されてしまっているケースは少なくありません。
ここで困るのは、このアクション名が本当の意味での「アクション」でないことです。
例えば、現状このように送っていたとします。
ga('send','event','トップページ','カルーセル','1枚目')
仮にそのままのルールでgtag()に移行するとするとこうなるでしょう。
gtag('event', 'カルーセル', {
'event_category': 'トップページ',
'event_label': '1枚目',
});
しかしこれでは、GA4のイベント名が「カルーセル」で設定されてしまいます。本来はアクション（動作）としての「クリック」や「スワイプ」が設定されるべきです。
これではイベント名が無制限に増えてしまいますが、GA4無償版ではイベント名は上限が50に制限されています。
つまり移行のタイミングで、イベント名の命名規則も正しい形へと整理する必要があります。
3） 複数の送信先を考慮する
UA/GA4で任意のプロパティに送信したい場合には、send_toにGA_MEASUREMENT_IDを設定する形になります。
gtag('event', 'カルーセル', {
'event_category': 'トップページ',
'event_label': '1枚目',
'send_to': 'GA_MEASUREMENT_ID'
});
※send_toはUAのプロパティID、GA4の測定IDの両方に対応しています。
おわりに
以上の検討を進めるにあたってはリセラーの方にサポートに入っていただきながら、実装方針を整理することができました。 m(_ _)m
GA4ではイベントへのコンバージョン設定など、機械学習を活かした新しい分析が可能になるのかもしれませんが、やはり自社サイトで運用してみないことには理解が深まりません。その意味で将来発生するGA4移行への準備や技術調査のためにも平行運用しておけると良いと思いました。
GA4においてもFirebaseの製品群のようにPush通知/ABテスト/Analyticsが連携できるようになったら、グロースの文脈でなかなか面白そうです。