【GTM】URLが変わらないフォームでCV計測する方法

  • 更新日
  • 閲覧数 260,145 Views

岡村靖彦

SHARE

  • X
  • B!

広告運用やサイト運用をする際、計測したCVポイントはあるのに、フォーム送信後のURLが変わらないことでページビューによるCV計測ができないことがありませんか?

この記事では、「フォーム入力後もページURLが変わらない場合にCVを計測する方法」について画像付きで解説します。

一般的なCV計測とURLが変わらないCV計測の違い

通常のフォームでは、ユーザーが入力内容を送信すると、URLの異なるサンクスページ(例:/contact/thanks/)へ遷移します。

このとき、サンクスページのURLをトリガー条件に指定すれば、フォーム送信完了=CVとして正確にカウントできます。

一方、URLが変わらないフォームでは、入力画面・確認画面・完了画面がすべて同一のURLで表示されます。

この場合、サンクスページのURLをトリガーに指定すると、ページに訪問しただけのユーザーにもCVタグが発火してしまい、正しい計測ができません。※サンクスページと訪問時のURLが同じのため。

このタイプのフォームは、MAツール(マーケティングオートメーション)で生成されたフォームや、WordPressの一部プラグイン、外部のフォーム作成サービスなどでよく見られます。

サイト制作会社に依頼して構築した場合にも、ページ遷移を伴わない設計になっていることがあります。

サイト側でURLが変わる構造に改修できれば理想的ですが、ツールの仕様やコスト面の制約から、すぐには対応できないケースも多いでしょう。

そこで有効なのが、GTMを使ってURL以外の条件でCVを検知する方法です。

【方法1】送信ボタンのクリックで計測する

フォームの「送信ボタン」がクリックされたときにCVタグを発火させる方法です。

簡易的に設定ができますがいくか注意が必要な点もあります。

手順1:フォームの完了画面を表示する

フォームが表示されているページを開き、実際に入力して「確認画面へ進む」や「確認する」を押し、送信直前の状態(最後に押すボタンが表示されている状態)にします。

ここで確認したいのは「最後に押す送信ボタン」です。

手順2:デベロッパーツールで送信ボタンを選択する

デベロッパーツール(右クリック→「検証」またはF12キー)を開き、右上の矢印ボタン→送信ボタンを選択します。

手順3:class名をコピーする

ハイライトされた行の中で「class=”○○○”」という部分を探します。

「class=”」の後に書かれているテキストが「class名」です。

その部分を右クリック→「コピー」→「Copy selector」または手打ちでメモしておきます。

もし、class名が複数ある場合「class=”btn btn-submit btn-lg”」 のように、スペース区切りで複数ある場合は、最もユニーク(他のボタンと被らない)そうなものを使います。

どれを使うか迷う場合は、GTM設定後にプレビューで試して確認するのが一番確実です。

手順4:クリックトリガーを作成する

「トリガーの設定」のクリックカテゴリの中から「すべての要素」を選択します。

「このトリガーの発生場所」で「一部のクリック」を選択し、以下のように条件を2つ追加します。

条件 詳細
条件①(ボタン指定) Click Classes/含む/先ほど調べたclass名(例:btn-submit)
条件②(ページ指定) Page URL/含む/フォームがあるページのURL(例:/contact/)

保存を押し、発火させたいタグに紐づけ、プレビューから発火確認後公開をすれば設定は完了です。

設定における注意点

以下の場合、今回の設定方法で正確に計測できない可能性があるため注意しましょう。

ケース 詳細
「確認画面へ進む」ボタンと「送信する」ボタンのclass名が同じ場合 確認ボタンを押した時点でもCVタグが発火してしまう。
フォームに入力チェックがある場合 入力に不備があっても送信ボタンを押した時点で発火してしまう。そのため、実際の送信完了数とのズレが生じる
ボタンのclass名がサイトリニューアル等で変更された場合 GTMの設定も更新が必要になる

【方法2】CV後のメッセージを活用しCV計測する手順

GTMには「フォームが送信されたことを検知する」トリガーが最初から用意されています。

難しい操作は不要で、GTMの管理画面だけで設定できます。

手順1:GTM管理画面でトリガーを新規作成する

画面左のトリガーをクリックし新規のトリガーを作成します。

手順2:フォームの送信のトリガーを設定する

トリガーのタイプを選択すると、「ユーザーエンゲージメント」の欄にフォームの送信があるので選択します。

「このトリガーの発生場所」で「一部のフォーム」を選択します。

すると条件の設定欄が現れるので、以下のように入力します。

設定項目 入力内容
左のプルダウン Page URL(または Page Path)
中央のプルダウン 含む
右の入力欄 フォームがあるページのURL(例:/contact/)

保存を押し、発火させたいタグに紐づけ、プレビューから発火確認後公開をすれば設定は完了です。

設定における注意点

以下の場合、今回の設定方法で正確に計測できない可能性があるため注意しましょう。

