Google Analytics(ユニバーサルアナリティクス)で個々のユーザーのサイト内の行動を追う

 

Google Analyticsはサイト内でのユーザーの行動を知ることでサイトの改善をするツールとしても役割が増すと思われます.そのためにはどのようなカスタマイズをすべきか(リンククリックとスクロール率をイベントで計測する)などをデモサイトも併用しながら紹介します.

 

1.はじめに

Google Analyticsは集客の状況を知ることができるツールですが,サイト内でのユーザーの行動も知ることができるツールです.昨今のCookie規制が進むことで,Google Analyticsはサイト内でのユーザーの行動を知ることでサイトの改善をするツールとしても役割が増すのではないかと思っています.いわゆるUX(ユーザーエクスペリエンス)やCX(カスタマーエクスペリエンス)の向上に役立てるツールとしての役割がより重要になるのではないかということです.

 

2.ユーザーエクスプローラ

Google Analytics(ユニバーサルアナリティクス)で個々のユーザーの行動を知るには,ユーザーエクスプローラ(図1参照)を使うことになります.ここで重要なのは,行動を確認するユーザーを絞るということです.絞る対象は,状況によっていろいろあり得ますが,通常は目標を達成した(コンバージョンをした)ユーザーです.もし目標を達成したユーザーが少ないのであれば,例えばフォームに到達したユーザーなど最終目標手前まで行動したユーザーを含めるといいと思います.このようなユーザーは,カスタムセグメントなどを活用することですぐに絞り込めます.ユーザーエクスプローラの詳しい使い方などは説明しませんが,図1の一覧のクライアントIDをクリックすると,ユーザーレポートとしてそれぞれのユーザー(クライアントID)が流入チャネルの情報や表示期間でのサイト内の回遊した行動(閲覧したページなど)が時系列で確認できます(図2参照).

 

図1.Google Analyticsのユーザーエクスプローラのレポートのトップページ

 

ユーザーエクスプローラのユーザーレポートの行動履歴は,Google Analyticsがデフォルトのままですと,各ユーザー(各クライアントID)の閲覧したページ(ページビュー)の遷移履歴のみ確認できます..各ページをどれぐらい移動したかやサイト内なのどこのリンクをクリックしていたのかなどはわかりません(図2参照).ユーザーの行動意図を知る(推測する)にはより多くの情報があったほうが有利です.こちらが期待していたような行動(サイト内の設置したリンクで誘導)ができているかなどがわかるとわからないとでは,かなり違います.

 

図2.ユーザーレポートのページビューが主体の表示

 

サイト内でのユーザーの行動を知ることでサイトの改善をする役割としてデフォルトのGoogle Analyticsではかなり物足りません.すくなくとも,ユーザーのクリック(サイト内のどのリンクをクリックしたか)やページのスクロール率(ページ内をどの程度移動・見たか)などの情報がほしいです.

サイト内とクリックを計測するにはイベント計測を使います.これはデフォルトのGoogle Analyticsでも<a>タグに「onclick=”ga(‘send’,・・・);”」などとコードを追加すればイベントとして計測出来ますが,その追加・管理はかなり面倒です.ですが,Googleタグマネージャー(以下,GTM)を使えば,コードを追加しないでリンクのあるテキスト情報を得られるので楽に取得できます.またページのスクロール率(ページの縦方向などへの移動率)もGoogleタグマネージャー(以下,GTM)を使えば,イベントとして簡単な設定で計測出来ます.このようなGTMの設定方法などは他のサイトに多くあるので,そちらを以下にいくつか紹介しておきます.

 

GTMの基礎的な設定で現状もっとも良いと思うのはアユダンテさんの以下のコラムにある設定だと思います.

GTMでGoogleアナリティクスのページビュータグを設定する方法

Google Analytics(ユニバーサルアナリティクス)とGTMでサイト内のリンクを計測する場合は以下の情報が参考になりそうです.

外部リンクのクリックをイベントとして計測する

カートへの追加やファイルのダウンロードを計測する

Googleタグマネージャー公式ヘルプ:データレイヤー

Google Analytics(ユニバーサルアナリティクス)とGTMでサイト内のスクロール率を計測する場合は以下の情報が参考になりそうです.

Googleタグマネージャーでスクロール率を計測する方法

Googleタグマネージャー公式ヘルプ:スクロール距離トリガー

 

以上のようなイベント計測を追加することで,ユーザーレポートの情報が増して,ユーザーがどのような行動をしたのかがわかりやすくなります.図3はそのようなイベント計測をした場合のユーザーレポートの表示です.

 

図3.ユーザーレポートのページビューにイベントが加わった表示

 

3.サイト内のリンククリックをより正確に知るための工夫

サイト内のリンクのあるテキストのクリックをGoogle Analytics(ユニバーサルアナリティクス)とGTMの活用で簡単に取得できるようになると言いましたが,より正確に知るには手間をかける必要があります.その手間は,残念ながらGTMの操作だけで完結しなく,サイト内のコードをいじる必要があります.

