GA4 のトリセツ

目次 › 第 9 部 Google タグ マネージャーで計測を拡張する

9.3 クリックとフォームの計測

ボタンクリックやフォーム送信をイベントとして取得します。
実践書籍換算 約 12 ページ

この章で学ぶこと

  • クリックやフォームの計測に必要な組み込み変数
  • クリック トリガーの種類と設定方法
  • フォーム送信トリガーの使い方と注意点
  • CSS セレクタを使って、計測したい要素を正確に指定する方法
  • CTA ボタンのクリックを計測する実例

組み込み変数の有効化

GTM には、クリックやフォームの情報を取り出すための 組み込み変数 が用意されています。ただし、初期状態では多くが無効になっているので、まず有効にします。

有効にする手順

  1. 「変数」を開く
  2. 「組み込み変数」の欄の「設定」を押す
  3. 「クリック」と「フォーム」の項目にチェックを入れる

クリックとフォームの組み込み変数

変数内容例
Click Elementクリックされた要素そのもの（HTML の要素）
Click Classesクリックされた要素の class 属性btn btn-primary
Click IDクリックされた要素の id 属性cta-button
Click Targetクリックされたリンクの target 属性_blank
Click URLクリックされたリンクの href 属性https://www.example.co.jp/contact/
Click Textクリックされた要素のテキスト資料をダウンロード
Form Element / Form Classes / Form ID / Form Target / Form URL / Form Text送信されたフォームの情報Form ID = contact-form

ポイント 「クリック」の変数は、実際にクリックされた要素 の情報を返します。ボタンの中のアイコンや <span> をクリックした場合、Click ID や Click Classes は、ボタン本体ではなく、その内側の要素のものになることがあります。後述の CSS セレクタを使うと、この問題に対処できます。

クリック トリガー

GTM のクリック トリガーには、2 種類あります。

トリガー対象使いどころ
クリック - リンクのみ<a> タグ（リンク）のクリックページ遷移を伴うリンク、ファイルのダウンロード、外部リンク
クリック - すべての要素ページのすべての要素のクリック<button> のボタン、タブ、アコーディオンなど、リンクでない要素

「一部のクリック」で条件を付ける

クリック トリガーは、「すべてのクリック」ではなく、「一部のクリック」 を選んで、条件を付けるのが基本です。

トリガーの種類：クリック - すべての要素
このトリガーの発生場所：一部のクリック
条件：Click ID   等しい   cta-button
条件の演算子例
等しいClick ID 等しい cta-button
含むClick URL 含む /contact/
先頭が一致Click URL 先頭が一致 tel:
末尾が一致Click URL 末尾が一致 .pdf
正規表現に一致Click URL 正規表現に一致 \.(pdf|zip|xlsx)$
CSS セレクタに一致するClick Element CSS セレクタに一致する .cta-button, .cta-button *

「リンクのみ」の追加の設定

「クリック - リンクのみ」には、次の設定があります。

設定内容
タグの配信を待つリンクでページが移動する前に、タグの送信を少し待つ（データの取りこぼしを防ぐ）
妥当性をチェックほかのスクリプトがリンクの動作を止めた場合は発火しない

よく使うクリックの計測

計測したいものトリガーの条件の例イベント名の例
電話番号のタップClick URL 先頭が一致 tel:phone_click
メールアドレスのクリックClick URL 先頭が一致 mailto:email_click
LINE の友だち追加ボタンClick URL 含む line.meline_click
特定のボタンClick ID 等しい cta-buttoncta_click

注意 ファイルのダウンロード（file_download）や外部リンクのクリック（click）は、GA4 の 拡張計測機能 で自動的に計測されます（第 3 部）。GTM で同じものを計測すると、二重計測になるので注意しましょう。

フォーム送信トリガー

フォーム送信 のトリガーは、HTML の <form> が送信されたときに発火します。

トリガーの種類：フォーム送信
タグの配信を待つ：オン
妥当性をチェック：オン
このトリガーの発生場所：一部のフォーム
条件：Form ID 等しい contact-form

フォーム送信トリガーの注意点

フォーム送信トリガーは、うまく動かないことが多い トリガーです。

状況起きること
JavaScript でフォームを送信している（Ajax など）送信のイベントが発生せず、トリガーが発火しない
入力のエラーがあっても送信のイベントが起きる送信に失敗したのに計測される
フォームが iframe の中にある（外部のフォーム サービス）GTM から送信を検知できない
確認画面があるフォーム「確認画面へ」で発火し、本当の送信と区別できない

より確実な計測の方法

方法内容確実さ
サンクス ページの表示で計測送信完了後に表示されるページ（/thanks/ など）の表示をトリガーにする高い
データレイヤーで計測送信が成功したときに、サイト側で dataLayer.push を実行してもらう（次の章）最も高い
要素の表示で計測送信完了のメッセージが表示されたことをトリガーにする（第 5 章）中程度
フォーム送信トリガー上の注意点を確認したうえで使う状況による

ポイント 問い合わせや資料請求など、キーイベントにするような重要なフォームは、サンクス ページ または データレイヤー で計測するのが安全です。フォーム送信トリガーは、プレビュー モードで、入力エラーのとき、送信成功のときの両方を必ず確認しましょう。

CSS セレクタの活用

CSS セレクタ を使うと、計測したい要素を、ID や class よりも柔軟に指定できます。

よく使う CSS セレクタ

