GTMでGA4イベント計測を設定する手順|クリック計測まで

GTMでGA4イベント計測を設定する手順|クリック計測まで

この記事の要点

  • 計測は「測る対象を5〜10個に絞る」ことから始めるのが成功の分かれ目
  • クリック計測はGTMのトリガーとGA4イベントタグの2点セットで作る
  • 公開前のDebugView検証を省くと、数か月分のデータが無駄になる

「GTMでGA4のイベント計測を設定したいけれど、どのボタンをどう触れば計測できるのか分からない」という状態で止まっていませんか。GTM(Google Tag Manager)とGA4(Google Analytics 4)は、正しい順番でつなげば、コードを書かなくてもボタンのクリックを計測できます。

この記事では、クリック計測を例に、GTMでGA4のイベントを設定する手順を最初から最後まで解説します。命名ルール、検証のやり方、公開後の確認まで、読めば自分の手で設定を完了できる状態を目指します。

Contents / 目次
  1. 結論。イベント計測は「絞って・つないで・検証する」の3段構え
  2. GTMでクリック計測を設定する手順
  3. 正しく設定すると、何が見えるようになるのか
  4. よくある失敗と、その防ぎ方
  5. 現場で見えた、計測運用の落とし穴と妥協点
  6. よくある質問
  7. 設定でつまずいたら、無理せず相談してください

結論。イベント計測は「絞って・つないで・検証する」の3段構え

GTMでGA4イベント計測を設定する手順|クリック計測まで

GTMでGA4のイベント計測を成功させるコツは、たった3つに集約されます。「測る対象を絞る」「GTMのトリガーとGA4タグをつなぐ」「公開前に検証する」の順で進めることです。この3段構えを守れば、大きな失敗はまず起きません。

まず前提を整理します。GTMは、GA4やその他の計測タグを「まとめて管理する箱」のようなものです。かんたんに言うと、サイトのHTMLを毎回いじらなくても、GTMの管理画面だけでタグの追加・修正ができる仕組みです。

一方のGA4は、集まったデータを分析する側です。GTMが「データを集める担当」、GA4が「集めたデータを見る担当」と考えると分かりやすいです。

そのうえで、多くの人がつまずくのは「何を計測するか」を決めずに手を動かし始めることです。すべてのクリックを測ろうとすると、データがノイズだらけになって、肝心の数字が埋もれます。だから最初にやるべきは、設定作業ではなく「絞り込み」です。

最初に決めること。自社にとって成果に直結するクリックを5〜10個だけ選びます。たとえば「お問い合わせボタン」「電話番号タップ」「資料ダウンロード」「料金ページへの遷移」など、ビジネスの目標につながるものだけに絞ります。

下の表は、GTMとGA4がそれぞれ何を担当しているのかを整理したものです。役割を取り違えると設定で迷子になるので、ここで押さえておきましょう。

項目GTM(タグマネージャー)GA4(アナリティクス)
主な役割計測タグの設置・管理データの蓄積・分析
触る場面クリックやフォーム送信を「拾う」設定拾ったデータを「見る・重要指標に指定する」
コード編集基本は不要(管理画面で完結)不要
この記事での使い方クリックを検知してGA4へ送る送られたイベントを確認・キーイベント化

なお、GA4では、かつて「コンバージョン」と呼ばれていた指標が「キーイベント」という名称になっています。 古い解説記事では「コンバージョン設定」と書かれていることがありますが、現在の画面表示と違う場合があるため、正確な名称はGA4の公式ヘルプで確認してください。

GTMでクリック計測を設定する手順

GTMでGA4イベント計測を設定する手順|クリック計測まで

ここからが本題です。クリック計測を、実際に手を動かせるレベルで順番に解説します。全体の流れは「計測したい要素を決める→GTMで検知する→GA4へ送る→検証する→公開する」の5ステップです。

ステップ1。計測したいボタンと「目印」を決める

最初にやるのは、計測したいボタンやリンクを決めて、その「目印」を確認することです。GTMは、クリックされた要素の何か(テキスト、URL、IDなど)を手がかりにして「これが押された」と判断します。だから、手がかりになる安定した目印があるかどうかが最初の分かれ道です。

