GTMでクリックイベントを計測する方法｜クリックトリガーの基本と設定手順｜未経験から100日後にGTMのプロになる話【Day 8】

GA4の標準レポートは「ページがどれだけ見られたか」までは教えてくれますが、「そのボタン、実際に押されているのか」は教えてくれません。CTAボタンを設置しても、クリックされているのか無視されているのか分からないままバナーを増やし続けている――という状況、意外と多いのではないでしょうか。

これを解決するのがGTMの「クリックトリガー」です。今日はクリック計測の基本を、実際に手を動かしながら整理します。

クリックトリガーには2種類ある

GTMでクリックを検知するトリガーには、次の2タイプがあります。

• すべての要素（All Elements）：ページ内のあらゆるクリックを検知します。ボタンでもリンクでも画像でも、DOM上でクリックされたものは基本的にすべて拾えます。
• リンクのみ（Just Links）：<a>タグ（href属性を持つ要素）のクリックだけに反応します。外部サイトへの遷移リンクや資料ダウンロードリンクの計測に向いています。

ここで注意したいのは、「すべての要素」トリガーを条件なしで作ると、文字通りサイト内のクリックを1つ残らず監視することになる点です。トリガーの発火条件を「一部のクリック」にして、対象を絞り込む設定を最初から意識しておくと、後々タグが乱立してGTMが読みにくくなるのを防げます。

クリック変数を有効にする

クリックされたこと自体は「すべての要素」トリガーで検知できますが、「どのボタンが」「どのURLへのリンクが」クリックされたかを知るには、クリック関連の組み込み変数を有効にする必要があります。

1. 左メニューの「変数」を開く
2. 「組み込み変数」の「設定」をクリック
3. Click Element／Click Classes／Click ID／Click Target／Click Text／Click URLにチェックを入れる

実務でよく使うのはClick URL（リンク先）とClick Classes（CSSクラス名）です。Click Textは一見便利ですが、アイコンだけのボタンや画像ボタンではテキストが空になるため頼りきりにするのは危険です。ボタンの見た目が変わっても計測が壊れないよう、可能であればクリック対象の要素にID か専用のCSSクラス（例:js-cta-btn）を振っておき、Click ClassesやClick IDで判定する方が運用上は安定します。

GA4にクリックイベントを送るタグを作る

クリックの発生と内容が取れるようになったら、GA4へイベントとして送信するタグを作成します。

1. 「タグ」→「新規」→タグタイプは「Google アナリティクス: GA4 イベント」
2. 「設定タグ」に、既存のGA4設定タグ（Day5で作成したものなど）を指定
3. イベント名を決める（例：click_event、もしくは対象を絞るならcta_clickのように用途が分かる名前にする）
4. イベントパラメータを追加：link_text={{Click Text}}、link_url={{Click URL}}
5. 発火トリガーに、先ほど作成したクリックトリガーを指定して保存

イベント名はclickのような汎用名にすると、後から「これはCTAのクリックなのか、それとも別の要素のクリックなのか」を判別できなくなります。何を計測したくてこのタグを作ったのか、半年後の自分が見ても分かる名前を付けておくことをお勧めします。

プレビューモードで必ず確認する

設定した直後は、プレビューモードで実際にクリックしてタグが発火するか確認します。Day6で解説した手順で接続し、対象のボタンをクリックして「配信されたタグ」に該当のGA4イベントタグが出てくるかチェックしてください。

ここで1つ実務上のハマりどころを共有します。サイトによっては、ボタンに見えている要素の実体が<div>や<span>で、JavaScriptフレームワーク側でクリックイベントの伝播をstopPropagation()で止めているケースがあります。GTMの「すべての要素」トリガーはクリックイベントの伝播（バブリング）を利用してdocument全体で検知しているため、伝播が途中で止められているとGTM側には何も届きません。プレビューモードでクリックしてもタグが1件も発火しない場合は、まずこの可能性を疑ってみてください。

今日のまとめ

クリック計測の基本は「トリガーで検知」「変数で内容を取得」「タグでGA4に送信」の3段構えです。次回は、この基本を踏まえて「特定のボタンだけ」を狙い撃ちで計測する条件設定を解説します。