URLが変化しないフォームで、コンバージョンを計測する方法

以下のように、入力画面、確認画面、完了画面いずれもURLが変化しない場合、

入力画面：https://swirl.co.jp/contact/
　  ⇓
確認画面：https://swirl.co.jp/contact/
　  ⇓
完了画面：https://swirl.co.jp/contact/

コンバージョンの計測ができずに困るというお声をよくお伺いします。
今回は、URLが変化しないフォームでも、コンバージョンがきちんと計測できるようにする方法をご紹介します。

その方法とは「仮想URL」

仮想URLとは、本来は存在しない架空のページを、存在しているかのようにGoogleアナリティクスにデータを送る方法です。

Googleアナリティクスは、コードが読み込まれた時のURLを記録する仕組みなので、同一URLだとコンバージョンが計測できないのですが、各ステップごとで記録させるURLを指定することで、別々でぺージビューを計測することができるようになります。

仮想URLの設定方法

まずは、仮想URLを決めましょう。
分かりやすいものであればなんでも大丈夫です。

入力画面：https://swirl.co.jp/contact/input
　  ⇓
確認画面：https://swirl.co.jp/contact/confirm
　  ⇓
完了画面：https://swirl.co.jp/contact/thanks

設定方法は以下の2つ。

Googleアナリティクスに追記
Googleタグマネージャーで設定

Googleアナリティクスに追記する場合

Googleアナリティクスに以下のコードを追記します。

gtag('config', 'UA-×××××××-×', {
	'page_path': '[URL]',
	'page_title': '[ページタイトル]'
});

[URL]…先の手順で決めたURLパスを入力
[ページタイトル]…各ステップごとにアナリティクス上で表示させたいタイトルを入力（入力画面　など）

以下サンプルコード

▼入力画面

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-×××××××-×"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-×××××××-×', {
	  'page_path': '/contact/input',
	  'page_title': '入力画面'
  });
</script>

▼確認画面

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-×××××××-×"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-×××××××-×', {
	  'page_path': '/contact/confirm',
	  'page_title': '確認画面'
  });
</script>

▼完了画面

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-×××××××-×"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-×××××××-×', {
	  'page_path': '/contact/thanks',
	  'page_title': '完了画面'
  });
</script>

設定が完了したら、Googleアナリティクスの「リアルタイム」で確認しながら、テストでお問い合わせをして、きちんと計測されているか必ず確認しておきましょう！