以下,どのようなことをするのかを実際の例を示しながら紹介します.今回の記事のための次のようなデモサイト(テストサイト)を用意しました.

[デモサイト] GA TEST SITE

FC2のフリーでホームページを作れるスペースなので,スマホ(表示画面が960px以下)だと広告が表示され,PC(表示画面が960pxより大きい)だと一定期間更新がないと広告が表示される環境です.

 

図4.デモサイトのページ「/test_home.html」のPC表示

 

図5.デモサイトのページ「/test_home.html」のスマホ表示

 

さて上記のサイトで,ヘッダーとフッターにナビとして「home menu01 menu02 menu03」の各内部ページへのリンクがあります(スマホだと,右上のハンバーガーメニューで表示され,フッターの表示はなくなります).上記サイトで「menu02」をクリックして「/test_menu02.html」に移ってみてください.

 

図6.デモサイトのページ「/test_menu02.html」のPC表示

 

ページ「/test_menu02.html」内には,ページ「/test_menu01.html」へのリンクが与えられた「menu01」が,ページ上部のヘッダーとページbody内の「Image」と書かれた青色画像の下とフッターの3箇所あります(スマホだとフッターが非表示なので2箇所).このような場合,Google AnalyticsとGTMとでクリックしたリンクのテキスト情報やリンク先URLの情報を取得してもどこをクリックしたのかわかりません.このような区別をするために,上記のサイトとでは<a>タグに「id」を追加しています.該当する箇所は,ページ「/test_menu02.html」のソース表示で確認でき,具体的には

448行目:<li><a id="navi_list" href="test_menu01.html">menu01</a></li>

463行目:<li class="nav-drawerList-item"><a id="navi_drawerList" href="test_menu01.html">menu01</a></li>

514行目:<a href="test_menu01.html">menu01</a></div>

543行目:<li><a id="footer_navi_list" href="test_menu01.html">menu01</a></li>

となります.

ヘッダーのナビはPCとスマホ用があるのでこのサンプルではわかりように,PCのナビでは「id=”navi_list”」を,スマホのナビでは「id=”navi_drawerList”」とidを与えました.一方で,フッターのナビには「id=”footer_navi_list”」とidを与えました.本文中の「menu01」(514行目)は,idは与えていません.これは,このページではすでに他の同じテキストと同じリンクの箇所がidを与えたので,それらと区別できるので必要が無いからです.なお,idは区別がつくようにするのは当然ですが,同一ページにある他のidとかぶらないようにしたほうが安全です.

なお上記のサイトでは<a>タグにidを追加しましたが,他の要素も目印として使うことができます.詳しくは,

Googleのタグマネージャー公式ヘルプ

クリック トリガー

ウェブサイト用コンテナの組み込み変数

を参照してください.

次に,画像などにリンクを与えた場合です.Google AnalyticsとGTMの活用したリンクのあるテキストのクリックを取得する方法で,クリックしたURLも計測できるので画像をクリックしたことはわかります.この場合,そのページ内でその画像に与えたリンク先がその1つしかないなどと状況から区別できれば問題ないのですが,そのようになっているとは限りません.このような画像のリンク計測やボタン形式のクリック計測でよく紹介されているのが「onclick」でのデータ送信です.

先ほどのページ「/test_menu02.html」において「SERVICE」において「Image」と書かれた青色,緑色,桃色の画像があり,それぞれにリンクが与えられています(緑色の画像のリンクは「/test_menu02.html」なので同じページの再読込でTOPに戻りますが).これらには,「onclick=”ga(‘send’,・・・);”」の代わりにGTM用の「onclick=”dataLayer.push(・・・)”」を使って設定します.該当する箇所は,ページ「/ test_home.html」のソース表示で確認でき,具体的には

511行目:<a href="test_menu01.html"><img src="test_images/test_image-1.png" alt="image1" onClick="dataLayer.push({event:'button1-click', button1Category:'InternalLink_Click', button1Action:'Image_Button_Click', button1Label:'menu01-image-click'});"></a>

518行目:<a href="test_menu02.html"><img src="test_images/test_image-2.png" alt="image2" onClick="dataLayer.push({event:'button1-click', button1Category:'InternalLink_Click', button1Action:'Image_Button_Click', button1Label:'menu02-image-click'});"></a>

525行目:<a href="test_menu03.html"><img src="test_images/test_image-3.png" alt="image3" onClick="dataLayer.push({event:'button1-click', button1Category:'InternalLink_Click', button1Action:'Image_Button_Click', button1Label:'menu03-image-click'});"></a>

となります.

ページ「/test_menu02.html」では画像リンクのクリック計測に「onclick=”dataLayer.push(・・・)”」を使いましたが,他のページでは同様に画像リンクのクリック計測には「id」のみを使っています. 例えば,ページ「/test_home.html」にも「SERVICE」において「Image」と書かれた青色,緑色,桃色の画像がありますが,それぞれにコードは<a>タグの中に「id=”menu01-image-click”」など目印の「id」を与えただけとなっています.該当する箇所は,ページ「/ test_home.html」のソース表示で確認でき,具体的には

