GTMでボタンのクリックを計測する：電話・LINE追加・資料請求

問い合わせはフォームからだけ来るわけではありません。スマートフォンで電話番号のボタンを押す人、LINEの友だち追加ボタンから入る人、料金表のPDFだけ持って帰る人がいて、小さな教室やお店ではむしろこちらのほうが多いこともあります。この記事では、Googleタグマネージャー（GTM）のクリックのトリガーを使って、こうしたボタンが押された回数をGoogleアナリティクス4（GA4）に送り、「どこのボタンが押されたか」まで分けて数えるところまでを書きます。読み終わると、電話・LINE・PDF・Instagram・地図の5種類のボタンを、トリガーの条件まで含めて自分のGTMに作れる状態になります。前提として、GTMのコンテナがサイトに入っていて、GA4のGoogleタグがGTMから配信されているところまでは済んでいるものとします。

例は全記事共通の「サンプル料理教室」です。スタッフ6名ほどの予約制の料理教室で、ホームページ sample-cooking.example はWordPressで外部の制作会社が作りました。測定IDは G-XXXXXXXXXX、コンテナIDは GTM-XXXXXXX として伏せて書きます。管理画面の名前や上限は2026年10月時点のものです。

この記事の内容

1. 先に決めること
2. 作るものの一覧
3. 手順
4. ボタンの中のアイコンや文字を押すと数えられない理由
5. 応用
6. できないことと、その代わり
7. よく詰まるところ
8. 次にやること

先に決めること

クリックの計測は、GTMの画面を開く前に3つ決めておくと、あとで作り直さずに済みます。

何を数えるか（種類ごとにイベント名を分ける）

まず、数えるボタンの種類を書き出します。サンプル料理教室なら、電話番号のボタン、LINEの友だち追加ボタン、レッスン案内のPDF、Instagramへのリンク、Googleマップへのリンクの5種類です。

イベント名は種類ごとに分けます。電話は tel_click、LINEは line_click、PDFは pdf_download、Instagramは instagram_click、地図は map_click のようにします。全部を button_click のような1つの名前にまとめてパラメータで分ける作り方もありますが、小さな会社のサイトではおすすめしません。GA4のキーイベント（旧コンバージョン）はイベント名単位でしか付けられないので、電話とLINEだけを申込の数として数えたいときに分けられなくなるからです。

イベント名はGA4の命名規則に合わせます。先頭は英字、使えるのは英数字とアンダースコアだけで、スペースは使えません。大文字と小文字は区別されるので、tel_click と Tel_Click は別のイベントとして数えられます。迷ったら全部小文字にそろえます。長さは40文字までです。

GA4が自動で取っているものと、GTMで取るもの

GA4には拡張計測機能があり、オンにしておくと一部のクリックは何もしなくても取れます。離脱クリック（click）は、別のウェブサイトへ移動するリンクが押されるたびに送られます。ファイルのダウンロード（file_download）は、pdf・xlsx・docx・zip などの拡張子のファイルへのリンクが押されたときに送られます。

なので、Instagramや地図、LINEへのリンクは、拡張計測機能の click としてすでにGA4に届いています。レッスン案内のPDFも file_download として届いています。それでもGTMで取り直す理由は3つあります。

• 電話番号（tel:）は「別のウェブサイトへ移動するリンク」ではないので、離脱クリックには入らない
• 拡張計測機能の click は外部リンク全部が同じ名前で来るので、LINEだけをキーイベントにできない
• 「ヘッダーのボタンか、ページ下の固定バーのボタンか」という押された場所が分からない

もう1つ大事なのは、GTMで作るイベントに click や file_download という名前を付けないことです。拡張計測機能のイベントと同じ名前になり、どちらから来た数字か区別できなくなります。

どこのボタンかをどう見分けるか

サンプル料理教室のサイトでは、電話番号のボタンがヘッダー、レッスン紹介ページの本文、スマートフォンで画面下に出る固定バー、フッターの4か所にあります。

見分け方は3通りあります。

方法	やること	向く場面
ボタンの位置を変数で判定する	GTMのカスタムJavaScript変数で、押された要素がヘッダー・フッター・固定バーのどれの中にあるかを返す	制作会社に頼まずにGTMの中だけで済ませたい
ボタンのIDやクラスで分ける	組み込み変数の Click ID・Click Classes をそのまま送る	制作会社がボタンごとにIDを付けてくれている
ボタンにdata属性を付けてもらう	制作会社に data-location="header" のような属性を足してもらい、GTMで読む	テーマを作り直すついでがある