もっとも確実なのは、ボタンに専用の目印を付けておく方法です。制作会社や社内のエンジニアに依頼できるなら、対象のボタンに次のような data- 属性を足してもらいましょう。これがあると、サイトのデザインを変えても計測が壊れにくくなります。

<!-- 計測したいボタンに data 属性で目印を付ける例 -->
<a href="/contact/" data-ga-event="cta_click" data-cta-position="header">
  お問い合わせはこちら
</a>

目印を足せない場合でも計測は可能です。その場合は、ボタンのリンク先URL(例 /contact/)やボタンの文言(例「お問い合わせはこちら」)を手がかりにします。ただし、文言やURLは後から変わりやすいので、変わった瞬間に計測が止まるリスクがある点は覚えておいてください。

ステップ2。GTMでクリック変数を有効にする

次に、GTMがクリックの情報を「拾える状態」にします。GTMには、クリックに関する組み込み変数が用意されていますが、初期状態ではオフになっているものがあります。これを有効化しないと、後の手順で目印を指定できません。

GTMの変数設定から、クリック関連の組み込み変数(Click Classes、Click Element、Click ID、Click Text、Click URL など)をまとめてオンにします。 メニュー名やボタンの位置はGTMの更新で変わることがあるため、正確な操作はGoogle Tag Managerの公式ヘルプで確認してください。ここで大事なのは「クリックの手がかりを使える状態にする」という目的です。

ステップ3。トリガー(発火条件)を作る

クリック変数を有効にしたら、次は「どんなときにデータを送るか」という条件を作ります。これをGTMでは「トリガー」と呼びます。ひとことで言うと、トリガーは「このボタンが押されたら反応する」というスイッチです。

コツは、いきなり細かく絞り込まないことです。まずは「すべてのクリック」や「すべてのリンククリック」で広く反応するトリガーを作り、そこから条件を足して対象を絞っていくと、設定ミスに気づきやすくなります。具体的には、次のように条件を指定します。

  • URLで絞る:目印がないなら「Click URL が /contact/ を含む」と指定する

注意点として、フォーム送信のような「ページ遷移を伴うクリック」は、計測データが送られる前にページが切り替わって計測が漏れることがあります。この場合はGTMのタグ設定側で送信のタイミングを調整する必要があるため、遷移系のボタンは特に検証を丁寧に行いましょう。

ステップ4。GA4イベントタグを作ってGA4へ送る

スイッチ(トリガー)ができたら、押されたときに「GA4へ何を送るか」を決めます。これがGA4イベントタグです。ここで、イベント名とパラメータを決めます。

イベント名は、後から自分が見て分かる名前にします。すべて小文字で単語をアンダースコアでつなぐ「スネークケース」で統一すると、表記のブレを防げます。命名の推奨ルールはGA4の公式ヘルプで確認してください。たとえば次のように統一します。

  • cta_click:お問い合わせや資料請求など、主要ボタンのクリック
  • tel_click:電話番号のタップ
  • file_download:資料PDFのダウンロード

さらに「どのボタンか」を後で見分けるために、パラメータを添えます。パラメータは、イベントに付ける補足情報です。たとえば cta_position(設置場所)に「header」「hero」「footer」といった値を入れておくと、同じ cta_click でも、ページのどこにあるボタンが押されたのかを後から分析できます。ステップ1で付けた目印の値を、そのままパラメータに流し込む形です。

目印を使わず、コードで直接GA4へ送りたい場合は、次のような書き方もできます。これはボタンに直接書く例です。ただしこの場合、ステップ3で作るトリガーは、これまで説明した「全クリック」やClick URL・Click Elementの条件ではなく、GTMの「カスタムイベント」トリガー(イベント名に cta_click を指定)を別途作る必要があります。下のコードで push する event の値と、このトリガーのイベント名を一致させることで、GTMが受け取ってGA4へ渡せます。

<!-- dataLayer に直接イベントを送る例(GTM設置済みが前提) -->
<button onclick="window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'cta_click',        // GTMのトリガーで受け取るイベント名
    'cta_position': 'hero',      // [自社のボタン位置に変更]
    'cta_text': '無料相談する'    // [ボタンの文言に変更]
  });">
  無料相談する
</button>

ステップ5。プレビューとDebugViewで検証する