ケース 詳細
確認画面があるフォームの場合 「確認画面へ進む」ボタンを押した時点でフォーム送信として検知されてしまい、確認画面で離脱した人もCVとしてカウントされてしまう
iframeで埋め込まれたフォームの場合 Googleフォームなど外部サービスのフォームはiframeで表示されているため、GTMからは検知できない

【方法3】CV後のメッセージを活用しCV計測する

フォーム送信が完了すると、「お問い合わせありがとうございます」などのサンクスメッセージが画面上に表示されるケースがあります。

このメッセージが表示されるHTML要素をGTMで検知し、CVタグを発火させるのがこの方法です。

手順1:サンクスメッセージのCSSセレクタを特定する

まず、フォームを実際に送信して完了画面を表示させます。

デベロッパーツール(右クリック→「検証」またはF12キー)を開き、右上の矢印ボタン→サンクスメッセージ部分にカーソルを合わせます。

カーソルを合わせると右側に該当の文字列に色がつきます。

ここで右クリック→Copy→Copy selectorを選択し、セレクタを保存しておきます。※セレクタ(selector)は、主にCSSやJavaScriptで使われる概念で、HTML文書の中から特定の要素を「選択」するための記法です。

手順2:GTMで変数を作成する

GTMの管理画面を開き、左メニューの「変数」から「ユーザー定義変数」の「新規」をクリックします。

変数タイプは「DOM要素」を選択してください。

選択方法を「CSSセレクタ」に切り替え、要素セレクタの欄に先程コピーしたセレクタを入力します。

変数にわかりやすい名前(例:「無料相談CVメッセージ」)を付けて保存しましょう。

手順3:DOM Readyトリガーを作成する

「トリガー」の新規作成画面を開きます。

トリガータイプは「ページビュー」カテゴリ内の「DOM Ready」を選択してください。

DOM Readyは、ページのHTMLが完全に読み込まれてDOM構造が確定したタイミングで発火します。

通常のページビュートリガーよりも後に発火するため、ページの構造が確定した状態でトリガーの条件を評価できます

トリガーの発火条件を「一部のDOM Readyイベント」に設定し、以下の2つの条件を追加します。

条件 詳細
手順2で作成した変数(例:「無料相談CVメッセージ」)が「無料相談のお申込みありがとうございました!」を含む
PageURLが対象フォームのあるページのURLを含む(例:/contact/ を含む)

条件1でサンクスメッセージが実際に表示されていることを確認し、条件2で対象フォームがあるページだけに限定します。

この2つの条件を組み合わせることで、誤発火のリスクを低減できます。

手順4:タグを作成してトリガーと紐づける

「タグ」の新規作成画面で、計測したいツール(GA4イベントタグやGoogle広告コンバージョンタグなど)を選択し、手順3で作成したトリガーを紐づけます。

設定が完了したら、GTMのプレビューモードで実際にフォームを送信し、タグが正しく発火するか確認してください。

問題がなければ「公開」ボタンで本番環境に反映します。

DOM Readyを使う場合の注意点

DOM Readyトリガーはページ読み込み時に1回だけ評価されるため、ページ遷移を伴わずにJavaScriptでサンクスメッセージが後から描画されるタイプのフォームでは、DOM Ready時点ではまだ要素が存在しない可能性があります。

その場合は、DOM Readyの代わりに「要素の表示」トリガー(選択方法:CSSセレクタ)を使い、同じセレクタを指定する方法に切り替えてください。

要素の表示トリガーであれば、DOM構築後に動的に追加された要素も検知できます。

まずはDOM Readyで試してみて、プレビューで発火しない場合に要素の表示トリガーへ切り替える、という順序で進めるのがスムーズです。

まとめ

URLが変わらないフォームでも、GTMを活用すればCV計測ができる場合があります。

設定後は必ずプレビューモードで動作確認を行い公開するようにしましょう。

Webマーケティングの成功確率を高めるには…

2000社を超える企業様のご支援の中で得られた知見を基に、
経験豊富なコンサルタントが貴社の戦略設計からWeb広告の改善案をご提案いたします。

  • 2026年の最新情報、類似業種で獲得好調な媒体とは?
  • 既存の広告を分析すると、伸びしろはどれぐらい?
  • LPやCRM部分まで総合的に分析、売上UPをするには?
  • よりコストを削減するインハウス体制に移行するためには?

無料相談では上記のポイントをお伝えします。
Webマーケティングの成功確率を高めたい方は、デジタルアスリートにご相談ください

 

Writer

岡村靖彦 記事一覧

デジタルアスリート株式会社
マーケセールス部 課長

新卒でWebコンサルタントとして入社し、Google広告、Yahoo!広告、Meta広告をはじめ様々な媒体の運用を経験。

現在はデジタルアスリートの自社マーケに携わっており、SEOやYouTube、Instagram運用と様々なジャンルを担当している。

合わせて読まれている記事