この記事では1つめで作ります。サイトのHTMLを変えずに済み、制作会社への依頼が要らないからです。

作るものの一覧

サンプル料理教室で作るものを先に一覧にします。

ボタン	イベント名	トリガーの種類	トリガーの条件	キーイベント
電話番号のボタン	tel_click	クリック – リンクのみ	Click URL 先頭が一致 tel:	する
LINEの友だち追加ボタン	line_click	クリック – リンクのみ	Click URL 正規表現に一致（LINEのドメイン2つ）	する
レッスン案内のPDF	pdf_download	クリック – リンクのみ	Click URL 含む lesson-guide かつ 正規表現で .pdf 終わり	しない
Instagramへのリンク	instagram_click	クリック – リンクのみ	Click URL 含む instagram.com	しない
Googleマップへのリンク	map_click	クリック – リンクのみ	Click URL 正規表現に一致（地図のURL2種類）	しない

どのイベントにも、同じパラメータを3つ付けます。

パラメータ名	値	中身の例
button_location	カスタムJavaScript変数「JS – クリック位置」	header / footer / fixed_bar / content
link_url	{{Click URL}}	tel:03-0000-0000
link_text	{{Click Text}}	電話で問い合わせる

手順

GTMの作業はワークスペースの中で進め、最後にまとめて公開します。

クリックのトリガー2種類の違い

GTMのクリックのトリガーには「すべての要素」と「リンクのみ」の2種類があります。公式ヘルプの説明では、すべての要素はページ上のすべての要素（リンク、画像、ボタンなど）のクリックを測定し、リンクのみは <a> 要素を使うHTMLリンクのクリックを測定します。

実際の動きで違いが出るのは、押された要素として何を拾うかです。

比べるところ	クリック – すべての要素	クリック – リンクのみ
反応する対象	ページ上のあらゆる要素	<a> のリンク
リンクの中のアイコンや文字を押したとき	押したいちばん内側の要素（画像や文字の部分）を拾う	外側のリンク（<a>）として拾う
Click URL（プレビューで見た値）	リンクの中のアイコンや文字を押すと空になる	リンク先のURLが入る
追加の設定	なし	「タグの配信を待つ」「妥当性をチェック」
向くもの	<a> ではない <button> で作られたボタン	電話・LINE・PDF・外部リンク

電話・LINE・PDF・Instagram・地図は、どれもリンク（<a>）でできているので、全部「リンクのみ」で作ります。「すべての要素」を使うのは、JavaScriptで動くボタンのようにリンクになっていないものだけです。この使い分けを間違えるのが、クリック計測でいちばん多い取りこぼしの原因です（後の「ボタンの中のアイコンや文字を押すと数えられない理由」で詳しく書きます）。

「リンクのみ」の「タグの配信を待つ」は、すべてのタグが配信されるか、指定した時間が過ぎるまでページの移動を待たせる設定です。「妥当性をチェック」は、リンクのクリックが妥当な動作とみなされたときだけタグを配信する設定です。どちらも最初はオフのままで作ります。実際に運用していると、オンにしたせいで電話のボタンやLINEのボタンが反応しなくなったように見えることがあり、取りこぼしがプレビューで見えたときだけ試すくらいで足ります。

組み込み変数のクリック系を有効にする

クリックの条件を書くには、押されたボタンの情報を入れる組み込み変数を有効にしておきます。新しいコンテナで最初から有効になっている組み込み変数は数個だけで、クリック系は自分でオンにします。

1. GTMで対象のコンテナを開き、左側のメニューで「変数」を押す
2. 「組み込み変数」の欄にある「設定」を押す
3. 「クリック」の欄で Click Element にチェックを入れる
4. 同じ欄で Click Classes にチェックを入れる
5. 同じ欄で Click ID にチェックを入れる
6. 同じ欄で Click Target にチェックを入れる
7. 同じ欄で Click URL にチェックを入れる
8. 同じ欄で Click Text にチェックを入れる
9. パネルの左上の「×」で閉じ、組み込み変数の一覧に6つが並んでいることを確かめる