設定できたら、必ず公開前にテストします。ここを飛ばすと、間違った設定のまま数か月データを集めてしまい、後から取り返しがつきません。検証は2つの画面を併用します。GTMの「プレビューモード」で自分の操作がタグを発火させているかを見て、同時にGA4の「DebugView」でイベントが実際にGA4へ届いているかを確認します。

チェックする観点は次の通りです。これを1つずつ確認してから公開に進んでください。

  • 発火するか:対象ボタンを押したときだけイベントが送られるか
  • 誤発火しないか:関係ないボタンで発火していないか
  • パラメータの中身:cta_position などの値が正しく入っているか
  • 重複しないか:1回のクリックで2回送られていないか

問題がなければ、GTMのコンテナを「公開」します。公開して初めて、設定が本番サイトに反映されます。プレビューで動いていても、公開を忘れると計測は始まらないので注意してください。

正しく設定すると、何が見えるようになるのか

GTMでGA4イベント計測を設定する手順|クリック計測まで

イベント計測を正しく設定すると、「サイトに来た人が、実際にどこで行動したか」が数字で見えるようになります。今まで「アクセスは増えているのに問い合わせが伸びない」とモヤモヤしていた部分に、具体的な理由の手がかりが得られます。

たとえば、お問い合わせボタンのクリックを計測すると、「ボタンは押されているのに送信されていない」のか、「そもそもボタンが押されていない」のかを切り分けられます。前者ならフォームに問題があり、後者ならボタンの位置や見せ方に問題がある、という具合に、次の改善アクションが変わります。フォーム側の見直しについては問い合わせフォームを5項目に減らすBtoBの設計でも具体的に解説しています。

開発者に頼らずGTMで計測を運用できる体制を作れば、施策のたびに外注する必要がなくなり、改善のスピードが上がります。GA4をGoogle Search Consoleと連携させれば、どんな検索キーワードで来たか、どのページに着地したかをGA4の連携レポートで確認できるようになります。連携の入口はSearch Consoleの登録手順で整理しています。

成果が出る会社の共通点。計測を「たくさん測る」ことではなく「意思決定に使う数字だけ測る」ことに徹しています。5〜10個の重要指標に絞り、月に一度は数字を見て次の一手を決める。この地味な運用が、サイトを少しずつ強くしていきます。

なお、クリック計測はページの表示速度を測る話とは別物ですが、改善のためにサイトを触ると速度に影響が出ることもあります。表示まわりが気になる方は表示速度は自分で測って直せるもあわせて確認しておくと安心です。

よくある失敗と、その防ぎ方

GTMでGA4イベント計測を設定する手順|クリック計測まで

ここでは、現場で本当によく見かける失敗を挙げます。どれも「やってしまいがち」で、しかも気づきにくいものばかりです。先に知っておけば、同じ穴に落ちずに済みます。

失敗1。とにかく全部を計測しようとする

「せっかくだから全部のボタンを測ろう」と欲張ると、レポートがイベントで埋め尽くされ、どれが重要なのか分からなくなります。この状態になると、数字を見ても判断できず、結局レポートを開かなくなります。防ぐには、最初に決めた5〜10個の重要イベントだけに絞ること。四半期に一度、使っていないイベントを見直して削るのも効果的です。

失敗2。パラメータをGA4側で登録し忘れる

GTMで cta_position のようなパラメータを送っているのに、GA4のレポートで見ようとすると「(not set)」と表示されて中身が見えない、という失敗が非常に多いです。これは、GA4側でそのパラメータを「カスタムディメンション」として登録していないために起こります。登録の仕様や、いつからのデータが分析対象になるかはGA4の公式ヘルプで確認してください。パラメータを設計したら、GTMの設定とセットで、必ずGA4側でも登録しておきましょう。

失敗3。計測が二重になっている

GA4のタグをサイトに直接も入れていて、さらにGTM経由でも入れている、というように計測経路が二つあると、1回のアクセスが2回カウントされます。数字が実際より多く見え、判断を誤ります。見分け方は、コンバージョン率が異常に高い、ファネルのステップが100%を超えるなど、数字が不自然に膨らんでいないかを見ることです。計測経路はGTMに一本化するのが基本です。

失敗4。サイト改修後の再チェックを怠る

