GA4へカスタムイベントをdataLayerから送る
Google Analytics4ではユニバーサルアナリティクスから多くの変更があり、dataLayerからのカスタムの送信方法も変わりました。
この記事では、Google Analytics4(GA4)へGoogle Tag Manager(GTM)を使ってdataLayerからカスタムイベントを送信する方法を解説します。
また、WebサイトへのGTMの導入と、GTM経由でGA4が設定されていることを前提としています。
この記事のゴール
このJavaScriptをフロントエンドで実行すると、
window.dataLayer.push({
event: 'custom_event',
custom_event_name: 'click_event_button',
custom_event_value: value,
})
次のようにGA4のイベント画面でカスタムイベント、パラメータを分析できるようになります。
GTMを設定
GTMではdataLayerにカスタムイベントがPushされた時に、GA4へイベントを送るというタグを設定します。
変数を作成
まず、dataLayerの値をGTM上で扱えるようにするため、「変数」を作成します。
GTM(表記はタグマネージャー)の管理画面を開き、変数の画面から新規をクリックします。
変数のタイプに「データレイヤーの変数」を、データレイヤーの変数名にdataLayerにPushするカスタムイベント名を指定します。この記事ではGA4のイベントの命名がスネークケースのため、custom_event_name としていますが、GA4のデフォルトのイベント名と衝突しなければ任意のもので大丈夫です。
次に、同じようにカスタムイベントのパラメータである、バリューについても変数を作成します。
この記事では custom_event_value という命名にしています。
以下のように二つの変数ができていることを確認してください。
また、dataLayerからのイベントのパラメータを1つ以上付与したい場合は、ここで変数を増やしておき、今後のステップでもそれぞれ対応する必要があります。
トリガーを作成
GA4へイベントを送信するタイミングとなる、トリガーを設定します。
GTMのトリガーのタブから新規をクリックします。
トリガーのタイプを「カスタム イベント」を選択し、イベント名を custom_event とします。このイベント名はdataLayerにPushする際に任意で指定するものなので、変えても構いません。
タグを作成
最後に、上記で作成した、変数とトリガーを用いてタグを作成します。
GTMのタグのタブから新規をクリックします。
「タグの種類」に「Google アナリティクス:GA4イベント」を選択、「測定ID」にWebサイトのGA4の G-XXXXXという形式のIDを指定します。
「イベント名」にはテキストフォームの横にあるブロックのアイコンから custom_event_nameのデータレイヤーの変数を選択します。
「イベント パラメータ」にはイベントパラメータに custom_event_valueというカスタムイベントの値であることが分かりやすいパラメータ名を、「値」にはcustom_event_valueのデータレイヤーの変数を選択します。
プレビューで確認
次の手順のdataLayerにイベントをPushするの実装を終えていれば、この段階でGTMの設定が正しいかをプレビューモードで確認することができます。
GTMの「プレビューボタン」をクリックします。
その次にサイトのURLを入力し、新しく開いたタブのサイトでイベントが発火する捜査を行い閉じます。
その後、タグマネージャーのプレビューのページで、 Tags Fired の中に作成したタグが含まれていれば、タグやdataLayerの実装が正しく行われています。また、この画面でdataLayerやイベントの詳細についてもデバッグをすることができます。
dataLayerにイベントをPushする
JavaScriptからは window.dataLayer に以下のようなパラメータでPushします。
event にはトリガー条件である custom_event を指定し、 custom_event_name, custom_event_value には任意の値を設定します。
ここでは、ボタンがクリックされたときのイベントを収集している例で、click_event_buttonというイベント名で value は変数からボタンごとの値を指定しています。
window.dataLayer.push({
event: 'custom_event',
custom_event_name: 'click_event_button', // 任意のカスタムイベント名
custom_event_value: value, // 任意のカスタムイベントのパラメータ
})
GA4でカスタム定義を作る
以上のGTMの設定でGA4へイベントは送信されているのですが、カスタムパレメータをGA4で分析するためには「カスタム定義」を作成する必要があります。
GA4の設定画面の「カスタム定義」のタブから「カスタムディメンションを作成」をクリックします。
そして、「ディメンション名」にdataLayerの変数と合わせて、 custom_event_valueを入力し、「イベント パラメータ」に custom_event_value を入力し保存します。
また、この設定は反映までに最大48時間かかります。
以上で、dataLayerからカスタムイベントをGA4へ送信し分析するための準備が整いました。
GA4でイベントを確認
GA４のイベントタブで送信したカスタムイベント名を選択すると、custom_event_value にdataLayerで指定したものが反映されていることが分かります。
このイベントは他のイベントと同様に扱うことができ、GA4の探索レポートでも分析に活用できます。
以上が、dataLayerからGA４へカスタムイベントを送信する設定の手順でした。
この記事では解説はしていませんが、それぞれのステップをより理解することで、さらに細かくカスタマイズされたイベントを収集することもできます。
参考になれば幸いです。
Discussion