この記事を読むメリット
GA4のイベントトラッキングの基本を理解し、ユーザーのサイト内行動を可視化する方法が身に付きます。
GTMを使った実装手順を学び、ボタンやリンクのクリック、スクロール、フォーム送信などを正確に計測できるようになります。
イベントパラメータの設計と管理のポイントを押さえ、より詳細なコンバージョン分析やレポート作成に役立つ知識が得られます。
この記事のポイント
GTMを活用したGA4イベント計測の基礎 – GA4とGTMの連携により、サイト上の特定アクションをイベントとして計測する基本手順(タグ、トリガー、変数設定)を解説します。
主要ユースケースの具体例 – ボタンクリック、リンククリック、ページスクロール、フォーム送信といった代表的なユーザー行動のトラッキング方法を実装手順と共に紹介します。
イベントパラメータ設計の基本 – イベント名とイベントパラメータの考え方を整理し、GA4で効果的に分析するためのパラメータ命名・管理の基本方針を説明します。
この記事の目次
はじめに:GA4イベントトラッキングとGTMの役割
GTMを用いたイベントトラッキングの基本手順
タグとトリガーの仕組み(GA4イベントタグの設定)
変数の活用(組み込み変数とイベントパラメータ)
イベント計測の実践例
ボタンクリックのトラッキング
リンククリックのトラッキング
ページスクロールのトラッキング
フォーム送信のトラッキング
イベントパラメータ設計と管理の基本
<↑ GA4 イベントとパラメータ>
GA4では、ユーザーの様々な行動を「イベント」として計測します。ページビューも含めて、多くのユーザーアクションがイベントとして捉えられる仕組みです。そして各イベントには追加情報として「イベントパラメータ」を付与でき、どの要素がクリックされたか等の詳細データを収集できます。これにより、サイト内のユーザー行動を細かく分析できるようになります。
GA4には標準で自動収集イベントと拡張計測機能イベントが用意されており、設定をONにするだけで基本的なユーザー行動を計測できます。
<↑ GA4 拡張計測機能>
例えば、
「スクロール(90%到達時)」
「離脱クリック(外部サイトへのリンククリック)」
「ファイルダウンロード」
「フォームの送信」
等は拡張計測機能により自動計測可能です。しかし、この拡張計測機能では計測対象や条件が限定的で、内部リンクのクリックや特定ボタンのクリックなどはカバーされません。そこで役立つのがGTMによるカスタムイベント計測です。GTMを使えば、自分で指定したイベント名やパラメータで任意のユーザー行動を計測することができます。
本記事では、GTMを用いたGA4イベントトラッキングの基本に焦点を当て、代表的なケースごとの設定方法を解説します。
ボタンやリンクのクリック
ページのスクロール
フォーム送信
といったサイト内行動をどのように計測できるかを解説します。加えて、イベント名やパラメータの設計についての基本的な考え方も紹介します。
まず、GTMでGA4のイベント計測を行う際の基本手順を解説します。大まかな流れは次のとおりです。
<↑ Google タグ>
Google タグの準備:GTMにGA4の測定ID(Gから始まるID)を登録した「Google タグ」を設置します(すでにGA4のページビュー計測をGTM経由で行っている場合、このタグは設定済みのはずです)。
<↑ Google アナリティクス: GA4 イベント>
イベント用のタグ作成:GTMで新しいタグを作成し、種類として「Google アナリティクス: GA4 イベント」を選択します。このタグで計測したい特定のイベント名(例:「button_click」や「form_submit」など)を設定し、必要に応じてイベントパラメータ(後述)を追加します。
<↑ トリガー>
トリガーの設定:次に、そのタグがいつ発火するかを決める「トリガー」を設定します。
トリガーとはユーザーのある操作や条件が満たされた瞬間を検知するルールです。例えば「特定のボタンがクリックされた時」「ページが50%スクロールされた時」など、タグ発火の条件を指定します。GTMにはあらかじめ様々なトリガータイプが用意されており、クリックやフォーム送信、スクロール等に対応しています。
<↑ 作成したイベントタグに、対応するトリガーを紐付ける>
タグとトリガーの連携:
<↑ タグ、トリガー、発火のイメージ>
作成したイベントタグに、対応するトリガーを紐付けます。こうすることで「〇〇のタグを△△のタイミング(トリガー発動時)に送信する」という設定が完成します。例えば「GA4イベントタグ(イベント名: book_click)を、特定ページ上の申込ボタンがクリックされたときに送信」と設定します。
<↑ GTMの「プレビューモード」>
問題がなければ変更を公開し、実際のユーザー行動データ収集を開始します。計測を開始したら、GA4のリアルタイムレポートやデバッグビューでイベントが受信されていることを確認しましょう。
<↑ GTMの「プレビューモード」で正しくタグが発火するかテスト>
以上が基本的な流れです。ポイントは、タグ(何を送るか)とトリガー(いつ送るか)を組み合わせる設計になっていることです。次章では具体的なケース毎に、この手順をどう適用するかを見ていきます。
代表的なユーザー行動を計測する具体例を順に見ていきます。ここでは以下の4つのケースについて、GTMを使ったGA4イベントの設定方法を解説します。
ボタンクリックのトラッキング
リンククリックのトラッキング
ページスクロールのトラッキング
フォーム送信のトラッキング
それぞれ順番に、GTMでの実装手順とGA4への送信内容を紹介します。
ケース:
トップページのCTAボタン(例:「資料請求」「お問い合わせ送信ボタン」など)がどれだけクリックされているかを知りたい場合を想定します。
GTMでの設定ポイント:
ボタン要素がクリックされたことを検知する「クリック」トリガーと、GA4にイベントを送信するタグを組み合わせます。
まず対象のボタンを特定する方法として、HTML要素にユニークなID属性を付与し、そのIDを使ってトリガー条件を指定する方法が簡単で確実です。
例えば、計測したいボタンのHTMLにid="signup-btn"
等の識別子を設定します。
次にGTMでトリガーを新規作成し、トリガータイプに「クリック – すべての要素」を選択します(※ボタンが<a>
タグの場合は「リンクのみ」トリガーでも可)。
<↑ トリガー:「Click ID が signup-btn に等しい」と指定>
条件として「Click ID が signup-btn に等しい」と指定すれば、このIDを持つボタンがクリックされた時だけ発火するトリガーを設定できます。
最後にGA4イベントタグを用意し、イベント名やパラメータを設定して先ほどのトリガーを紐付けます。
イベント名とパラメータ設計:イベント名はシンプルに「button_click」など分かりやすいものにします。加えて、どのボタンがクリックされたかを記録するためパラメータを活用します。
<↑ イベント名「button_click」、パラメータ名「button_text」>
例えばパラメータ名「button_text」を設計し、値として組み込み変数の「Click Text」を渡す設定にします。
<↑ パラメータ名「button_text」を設計し、値として組み込み変数の「Click Text」を渡す設定にする>
こうすると、ユーザーがクリックしたボタン上のテキスト(例:「資料請求」など)がGA4側に送信されます。
他にも「button_id」パラメータを設けてClick ID
(ボタンのID値)を送信する方法も有効です。これらのパラメータにより、同じ「button_click」イベントでもどのボタンがクリックされたのかを計測できるようになります。
ケース:サイト内の特定のリンクのクリック数を計測したい場合です。例えばトップページの特定バナーリンクのクリック率や、記事内のアンカーリンクの利用状況、あるいは外部サイトへの誘導リンクのクリック数などが該当します。GA4の拡張計測では外部ドメインへのリンククリック(離脱クリック)のみ自動計測されますが、内部リンクのクリックは対象外のため、GTMでカスタムイベントを設定する必要があります。
<↑ クリック関連の組み込み変数>
GTMでの設定ポイント:リンクのクリックも基本的な仕組みはボタンと同様です。対象のリンクが<a>
タグである場合、トリガータイプに「クリック – リンクのみ」を選択すると効率的です。トリガーの発火条件として、計測したいリンクを識別できる情報を設定します。
例えば「Click URL(クリックされたリンク先URL)に特定の文字列を含む」とすれば、特定の遷移先へのリンククリックだけを計測することができます。
「リンクテキスト(Click Text)が〇〇に等しい」「クリック要素のCSSセレクタが△△に一致する」等、サイト構造に合わせて条件指定が可能です。GTMにはクリック関連の組み込み変数(Click Element, Click URL, Click Text など)が用意されており、自由に組み合わせて条件を指定できます。
<↑ 「Click URL」「Click Text」をパラメータで送信>
トリガーを設定したら、GA4イベントタグを作成し、紐付けます。イベント名は「link_click」などとし、必要に応じてパラメータを追加します。例えばパラメータ「link_url」を送り、クリックされたリンクのURL(遷移先)を記録しておくと分析に役立ちます。また「link_text」パラメータにリンクのアンカーテキストを渡せば、どの文言のリンクがクリックされたかを計測できます。このようにイベントパラメータを付与しておくことで、同じ「link_click」イベントでもリンク先別・テキスト別のクリック数をGA4の探索レポート等で比較できるようになります。
ケース:
ユーザーがページをどの程度までスクロールしたかを計測します。これは記事コンテンツの読了率やページの関心度合いを測る指標として活用できます。GA4の拡張計測機能ではページ下部90%までのスクロールを検知する「scroll」イベントが自動収集されます。しかし90%到達のみではやや粗いため、例えば50%や75%など複数段階のスクロール深度を追跡したい場合にGTMでカスタムイベントを設定します。
<↑ トリガー:スクロール距離>
GTMでの設定ポイント:スクロール計測にはトリガータイプ「スクロール距離」を使用します。トリガー設定で「スクロール距離」を選択し、%(パーセンテージ)で「縦方向スクロール距離」を指定します。例えば「25, 50, 75, 100」と設定すれば、ユーザーがページの25%、50%、75%、100%の位置まで到達するたびにトリガーが発火します。発火条件として全ページ共通で設定することもできますし、特定ページのみに限定することも可能です。次にGA4イベントタグを作成し、トリガーと関連付けます。
イベント名とパラメータ設計:イベント名は「scroll_percentage」などスクロール率を示す名前にします。
<↑ イベントパラメータとして「percent_scrolled」というパラメータを設定し、値にGTMの組み込み変数「Scroll Depth Threshold」を渡す>
イベントパラメータとして例えば「percent_scrolled」というパラメータを設定し、値にGTMの組み込み変数「Scroll Depth Threshold」を渡します(Scroll Depth Thresholdは現在発火したスクロール深度の割合を示す変数)。こうしておけば、ユーザーが何%までスクロールしたイベントなのかをGA4側で記録できます。
実際のデータ送信イメージとしては、「scroll_percentage」イベントが発生し、パラメータpercent_scrolled=50(50%スクロール時)や75(75%時)といった値がGA4に送られる形です。複数の「縦方向スクロール距離」を追跡することで、ページ毎のユーザーの離脱ポイントやコンテンツ消化率を分析できるようになります。
<↑ 拡張計測機能「スクロール数」>
なお、90%のスクロールはGA4が自動取得する「scroll」イベントと重複するため、必要に応じてGA4側で重複しないよう設定を調整してください(例:当該カスタムイベントのみを使用する場合は拡張計測のスクロールイベントをOFFにします)。
ケース:資料請求フォームや問い合わせフォームなど、ユーザーが送信ボタンを押した完了イベントを計測します。コンバージョンに直結する重要なアクションであり、確実にデータ収集しておきたいポイントです。GA4の拡張計測機能でもフォームの送信イベントを自動検知する仕組みがありますが(※同一セッションで1回のみ記録)、より信頼性高く複数回の送信やフォーム別の計測を行うには、GTMで独自に設定する方法が有効です。
GTMでの設定ポイント:
<↑ トリガー「フォームの送信」>
フォーム送信を計測するにはトリガータイプ「フォームの送信」を使います。これはページ上でフォームのsubmit
イベント(送信動作)が発生した時にトリガーが発火します。設定時に「ウェイト(タグの配信を待つ)」オプションを有効にしておくと、送信後ページ遷移があっても計測タグが遅れず送信されるので安心です(既定値の2000ミリ秒程度待機させる設定が推奨されます)。
また「妥当性のチェック」をオンにすると、実際にフォームが送信成功した場合のみ発火し、未送信ではタグが発火しないよう制御できます。トリガー条件には特定のフォームに限定するための識別子を指定します。例えば「フォームIDがcontact-form に等しい」とすれば、そのIDを持つフォーム送信時のみイベントを計測できます。フォームにIDや名前が無い場合でも、フォーム要素のURLやCSSのclassなどで条件指定することも可能です。
続いてGA4イベントタグを用意し、イベント名とパラメータを設定します。イベント名は「form_submit」など送信完了を表すものにします。
<section id="request">
<h2>資料請求フォーム</h2>
<form id="requestForm" class="gtm-form request" action="/thanks.html" method="post">
<label>お名前
<input type="text" name="name" required>
</label>
<label>メールアドレス
<input type="email" name="email" required>
</label>
<button type="submit">資料請求する</button>
</form>
</section>
<↑ HTMLコード 「form_id」の設定例>
パラメータについては、送信されたフォームの種類や場所を把握できるように情報を付加します。例えば「form_name」または「form_id」といったパラメータを記述し、値に送信フォームの名称やIDを渡すようにします。GTMでは{{Form ID}}や{{Form Classes}}といった組み込み変数でフォーム要素の属性を取得できます。これによって、GA4上で複数のフォーム送信イベントが区別できるようになります。
最後に、GA4におけるイベントパラメータの設計・管理について解説します。GA4では各イベントに最大25個のパラメータを付与して詳細情報を記録することができます。
<↑ GA4 管理 > カスタム定義 > カスタム ディメンション>
一方で、GA4ではイベント名自体しかデフォルトではレポートのディメンションに表示されません。パラメータで送った情報をレポート上で分析に使うには、カスタムディメンションとしてGA4管理画面に登録する必要があります。
パラメータ名の命名規則:パラメータ名は何のデータか一見して分かるよう簡潔かつ体系的に命名します。英数字とアンダースコアで記述し、スペースは使いません(例:「button_text」「form_id」「percent_scrolled」など)。GA4には推奨イベント向けに決められたパラメータ名もありますが、カスタムの場合は自由に分かりやすい名前を付けて構いません。複数イベントで共通して使うパラメータがあれば、名前を統一しておくと管理しやすくなります。
<↑ GTM イベント パラメータの設定>
GTMの設定画面でイベントタグを作成する際、「イベントパラメータを追加」で名前と値(変数)を入力しますが、このパラメータ名は後からGA4側でカスタムディメンションを登録する際にも正確に一致させる必要があります。
イベント名の設計:イベント名は英字の小文字やアンダースコアで記載し(例:「file_download」「cta_click」など)、何のアクションか端的に表すようにします。GA4にはあらかじめ予約されたイベント名(推奨イベントや自動収集イベント)がありますが、自分で任意の名前を付けるカスタムイベントでは、なるべく他と重複しない分かりやすい名前を付与しましょう。
<↑ GA4推奨イベント「見込み顧客の発掘向け>
例えば、フォーム送信を計測するイベント名として「generate_lead」(GA4推奨の「見込み顧客の発掘向け」イベント)を使うこともできますし、わかりやすく「form_submit」とすることもできます。
データの確認と活用:
<↑ GA4 DebugView>
実装したイベントが正しく計測されると、GA4のリアルタイムレポートやDebugViewにイベント名が表示され、パラメータも確認できます。
GA4の探索にてカスタムディメンションとして登録したパラメータを分析軸に加えることで、イベントの詳細な傾向を探ることができます。例えば「button_clickイベントのbutton_text別発生数」を比較すれば、どのボタンが最もクリックされているか把握できます。
本記事では、GTMを用いたGA4イベントトラッキングの基本について、代表的なサイト内アクションの計測方法を解説しました。ボタンやリンクのクリック、スクロール深度、フォーム送信といったユーザー行動を可視化することで、サイトのどこに関心が集まっているか、コンバージョンまでの導線にボトルネックがないか等、様々な分析が可能となります。
次回予告:連載第2回では、今回取得したイベントをコンバージョンとして設定する方法や、より高度なカスタムイベントの設定方法を解説する予定です。具体的には、GA4管理画面でのコンバージョン登録、eコマース計測におけるイベント設計、イベント間の関連分析など、応用編として一歩踏み込んだトピックを扱います。
最後まで読んでいただき、ありがとうございました。