アナリティクスで同一URLの画面遷移をページ毎に計測する方法

仮想ページビューを設定

こんにちは。WEBデザイナー 兼 マーケターです。

MEMO

仮想ページビューの設定方法だけをサクッと知りたい方はコチラをクリック。

記事タイトルは、まさに先週ぼくが先輩に投げかけた質問。

先輩から与えられたミッションは以下の通り。

先輩

WEB改善プロジェクトの第一弾は、申し込みフォームの改善!

先輩

…とはいえ、現状は”何をどう改善したら良いかわからない状態”。説明するからアナリティクスを開いて。

ぼく

はい!

— Googleアナリティクスを起動 —

アナリティクスを起動

先輩

Aサービスの目標到達プロセスを見て。

ぼく

え〜と… これですね。

Aサービスの目標到達プロセス

先輩

どう?何が分かる。

ぼく

10日間で200件の申し込みがあったってことですよね?

先輩

そやな。…てか、この画面の内容では”まずい”ってことは分かる?

ぼく

えっ!?

先輩

…じゃあ、Bサービスの目標到達プロセスを見てみて。

ぼく

は、はい。

Bサービスの目標到達プロセス

ぼく

おぉ…申し込み完了までの途中経過が見れるッ!!

ぼく

なるほど。申し込みに至った人数だけ把握しても駄目って事ですね。

先輩

そう。申し込み数なんてアナリティクスを使わなくても分かる。大事なのは途中経過。

先輩

目標到達プロセスを”きちんと”設定すると、どのページで離脱したかが一目で分かる様になるから、改善すべきページの絞り込みができる。

先輩

でッ!何故こんなことになってるかというと、目標のタイプを「イベント」に設定して、”申し込みを完了する”ボタンにイベント トラッキングを設置してるからやな。

 

目標でイベントが選択されている

+

イベントトラッキングを設定

ぼく

ほんまや。

先輩

対して、Bサービスは、目標のタイプを「到達ページ」に。そして、完了画面に至るまでのページURLと、完了画面のURLを「目標の詳細」に入力している。

目標で到達ページを選択

ぼく

おぉ…なるほど。この違いが目標到達プロセスの出力結果の違いに繋がっている訳だ。

先輩

そう。そして最適な設定は当然「Bサービス」。なので「Aサービス」も同じ設定にする必要がある。

先輩

そうすることで、フォーム内_各ページの離脱率が分かる様になる。…以上、解説終わり。設定よろしく〜。

ぼく

はい!

ぼく

え〜と…AサービスのフォームのURLは…

お申込みフォームのURLが全て一緒

ぼく

全部一緒やんけ…

ぼく

えっ、設定できへんやん…

同一URLの為、到達プロセスの設定ができない

ぼく

ぼく

す、すいません。

先輩

ん??

ぼく

フォームなんですが、ページ遷移してもURLが変わらないんですが…

先輩

あぁ!!そうか...じゃあ、仮想ページビューを設定するしか無いな。

ぼく

仮想ページビュー?

先輩

そう。今は同じURLやから切り分けができない訳やん。なんで各ページごとに仮のURLを仕込む必要がある。

先輩

その仮のURLを「到達ページ」と「目標到達プロセス」に入力することで、各ページの計測ができる様になる。…OK?

ぼく

お、オーケー..

先輩

ただ、そうする為には、アナリティクスのトラッキングコードをいじる必要があるな…ググって

ぼく

り、了解っす。

このあと滅茶苦茶ググった

ということで、「仮想ページビュー」の設定方法について書いていきます。

 

 

仮想ページビューの設定方法について

HTML側での設定

各ページの<head>内にアナリティクスのトラッキングコードを記述します。(UA-XXXXX-YはアナリティクスのトラッキングIDです。)

ga(‘send’, ‘pageview’, {‘page’: ‘目標到達プロセスに設定したいURLを入力’, ‘title’: ‘仮のタイトルを入力’}); が仮想ページビューのトラッキングコードとなり、この部分だけを各ページ(入力・確認・完了)の内容に合わせた設定に変更する必要があります。


 

↓仮想ページビューのトラッキングコードの内訳は以下の通りです。

仮想ページビューの内訳


ぼく

