デジタルマーケティングTips

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

記事タイトル画像

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

2023年11月27日更新

Googleアナリティクス4(GA4)用の記述を追加し、実装例の順序を一部入れ替えました。

要点

メルマガでも情報を配信中です! ぜひご登録ください。

同一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のバージョンにより若干異なります。ここでは、現在の主流である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の変わらないフォームでもコンバージョンの追跡が可能になります。

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

※ユニバーサルアナリティクスのデータ計測提供は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');

(太字下線部分を挿入)

注意点

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

まとめ

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

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

Webフォーム開発やその他のWeb制作業務はおまかせください

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

Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け!

WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。

いますぐご登録ください!