それぞれの中身は次のとおりです。

組み込み変数	入るもの	使いどころ
Click Element	押された要素そのもの	CSSセレクタの条件、位置を判定する変数
Click Classes	押された要素の class 属性の文字列	制作会社がボタンにクラスを付けている場合の条件
Click ID	押された要素の id 属性の文字列	ボタンごとにIDがある場合の条件
Click Target	押された要素の target 属性	新しいタブで開くリンクの見分け
Click URL	押された要素に結びついたURL	電話・LINE・PDFの条件の中心
Click Text	押された要素の文字	ボタンの文言をパラメータで送る

押された場所を返す変数を作る

次に、ボタンがヘッダー・フッター・固定バー・本文のどこにあるかを返す変数を作ります。

1. 左側のメニューで「変数」を押す
2. 「ユーザー定義変数」の「新規」を押す
3. 「変数の設定」を押し、変数のタイプで「カスタム JavaScript」を選ぶ
4. 下のコードを貼り付ける
5. 変数の名前を「JS – クリック位置」にする
6. 「保存」を押す

function() {
  var el = {{Click Element}};
  if (!el || !el.closest) {
    return 'unknown';
  }
  if (el.closest('.fixed-cta')) {
    return 'fixed_bar';
  }
  if (el.closest('header')) {
    return 'header';
  }
  if (el.closest('footer')) {
    return 'footer';
  }
  return 'content';
}

.fixed-cta は、サンプル料理教室のテーマで固定バーに付いているクラス名です。自分のサイトでは、Chromeでボタンを右クリックして「検証」を開き、固定バーを囲んでいる要素のクラス名を見て書き換えます。固定バーの判定を先に置いているのは、テーマによっては固定バーがフッターの中に入っていて、順番を逆にすると固定バーのボタンが全部 footer になるからです。

電話番号のボタン（tel:）を数える

まずトリガーを作ります。

1. 左側のメニューで「トリガー」を押し、「新規」を押す
2. 「トリガーの設定」を押し、「クリック – リンクのみ」を選ぶ
3. 「タグの配信を待つ」と「妥当性をチェック」はチェックを外したままにする
4. 「このトリガーの発生場所」で「一部のリンククリック」を選ぶ
5. 条件の1つめの変数で Click URL を選ぶ
6. 演算子で「先頭が一致」を選ぶ
7. 値に tel: と入れる
8. トリガーの名前を「クリック – 電話」にして保存する

続けて、GA4にイベントを送るタグを作ります。

1. 左側のメニューで「タグ」を押し、「新規」を押す
2. 「タグの設定」を押し、「Google アナリティクス」から「Google アナリティクス: GA4 イベント」を選ぶ
3. 測定IDに G-XXXXXXXXXX を入れる（測定IDを定数の変数にしてあればその変数を選ぶ）
4. イベント名に tel_click と入れる
5. 「イベント パラメータ」を開き、1行目のパラメータ名に button_location、値に「JS – クリック位置」の変数を入れる
6. 行を足し、パラメータ名に link_url、値に {{Click URL}} を入れる
7. 行を足し、パラメータ名に link_text、値に {{Click Text}} を入れる
8. 下の「トリガー」を押し、さきほど作った「クリック – 電話」を選ぶ
9. タグの名前を「GA4 – tel_click」にして保存する

パラメータは1つのイベントにつき25個まで送れます。値は100文字までで、それより長いと切られます。Click Text はボタンの中の文字を全部拾うので、ボタンの中に説明文まで入っていると100文字を超えることがあります。その場合は link_text を外して、場所の判定だけで分けます。

LINEの友だち追加ボタンを数える

LINE公式アカウントの管理画面では、「友だち追加ガイド」の「ボタンを作成」から友だち追加ボタンのHTMLをコピーできます。ボタンは画像をリンクで包んだ形なので、「リンクのみ」のトリガーで取れます。

1. 「トリガー」の「新規」を押し、「クリック – リンクのみ」を選ぶ
2. 「このトリガーの発生場所」で「一部のリンククリック」を選ぶ
3. 条件の変数で Click URL を選ぶ
4. 演算子で「正規表現に一致」を選ぶ
5. 値に lin\.ee|line\.me と入れる
6. トリガーの名前を「クリック – LINE」にして保存する
7. 電話と同じ手順でGA4イベントタグを作り、イベント名を line_click にする
8. パラメータは電話と同じ3行を入れる
9. トリガーに「クリック – LINE」を選び、タグの名前を「GA4 – line_click」にして保存する