サイトをリニューアルしたり、ボタンの文言やURLを変えたりすると、それまで使っていた目印が消えて計測が静かに止まります。エラーは出ないので、気づいたときには数か月分のデータが欠けている、というのがよくあるパターンです。サイトを更新したら、必ずDebugViewで主要イベントが今も発火しているかを確認する。この一手間を習慣にしてください。

現場で見えた、計測運用の落とし穴と妥協点

ここは教科書には載らない、実際に運用して初めて分かる部分をお伝えします。計測は「設定して終わり」ではなく、「使い続けて価値が出る」ものだからです。

まず率直に言うと、GTMの設定そのものより、「何を測るかを決める設計」の方がずっと難しいです。ボタンを検知する設定は手順どおりにやれば動きます。

しかし「自社の成果は何で測るべきか」「どのクリックがビジネスにつながるか」は、事業を理解していないと決められません。

設定代行だけを頼んでも、この設計が抜けていると、精緻に測っているのに使えないデータの山ができあがります。

次に、内製と外注の切り分けです。目印付けや初期設計は専門知識が要る一方、いったん仕組みができれば、日々のイベント追加や数字の確認は社内でも回せます。おすすめは、最初の設計と検証はプロに伴走してもらい、運用は自社に引き継ぐ形です。全部を丸投げにすると、社内に知見が残らず、サイトを変えるたびに外注費がかかり続けます。

コスト面の見落としも一つあります。計測は「導入費」だけでなく「維持の手間」がかかります。サイトを変えるたびに計測が壊れていないか確認し、数字を見て改善する時間です。

ここを見込まずに始めると、設定はしたのに誰も見ていない、という状態になりがちです。逆に言えば、月に数十分でも数字を見る習慣がある会社は、着実に成果につなげています。

向き不向きも正直にお伝えします。アクセスが極端に少ないサイトでは、クリック数が少なすぎて判断材料になりません。その段階では、計測を細かく作り込むより、まず集客とページ改善に力を注ぐ方が近道です。計測は「ある程度人が来てから効いてくる」もの、という順番を間違えないことが大切です。

よくある質問

GTMを使わずGA4だけでもクリック計測はできますか

設定にコードの知識は必要ですか

基本的な設定はGTMの管理画面だけで完結し、コードを書かずに進められます。ただし、ボタンに安定した目印を付けたい場合は、HTMLを少し触るエンジニアへの依頼が必要になることがあります。

設定した数字はいつからレポートに出ますか

DebugViewやリアルタイムレポートでは即時に確認できます。 ただし通常のレポートに反映されるまでには時間差があるため、公開直後は焦らず、まずDebugViewで発火を確認するのが確実です。

イベント名は日本語でも大丈夫ですか

日本語は避け、小文字の英語とアンダースコアでつなぐ形(例 cta_click)に統一するのがおすすめです。後から分析するときに扱いやすく、表記のブレによる集計ミスも防げます。

設定でつまずいたら、無理せず相談してください

ここまで読んで、「手順は分かったけれど、自社にとって何を測るべきかの判断が難しい」と感じた方も多いはずです。計測の一番の肝は、まさにその設計部分です。コレットラボのAI業務システム化支援では、計測設計から検証、運用の内製化まで、現場に合わせて一緒に整理します。まずは現状を聞かせてもらうだけでも大丈夫です。AI業務システム化の詳細はこちらから、お気軽にご相談ください。

30分の無料相談

現状をお聞きし、優先順位を一緒に整理します。

予約する →

Read Next / 次に読む

httpをhttpsへ301リダイレクトする.htaccessの書き方
ホームページ制作・運用

httpをhttpsへ301リダイレクトする.htaccessの書き方

2026.07.14 / 約 16 分

関連記事

ホームページ制作・運用

httpをhttpsへ301リダイレクトする.htaccessの書き方

2026.07.14
ホームページ制作・運用

Search Consoleの登録手順|所有権確認とサイトマップ送信

2026.07.07
ホームページ制作・運用

WordPressでメールが届かない。WP Mail SMTPのGmail設定手順

2026.07.07
ホームページ制作・運用

パンくずリストの設置手順と表示崩れの直し方

2026.07.07
ホームページ制作・運用

表示速度は自分で測って直せる|Core Web Vitals改善の3手

2026.07.02
ホームページ制作・運用

AIで作ったサイトがGoogleに評価される|E-E-A-Tに足す3要素

2026.06.30