まとめると、各ページの<head>内に <!– Google Analytics –> 〜 <!– End Google Analytics –>のコードを丸ごと入力。但し、「ga(‘send’, ‘pageview’ 〜 )」の部分だけはページの内容と合う様に変更します。

 

これで、URLの切り分けができる様になり、「目標到達プロセス」の設定が可能となります。

仮想ページビューを設定する目的

↓参考記事

ウェブサイトやウェブ アプリケーションでのユーザー インタラクションを測定します。

続いては、アナリティクス側の設定について。

 

Google アナリティクス側での設定

サイドメニューの「管理」をクリックした後、ビュー列の「目標」をクリックします。

目標到達プロセスの設定方法1

「+ 新しい目標」ボタンをクリックします。

目標到達プロセスの設定方法2

「目標の説明」をクリックし、「名前」を入力。そして、タイプで「到達ページ」を選択します。

目標到達プロセスの設定方法3

「目標の詳細」をクリックし、到達ページに「完了画面の仮URL」を入力。そして、目標到達プロセスのステップには「お申込みに至るまでのページの仮URL」を入力します。

目標到達プロセスの設定方法4

これで仮想ページビューの設定が完了です。

続いては、動作確認について。

 

Tag Assistant(タグアシスタント)で仮想ページビューが正常に出力されているか確認

目標到達プロセスが正常に計測されているか否か、本番環境にUPする前に確認する必要があります。

まぁ、そのままUPしても問題は無いんですが、目標到達プロセスが計測されるまでには時間がかかる為、後々のことを考えると、事前に動作確認を行った方が手間や時間を省けます。

ぼく

フォーム内に人が来ないと計測は始まらないからね…

 

また、ぼくが仮想ページビューを設定した時、当日中に関しては、フォーム内に人が訪れているにも関わらず、何故か目標到達プロセス内の数字は「0」で反映されてました。(翌日から計測が可能に。)

目標到達プロセスのバグ

何故か「目標到達プロセス」が0で反映される。(単なる設定ミスの可能性も…)

いずれにしろ、計測が正常に行われているか判断するには相応の時間が必要ということです。

なので、UP前の動作確認はしておいた方が無難ですね。

ぼく

面倒くさいですが、ひと手間かけた方が、後々楽になります。

動作確認は、Googleが提供しているTag Assistant(タグアシスタント)を利用します。

 

Tag Assistant(タグアシスタント)での確認方法


1:Tag Assistant(タグアシスタント)をインストール。

2:Tag Assistantを起動し、お申し込みフォームの「前のページ」で「Record」ボタンをクリックします。

タグアシスタントを起動し、recordをクリック。

ぼく

Tag Assistantの計測が始まるのは、画面遷移してからです。なので、計測したいページの前で「Record」ボタンをクリックする必要があります。

3:お申し込みフォームにアクセスします。

お申し込みフォームにアクセス

4:完了画面までページ遷移します。(完了画面でストップ)

フォーム内でページ遷移

ぼく

「戻る」ボタンは押さない様にしてください。一気に完了画面まで進み、そこでストップします。

 

5:完了画面でTag Assistantの「STOP RECORDING」ボタンをクリックします。

STOP RECORDINGをクリック

6:Tag Assistantの「Show Full Report」ボタンをクリックします。

ShowFullReportをクリック

7:TitleとTracked Pageが仮想ページビューで設定した内容と同一であるかを確認します。(Pagload 1 〜Pagload 3まで全てを確認)

metadate内のpageviewを確認。

仮想ページビューで設定した内容と同じであれば、問題なく計測できています。

これにて確認作業は終了。

ぼく

後は、本番環境にUPするのみ。但し、計測には時間がかかるので、確認は翌日に行った方が良いです。

 

まとめ

仮想ページビューの設定の流れは以下の通り。

仮想ページビューを設定について

これでフォーム内の離脱率が分かる様になります。

特定のページでの離脱率が多い =「何かしらの問題」があるページといえる為、「EFO(エントリーフォーム最適化)」対策を施す必要があります。

EFOについては、次の機会に。

この記事が「URLが同じで目標到達プロセスの設定ができねぇ〜( ̄□ ̄#)」って方の参考になれば幸いです。

ぼく

今、仕事でやっているのがまさにEFO対策。お申し込みに関わる部分の修正なので、本番環境にUPする前後は胃がキリキリします…

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください