【GTM】カスタムイベントを作成し GA4 に送信する [Techblog#58]

以前、Next.js で GTM (Google Tag Manager) 経由で、GA4 (Google Analytics) を導入しました

(この記事は以下の設置が前提になります)

GA4 を直接導入せず GTM を経由するメリットは、独自のイベントを高い自由度で設置しやすいところにあると思います

今回は、GTM でカスタムイベント用のタグを設置し、GA4 をダッシュボードっぽく扱いカスタムイベントを確認してみます

目的

GA4 で Login のようなカスタムイベントを表示することを目指します

コードの埋め込み以外は、全て GTM で完結します

GA4 はイベントの集計と表示だけを担ってもらうので、役割が異なります

タグと変数とトリガーの設定 (GTM)

GTM では、タグとトリガーを設定してカスタムイベントを作成します

イベント送信の流れとしては、以下のようになります

そのため、まずトリガーを作成します

トリガーは GTM のサイドバーから選択し [新規] をクリックします

トリガーのタイプを「カスタムイベント」に設定し、イベント名(★)を入力します

イベント名(★)は、クライアント側で送信するイベント名と一致させる必要があります

とりあえずここでは CustomEvent としました。トリガー名はなんでも OK です (面倒で CustomEvent にしました)

次にタグを設定するのですが、その前に変数を設定しようかと思います

変数は、GTM を柔軟に設定するために重要な要素で、設定を簡潔にしてくれます (ないと毎回タグを作る必要があります...)

今回は3つの変数を設定しようかと思います

value だけは、この後の説明を見て不要であれば削除し、さらに必要と感じれば別名で追加してもらえればと思います

サイドバーから「変数」を選択し、ユーザー定義変数 (下部) の右側にある [新規] をクリックします

タイプが「定数」であれば、こんな感じ

タイプが「データレイヤーの変数」であれば、こんな感じに設定できます

では、タグの設定に進みましょう

同じくサイドバーから「タグ」を選択します

おそらく GA4 と連携ができているとここに「Google タグ」タイプのタグがあると思います

ちなみに、連携タグも以下の設定のように GA4 計測 ID の設定に変数を利用すると、値をまとめることができます

同様に [新規] をクリックします

まず「タグの設定」をクリックし「Google アナリティクス」>「Googleアナリティクス: GA4イベント」を選択します

すると、測定 ID とイベント名が設定できるかと思います

測定 ID とイベント名の入力フォームの右のブロックアイコンから、先ほど設定した変数を呼び出せます

ここでは、測定 ID に {{GA4-measurement-id}} を設定しました

イベント名は {{eventName}} を設定します。このイベント名が GA4 で記録されるイベント名(☆)になります

任意でイベントパラメータを設定することも可能です

ここでは value に {{value}} を設定することにします

最後に、トリガーをさきほど設定したタグに紐づけます

これらの設定を公開すれば、GTM 上での設定は完了です！ 🎉

イベント送信・確認

@next/third-parties を使用して GTM にイベントを送信してみようと思います

これまでのパラメータを参考にイベントを送信してみます

import { sendGTMEvent } from '@next/third-parties/gtm'
sendGTMEvent({  event: 'CustomEvent',  eventName: 'Login',  value: 'hogehoge',})

これを GA4 上で確認してみましょう。受信されていることを確認しました

さらに、クリックし value を選択してみます

導通していることを確認しました 🎉 🎉

お疲れ様でした 🍵