484行目:<a id="menu01-image-click" href="test_menu01.html"><img src="test_images/test_image-1.png" alt="image1"></a>

492行目:<a id="menu02-image-click" href="test_menu02.html"><img src="test_images/test_image-2.png" alt="image2"></a>

500行目:<a id="menu03-image-click" href="test_menu03.html"><img src="test_images/test_image-3.png" alt="image3"></a>

となります.計測するイベントの内容の工夫(後述)をすれば,「onclick=”dataLayer.push(・・・)」を使わなくても「id」で用が足りると思っています.

 

4GTMでのイベントラベルなどの設定

上記でリンククリックをイベントで取得する概要を紹介しました(上述しましたが,GTMのタグやトリガーなどの設定は他のサイトを参照してください).ここではGTMの設定の工夫を簡単に紹介したいと思います.

下図は内部リンクのクリックをイベント計測するタグです.

 

図7.GTMの内部リンククリックのイベント用のタグ

 

「カテゴリ」と「アクション」と「ラベル」は自由に設定できます.この例では,ラベルに注目してください.

{{Click URL}}_:_{{Click Text}}_:_ClickID[{{Click ID}}]

のように設定しています.つまり,

リンク先のURL_:_クリックしたテキストの内容_:_ClickID[<a>タグに与えたIDの内容]

という値がイベントラベルに格納されます.例えば,ページ「/test_menu02.html」でヘッダーの「menu01」のテキストをクリックしたならば,イベントラベルには

https://googletoolsampleset.web.fc2.com/test_menu01.html_:_menu01_:_ClickID[navi_list]

という情報が格納されます.また,ページ「/ test_home.html」でSERVICEの「Image」と書かれた青色画像をクリックしたならば,イベントラベルには

https://googletoolsampleset.web.fc2.com/test_menu01.html_:__: _ClickID[menu01-image-click]

という情報が格納されます.

なお,上記の内部リンクのクリックをイベント計測するタグでのアクションでは,クリックしたとき開かれていたページのパスを「{{Page Path}}」を取得していますが,デフォルトのディメンション「ページ」の情報と「イベントラベル」の情報が紐付いているので,それらを組み合わすこともできます.上記のようにイベントラベルに情報を詰め込むのは,GAのユーザーエクスプローラだけで使うだけなら必要無いかもしれません.ですが,他のツールでこれらデータを使う場合にはこのほうが便利ではないかと思っています.

上述しましたがページ「/test_menu02.html」でSERVICEの「Image」と書かれた3つの画像には内部リンクがあり,それらは「onclick=”dataLayer.push(・・・)”」を使っています.これらも内部リンクなのでこれらをクリックした場合,テキストなどの内部リンクをクリックした場合に計測するタグが発動しないようにしておきます.その設定は,例えばトリガーに「button1Action」が「Image_Button」含まないなどの条件を追加することで発動しないようにします.なお,「onclick=”dataLayer.push(・・・)”」のリンクをクリックした場合,イベントカテゴリは「{{button1Category}}」として(したがってコードから「InternalLink_Click」となる),イベントラベルは「{{button1Label}}」のなので各コードの該当する内容を取得するようにGTMのタグで設定しました.

 

5.おわりに

上記のような設定はたしかに時間もかかりますが,よりよいデータを得たいならばやはり必要です.すくなくとも,ヘッダーとフッターのナビ(これは共通のテンプレート場合が多いので意外と簡単にできる可能性があります)と重要な画像のリンクには「id」を与えて計測したいです.

この記事は,初心者にはかなり不親切な内容になっているかと思います.とくにGTMの設定に関しては他のサイトに任せています.実は紹介したいのはGTMの設定の仕方ではなく,Google Analytics(ユニバーサルアナリティクス)とGTM,さらにはデータポータル,Excelを使うとこんなことができるということなのです(そのためのデモサイトだったりします).ということで,次の記事「データポータルで「GAのユーザーエクスプローラより便利な(?)レポート」を作ってみた」では,本題とも言えるデータポータルを使ってユーザーエクスプローラ的レポートを紹介したいと思います.

 

補足

GTMでのリンク計測の設定に関しては下記のサイトも参考になるかもしれません.

同一ページ内に同一リンク先のリンクが複数ある場合のGoogleタグマネージャでの設定のコツ

dataLayerへ値を渡す記述を.pushで統一する方法

Web解析(アナリティクス)ツールの歴史と現状を知るのには以下の清水誠氏のコラムが参考になると思います.

Web解析はここまで進化・退化した 〜CXとプライバシーを抱擁せよ〜【前編】

Web解析はここまで進化・退化した(中編):プライバシー保護を加速させた罪なき加害者とは

Web解析はここまで進化・退化した(後編):コロナで迫られる意識改革