条件の値は、実際のボタンのリンク先を見てから決めます。友だち追加のURLは管理画面で発行したものによって形が違うことがあるので、次の「プレビューで確かめる」で一度ボタンを押し、Click URL に何が入るかを見て条件を合わせます。

レッスン案内のPDFを数える

サンプル料理教室では、料金とコース内容をまとめた「レッスン案内」をPDFにして、料金ページからダウンロードできるようにしています。PDFは sample-cooking.example/wp-content/uploads/2026/04/lesson-guide.pdf に置いてあります。

ブログ記事にもレシピのPDFがあるので、全部のPDFではなくレッスン案内だけを数えます。

1. 「トリガー」の「新規」を押し、「クリック – リンクのみ」を選ぶ
2. 「このトリガーの発生場所」で「一部のリンククリック」を選ぶ
3. 1つめの条件で、Click URL 「含む」 lesson-guide を入れる
4. 右の「＋」で条件を足し、Click URL 「正規表現に一致」 \.pdf($|\?) を入れる
5. トリガーの名前を「クリック – レッスン案内PDF」にして保存する
6. GA4イベントタグを作り、イベント名を pdf_download にする
7. パラメータは電話と同じ3行を入れる
8. トリガーに「クリック – レッスン案内PDF」を選び、タグの名前を「GA4 – pdf_download」にして保存する

1つのトリガーに条件を2つ並べると、両方に当てはまるときだけ配信されます。

このPDFは、拡張計測機能の file_download としても同時にGA4へ送られます。キーイベントにするのは片方だけにして、二重に数えないようにします。サンプル料理教室ではPDFはキーイベントにしていません。申込の手前の行動として、月に何件あるかを見るだけです。

Instagramと地図のボタンを数える

Instagramと地図は、申込の数ではなく「どれだけ外に出ていくか」を見るためのものです。拡張計測機能の click でも届いていますが、押された場所で分けたいので同じ形で作ります。

1. 「クリック – リンクのみ」のトリガーを作り、Click URL 「含む」 instagram.com を条件にして「クリック – Instagram」と名付ける
2. 「クリック – リンクのみ」のトリガーをもう1つ作り、Click URL 「正規表現に一致」 google\.[a-z.]+/maps|maps\.app\.goo\.gl を条件にして「クリック – 地図」と名付ける
3. GA4イベントタグを作り、イベント名 instagram_click、トリガー「クリック – Instagram」にする
4. GA4イベントタグをもう1つ作り、イベント名 map_click、トリガー「クリック – 地図」にする
5. どちらのタグにも、電話と同じ3行のパラメータを入れる

地図のリンクは、アクセスページに埋め込んだ地図の下の「大きな地図で見る」と、ボタンで貼った共有リンクで形が違います。共有リンクは短縮URLになっていることが多いので、正規表現で両方を拾うようにしています。こちらもプレビューで実際のURLを見てから決めます。

プレビューで確かめて公開する

公開する前に、GTMのプレビューで全部のボタンを1回ずつ押して確かめます。

1. ワークスペースの右上の「プレビュー」を押す
2. Tag Assistant が新しいタブで開くので、https://sample-cooking.example/ を入れて「接続」を押す
3. サイトが開いたら、ヘッダーの電話番号のボタンを押す
4. Tag Assistant のタブに戻り、左の一覧にリンクのクリックのイベント（画面では「Link Click」と出ます）があることを確かめる
5. 「Link Click」を選び、「GA4 – tel_click」が配信されたタグの欄にあることを確かめる
6. 同じ画面の「Variables」で Click URL が tel: で始まっていること、「JS – クリック位置」が header になっていることを確かめる
7. LINE・PDF・Instagram・地図のボタンも、置いてある場所ごとに1回ずつ押して同じように確かめる
8. スマートフォンの幅に縮めて固定バーのボタンを押し、位置が fixed_bar になることを確かめる

全部確かめたら公開します。

1. ワークスペースの右上の「公開」を押す
2. 送信設定で「バージョンの公開と作成」を選ぶ
3. バージョン名に「ボタンのクリック計測（電話・LINE・PDF・Instagram・地図）」と入れる
4. 右上の「公開」を押す

