2019年02月06日Google Analyticsで、URLが変わらないフォームのコンバージョンを計測

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

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

これは、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での追跡が可能になります。

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

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

実装例

実装の仕方はGoogle Analyticsのバージョンにより若干異なります。ここでは、現在の主流であるGoogleアナリティクス4(GA4)と、かつて主流であったユニバーサルアナリティクス(UA)についてそれぞれ紹介します。

Googleアナリティクス4の場合

Googleアナリティクス4(GA4)を使用する場合、標準のトラッキングコードは以下のようになります。
(G-XXXXXXXXXXの部分はご自分のGoogle測定IDを入れてください)

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-XXXXXXXXXX');
</script>

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

gtag('config', 'G-XXXXXXXXXX');

↓

gtag('config', 'G-XXXXXXXXXX', {'page_location': 'https://www.XXXXXXXXXX.co.jp/contact/service/confirm.html'});

(太字下線部分を挿入。ドメインは適宜自サイトのものを入れてください)

注意点としては以下です。

• UAのgtag.jsで'page_path' : '/xxx/xxx/～'としてサイトルートからのパスを入れた部分は、GA4では'page_location' : 'https://～'としてスキーム名からのURLをすべて入れてください。
• 一緒にpage_titleを指定することで、ページタイトルも独自指定できます。この場合gtag()は以下のように記載します。

  gtag('config', 'G-XXXXXXXXXX', {
  page_title : '入力内容を確認する | 当社のサービスに関するお問い合わせ | 株式会社○○○○○',
  page_location: 'https://www.XXXXXXXXXX.co.jp/contact/service/confirm.html' });

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

※参照：仮想ページビューを UA から GA4 に移行する  |  デベロッパーによる基本的な測定の移行  |  Google for Developers
　https://developers.google.com/analytics/devguides/migration/measurement/virtual-pageviews?hl=ja

ユニバーサルアナリティクスの場合

※ユニバーサルアナリティクスのデータ計測提供は2023年6月末で終了しています。本セクションは参考用として残しています。

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での実装例

標準のトラッキングコードは以下のようになっています。ページの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');

(太字下線部分を挿入)

※参照：ページ トラッキング | ウェブ向けアナリティクス（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 Analyticsのトラッキングコードをちょっと工夫するだけで、一見コンバージョン計測が不可能そうなフォームでも、計測が可能になります。フォームのURLが変わらずコンバージョン・離脱計測でお悩みの方は、ぜひ挑戦してみましょう。

マックスマウスからのお知らせ