ニュース

Tips: Google Analyticsで、URLが変わらないフォームのコンバージョンを計測

Google Analyticsでは、入力フォームの入力⇒確認⇒完了までのURLが変化しない場合、コンバージョンや離脱が計測できない……とお悩みではありませんか? ここでは、ちょっとした工夫で、同一URLで遷移するフォームでコンバージョンの計測を可能にする方法をご説明します。

同一URLで遷移するフォームと、アクセス解析の相性問題

アクセス解析で、フォームの入力完了画面のような目的地への到達(コンバージョン)を計測するには、途中経路や目的地のページがそれぞれ独自のURLを持っている必要があります。
ところが、同じURL(index.phpなど単一のプログラムファイル)で入力・確認・完了の処理・画面出力を行うタイプのフォームは、内部に入れたGoogle Analyticsのトラッキングコードが動作しても、それぞれのアクセスが同じURLで記録されるため、アクセス数を見ても、完了画面に到達したのか、途中で離脱してしまったのかが判別できません。

各ステップを別々のプログラムで処理する場合各ステップを同一のプログラムで処理する場合
入力http://○○.com/inquiry/index.phphttp://○○.com/inquiry/index.php
確認http://○○.com/inquiry/confirm.phphttp://○○.com/inquiry/index.php
完了http://○○.com/inquiry/complete.phphttp://○○.com/inquiry/index.php
URLで進度が見分けられる
(index、confirm、completeそれぞれのアクセス数でCVや離脱が計測できる)
URLで進度が見分けられない
(ページビューがすべてindex.phpとして記録され、どの段階にいくら来ているか判別できない)

これは、Google Analyticsが管理画面上やヘルプで提供する標準のトラッキングコードが、「コードが読み込まれたときのURLを記録する」という仕組みになっているためです。
各ステップごとにファイルを別々にすれば問題は解決……という考えもありますが、外部サービスのフォームを使っている場合や、フォームが動いているプログラミング言語に不慣れな場合は、フォームのシステムを自由に変更できません。また、特に1項目ごとに入力を多段階に分けるタイプのフォームは、ファイル数が極端に増え管理が煩雑という問題があります。
そこで、ここでは、フォームのプログラムファイル(PHP等)はそのままに、Google Analytics記録用のURLだけを別々にする方法をご紹介します。

仮想ページビューでGoogle Analytics記録用のURLだけを切り替える

Google Analyticsの"仮想ページビュー"という機能を使い、入力画面・確認画面・完了画面の各HTMLを個別に読み込む際に、記録させるURLを明示的に指定させることで、各画面のページビューを別々のURLで指定することが可能になります。このとき指定するURLは、ファイルとしての実体がない架空のURLでも構いません。

たとえば当社サイトの問い合わせフォーム https://www.maxmouse.co.jp/contact/service/新しいウィンドウで開きます の場合、以下のように仮想ページビューのURLを設定することで、Google Analyticsでの追跡が可能になります。

実際のパスGAに記録させる仮想PVのパス(例)
入力/contact/service/index.php/contact/service/index.html
確認/contact/service/index.php/contact/service/confirm.html
完了/contact/service/index.php/contact/service/complete.html

Google Analytics [リアルタイム]-[コンテンツ]
指定した仮想PV用URL(ここにファイルの実体は存在しない)でGoogle Analyticsのリアルタイムアクセス解析にヒット)

Google Analytics [コンバージョン]-[目標]-[目標到達プロセス]
[コンバージョン]-[目標]-[目標到達プロセス]でCV/離脱率も計測できる(別途管理画面で目標URLの設定が必要)

実装例

実装の仕方はGoogle Analyticsのバージョンにより若干異なります。ここでは、現在の主流であるanalytics.jsとgtag.jsについてそれぞれ紹介します。

analytics.jsを使用する場合

標準のトラッキングコードは以下のようになっています。ページのHTML内にこれを埋め込むことで、読み込まれたページ(フォーム)のURL情報がGoogle Analyticsのサーバーに送られるようになっています。
(UA-XXXXX-Yの部分はご自分のGoogle AnalyticsトラッキングIDを入れてください)

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

たとえば、フォームの確認画面を表示したときに、URLを/contact/service/confirm.htmlとしてGoogle Analyticsに記録させたいときは、このga('send', 'pageview');の行を以下のように書き換えます。

ga('send', 'pageview');

ga('send', 'pageview', '/contact/service/confirm.html');

(太字下線部分を挿入)

gtag.jsを使用する場合

gtag.jsを使用する場合、標準のトラッキングコードは以下のようになります。
(UA-XXXXX-Yの部分はご自分のGoogle AnalyticsトラッキングIDを入れてください)

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-XXXXX-Y');
</script>

たとえば、フォームの確認画面を表示したときに、URLを/contact/service/confirm.htmlとしてGoogle Analyticsに記録させたいときは、このgtag('config', 'UA-XXXXX-Y');の行を以下のように書き換えます。

gtag('config', 'UA-XXXXX-Y');

gtag('config', 'UA-XXXXX-Y', {'page_path': '/contact/service/confirm.html'});

(太字下線部分を挿入)

これらを、入力画面・確認画面・完了画面(入力画面が複数ステップの場合はそれぞれ)のHTMLに対してそれぞれ個別に設定することで、URLの変わらないフォームでもコンバージョンの追跡が可能になります。

※参照:ページ トラッキング | ウェブ向けアナリティクス(analytics.js) | Google Developers
 https://developers.google.com/analytics/devguides/collection/analyticsjs/pages?hl=ja新しいウィンドウで開きます
 gtag.js を使用した単一ページ アプリケーションのトラッキング | ウェブ向けアナリティクス(gtag.js) | Google Developers
 https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications?hl=ja新しいウィンドウで開きます

注意点

アクセス解析や広告効果測定等の各種計測タグをSSI(include)で一括挿入している場合は、フォームの部分だけ一括挿入の対象外とし、個別にGoogle Analyticsトラッキングコードを埋め込む必要があります。GAトラッキングコードだけを抜いた計測タグ挿入用ファイルを別途作っておくと便利です。

まとめ

Google Analyiticsのトラッキングコードをちょっと工夫するだけで、一見コンバージョン計測が不可能そうなフォームでも、計測が可能になります。フォームのURLが変わらずコンバージョン・離脱計測でお悩みの方は、ぜひ挑戦してみましょう。

マックスマウスでは、Google Analyticsのコード挿入やフォーム改善などを含め、Web担当者・マーケティング担当者のニーズに応えるWebサイト制作サービスを提供しております。ご興味のある方はぜひお問い合わせください。