保存だけして公開は後にしたいときは、2で「バージョンの作成のみ」を選びます。

GA4側で数字を見られるようにする

GTMを公開すると、イベントはすぐにGA4に届き始めます。ただ、パラメータの button_location は、そのままではGA4の標準レポートの項目として選べません。カスタムディメンションとして登録します。

1. GA4で「管理」を開き、「データの表示」の「カスタム定義」を押す
2. 「カスタム ディメンション」のタブで「カスタム ディメンションを作成」を押す
3. ディメンション名に「ボタンの位置」と入れる
4. 範囲で「イベント」を選ぶ
5. イベント パラメータに button_location と入れる
6. 「保存」を押す

範囲とイベント パラメータは、保存したあとは変えられません。綴りを確かめてから保存します。レポートで使えるようになるのは、作成してから24〜48時間後です。

最後に、tel_click と line_click をキーイベントにします。イベントがGA4に一度届くと、「管理」→「データの表示」→「イベント」の「最近のイベント」タブに出るので、tel_click と line_click の横のスターを選んでキーイベントにします。キーイベントの付け方は「キーイベントの設定：問い合わせ完了をGA4で数える」に詳しく書いています。

ボタンの中のアイコンや文字を押すと数えられない理由

プレビューでは数えられたのに、本番では電話のボタンの数が妙に少ない。クリック計測でいちばんよく起きるのがこれです。原因はほとんどの場合、ボタンの作り方とトリガーの種類の組み合わせです。

サンプル料理教室の電話のボタンは、HTMLにすると次のような形です。

<a href="tel:03-0000-0000" class="btn-tel">
  <svg class="icon-phone" aria-hidden="true">...</svg>
  <span>電話で問い合わせる</span>
</a>

外側がリンク（<a>）で、中に電話のアイコン（<svg>）と文字（<span>）が入っています。「クリック – すべての要素」のトリガーを置いてプレビューで押す場所を変えてみると、実際の動きは次のようになります。

押した場所	すべての要素で拾う要素	そのときの Click URL
ボタンの余白	<a>	tel:03-0000-0000
電話のアイコン	<svg>	空
「電話で問い合わせる」の文字	<span>	空

この動きのまま、トリガーを「クリック – すべての要素」にして Click URL 「先頭が一致」 tel: を条件にしていると、アイコンや文字を押したクリックは Click URL が空なので条件に当てはまらず、数えられません。スマートフォンでは指がだいたいボタンの真ん中、つまり文字の上に当たるので、取りこぼしのほうが多くなります。

直し方は2つです。

1つめは、トリガーを「クリック – リンクのみ」に変えることです。プレビューで確かめると、リンクのみのトリガーは中のアイコンや文字を押しても外側のリンクとして拾うので、Click URL にリンク先が入ります。この記事の手順で全部をリンクのみにしているのはこのためです。

2つめは、すべての要素のまま、条件を Click Element の「CSS セレクタに一致」（演算子の名前はヘルプで確かめられなかったので、選択肢に無ければ画面で近い名前を探してください）に変えることです。値には次のように書きます。

a[href^="tel:"], a[href^="tel:"] *

前半は「tel: で始まるリンクそのもの」、後半は「その中にあるすべての要素」という意味です。これでアイコンや文字を押しても当てはまります。リンクではない <button> で作られたボタンは、リンクのみでは取れないので、こちらの書き方で .btn-line, .btn-line * のようにクラス名で指定します。

もう1つ、画像だけでできたボタン（LINEの友だち追加ボタンなど）は、Click Text が空になります。画像の代替テキストは Click Text には入りません。文言で分けたいときは Click Text ではなく、位置の変数か、リンク先のURLで分けます。

応用

制作会社にIDを付けてもらう

テーマを直す機会があるなら、計測したいボタンに id="tel-header" id="tel-fixed" のようなIDを付けてもらうと、Click ID で場所が分かるので位置を判定する変数が要らなくなります。

できないことと、その代わり

クリックの計測で分かるのは「ボタンが押された」ところまでです。その先は別の仕組みで見ます。