セレクタ意味例
#idid が一致する要素#cta-button
.classclass を含む要素.btn-primary
要素 要素ある要素の中にある要素header a（ヘッダーの中のリンク）
[属性]属性を持つ要素[data-track]
[属性="値"]属性の値が一致する要素[data-track="cta"]
[属性^="値"]属性の値が指定の文字で始まる要素a[href^="tel:"]
*すべての要素.cta-button *（ボタンの中のすべての要素）
,いずれかに一致.cta-button, .cta-button *

ボタンの内側のクリックに対処する

ボタンの中にアイコンや <span> がある場合、それらをクリックすると、Click Element はボタン本体ではなくなります。

<button class="cta-button">
    <span class="icon">📄</span>
    <span>資料をダウンロード</span>
</button>

この場合、次の条件にすると、ボタン本体をクリックしても、内側の要素をクリックしても発火します。

Click Element   CSS セレクタに一致する   .cta-button, .cta-button *

計測用の属性を付けてもらう

サイトのデザインの変更で class 名が変わると、計測が止まってしまうことがあります。開発者に依頼できる場合は、計測専用の属性（data-track など）を付けてもらうと、デザインの変更の影響を受けにくくなります。

<a href="/download/" class="btn" data-track="whitepaper-download">資料をダウンロード</a>
Click Element   CSS セレクタに一致する   [data-track], [data-track] *

実例: CTA ボタンの計測

最後に、トップページの「無料相談を申し込む」ボタンのクリックを計測する例を、通して見てみましょう。

1. 計測の設計

項目内容
計測したいことどのページのどの CTA ボタンが、どれくらいクリックされているか
イベント名cta_click
パラメータcta_name（ボタンの種類）、link_text（ボタンの文言）、link_url（リンク先）
対象の要素data-track="cta-consult" の属性が付いたリンク

2. トリガーを作る

名前：Click - CTA 無料相談
トリガーの種類：クリック - リンクのみ
タグの配信を待つ：オン（2000 ミリ秒）
このトリガーの発生場所：一部のリンククリック
条件：Click Element   CSS セレクタに一致する   [data-track="cta-consult"], [data-track="cta-consult"] *

3. タグを作る

名前：GA4 - Event - cta_click
タグの種類：Google アナリティクス：GA4 イベント
測定 ID：{{GA4 測定 ID}}
イベント名：cta_click
イベント パラメータ：
    cta_name  = consult
    link_text = {{Click Text}}
    link_url  = {{Click URL}}
トリガー：Click - CTA 無料相談

4. 確認と公開

  1. プレビュー モードで、ボタンをクリックし、タグが発火することを確認する
  2. ボタンの中の文字やアイコンをクリックした場合も確認する
  3. GA4 の DebugView で、cta_click イベントと、3 つのパラメータの値を確認する
  4. バージョン名と説明を書いて公開する
  5. GA4 で cta_name をカスタム ディメンションに登録する（第 3 部）

よくある質問

Q. クリックのトリガーが、プレビュー モードで発火しません。

A. 次の点を確認しましょう。

確認すること内容
組み込み変数条件に使っている組み込み変数（Click ID、Click Classes など）が有効になっているか
変数の値Tag Assistant でクリックのイベントを選び、「Variables」のタブで、実際の Click ID などの値を確認する
リンクのみ / すべての要素<a> タグでない要素（<button> など）を、「リンクのみ」のトリガーで計測しようとしていないか
内側の要素ボタンの中のアイコンや文字をクリックして、Click Element が内側の要素になっていないか

Q. 同じクリックで、タグが 2 回発火します。

A. 「リンクのみ」と「すべての要素」の 2 つのトリガーが、同じクリックに反応している、同じ条件のトリガーが 2 つのタグに設定されている、などが考えられます。Tag Assistant で、発火したタグと、その原因のトリガーを確認しましょう。

Q. Click Text に、余計な空白や改行が入ります。

A. 要素の中の文字に、改行やスペースが含まれていると、そのまま値に入ります。GA4 での集計に影響する場合は、カスタム JavaScript の変数で空白を取り除いた値を作るか、計測専用の data- 属性に、ボタンの名前を入れてもらう方法がおすすめです。

実践ワーク

自社のサイトで、計測したいクリックを 3 つ選び、設計表を作ってみましょう。

計測したいクリック要素の特定方法（CSS セレクタ）トリガーの種類イベント名パラメータ
例：ヘッダーの「お問い合わせ」ボタンheader a[href*="/contact/"], header a[href*="/contact/"] *クリック - リンクのみcta_clickcta_name = header_contact

設計表ができたら、ブラウザの開発者ツールで、選んだ CSS セレクタが目的の要素だけに一致するかを確認してから、GTM で設定しましょう。開発者ツールのコンソールで document.querySelectorAll('セレクタ') を実行すると、一致する要素の数を確かめられます。

まとめ

  • クリックやフォームを計測する前に、組み込み変数の「クリック」「フォーム」を有効にする
  • クリック トリガーには「リンクのみ」と「すべての要素」があり、「一部のクリック」で条件を付けて使う
  • フォーム送信トリガーは動かない・誤動作することが多く、重要なフォームはサンクス ページかデータレイヤーで計測する
  • CSS セレクタを使うと、ボタンの内側のクリックや、計測専用の属性を使った指定ができる
  • 計測の設計 → トリガー → タグ → 確認 → 公開 → カスタム ディメンションの登録、の順で進める

次の章では、サイトと GTM の間で情報を受け渡す「データレイヤー」の仕組みを学びます。

Ko-fi で制作者を支援する