できないこと	理由	代わりの手
電話がつながったか、何分話したか	GTMが見ているのは電話のリンクを押したところまで	Google広告の「ウェブサイトに掲載された電話番号への問い合わせのトラッキング」でGoogle専用の転送電話番号を使うと、広告から来た人の通話を数えられる。広告以外から来た人は数えられない
LINEの友だち追加が完了したか	追加はLINEのアプリの中で起きる	LINE公式アカウントの「友だち追加ガイド」で経路を設定したURL・ボタンを使い、「分析」→「友だち」→「追加経路」で見る。期間内の合計や日ごとの追加・ブロックが20回未満だと数値は表示されず、経路は「その他」にまとめられる
埋め込みの地図（iframe）の中のクリック	別のサイトの中身なのでGTMから見えない	地図の下にサイト側のリンクを置き、そちらを数える
外部の予約システムの中での予約	別ドメインに移ったあとはこのGTMの外	クロスドメイン計測を設定するか、予約システム側の数字と突き合わせる
公開前のクリックをあとから数える	GA4は届いたデータしか持たない	公開した日をメモしておき、比べるのはその日以降にする

LINEの追加経路の20回の縛りは、小さな教室ではほとんどの経路が「その他」に入る程度の数字です。なので、どのボタンから追加されたかはGA4の line_click の位置で見て、追加された総数はLINEの管理画面の友だち数で見る、と分けて使うのが現実的です。

よく詰まるところ

症状	原因	直し方
条件の変数の選択肢に Click URL が出てこない	クリックの組み込み変数が有効になっていない	「変数」→「組み込み変数」の「設定」でクリックの6項目にチェックを入れる
ボタンを押してもプレビューの一覧に「Link Click」が出ない	クリックのトリガーが1つもない、またはボタンがリンクではない	リンクのみのトリガーを作ってから押し直す。それでも出ないなら <button> なので「すべての要素」とCSSセレクタで作る
アイコンや文字を押したときだけ数えない	すべての要素のトリガーで Click URL を条件にしている	リンクのみに変えるか、Click Element の「CSS セレクタに一致」で中の要素も含める
1回押しただけで2回数える	同じボタンに「すべての要素」と「リンクのみ」の両方のトリガーが付いている。またはGTMがテーマとプラグインで二重に入っている	タグに付いているトリガーを1つにする。ページのソースで GTM-XXXXXXX が2回出ていないか見る
プレビューでは動くのに本番で数字が出ない	GTMを公開していない	ワークスペース右上の「公開」から公開する。公開済みのバージョンに目的のタグが入っているかを「バージョン」で確かめる
GA4に tel_click と Tel_Click が別々に出る	タグによってイベント名の大文字小文字が違う	全部小文字にそろえる。GA4は大文字小文字を区別して別のイベントとして数える
GA4のレポートでボタンの位置が選べない	button_location をカスタムディメンションに登録していない、または登録から48時間たっていない	「カスタム定義」で範囲を「イベント」にして登録し、1〜2日待つ
位置が全部 content になる	位置を判定する変数のクラス名がテーマと合っていない	ボタンを右クリックして「検証」で囲んでいる要素のクラス名を見て、変数のコードを直す
電話の数がGoogle広告の電話のコンバージョンより多い	パソコンでの押下や、通話にならなかったタップも数えている	申込として見るのはモバイルの分だけと決め、探索レポートでデバイス カテゴリを並べて分ける。通話そのものはGoogle広告の転送電話番号の数字で見る
LINEの line_click とLINE管理画面の追加数が合わない	押しただけで追加しなかった人、すでに友だちの人も数えている	クリックと追加完了は別の数字として扱う。合わせようとしない

次にやること

ボタンのクリックが数えられたら、残る入口は体験申込のフォームです。フォームの送信は「GTMでフォーム送信を計測する：サンクスページ型と送信イベント型」に書いています。

この記事で送った button_location を、GA4のレポートで「どのボタンが押されたか」として見る方法は「イベントパラメータとカスタムディメンション：どのボタンが押されたかを分ける」にまとめています。

組み込み変数だけでは足りなくなったとき、たとえば制作会社にデータレイヤーで値を送ってもらうときの考え方は「GTMのトリガーと変数：組み込み変数とデータレイヤーの使い分け」にあります。

公開する前の確かめ方を一通り覚えたいときは「公開前の確認：GTMのプレビューとGA4のDebugView」を読んでください。