スクロール率の活用方法とGTM設定

この記事は、ECサイトや求人サイトのように情報の項目が決まった形(テンプレート)が存在しているサイトで、ページのスクロール率を取得しサイト改善に活用したい方に向けて書いています。
逆に、コラムサイトやニュースサイトは記事ごとに伝える情報が異なり、決まった項目が存在しないことがほとんどのため、今回の記事で紹介する分析方法は活用できません。

Googleアナリティクス(以下GA)ではページビューはわかりますが、そのページが最後まで読まれているのかはわかりません。ファーストビューで離脱したかもしれないですし、途中まで読んで離脱しているかもしれません。これらが数字で示される「スクロール率」は、ちょっとした設定によりGAで計測することができます(設定方法は記事の一番最後で説明します)。

たとえばECサイトの分析をする際、ユーザーが「商品説明」「値段」「口コミ」「クーポン情報」のどのコンテンツをきっかけとして購入(=サイトの目標)に至ったのかわからなかったとします。
そういう場合にスクロール率の分析をおこなうと、目標達成のトリガーとなっているコンテンツを見つけることができます。そのトリガーとなっているコンテンツを上部に移動したり、必要ではないコンテンツを削除する改善をおこなうことにより、売上向上が見込めます。

■目次
1.GA・GTMで設定できるスクロール率とは?
2.スクロール率の分析方法について
3.スクロール率を分析・改善するための準備
4.スクロール率の分析結果と改善一例
5.スクロール率の設定方法
6.まとめ

※ここでお伝えするスクロール率とは、GTMのトリガーのスクロール距離を使用して、
1PV中にユーザーがどの割合までたどり着いたかを確認できる設定の事を指しています。

GA・GTMで設定できるスクロール率とは?

—————————————-

GTMで設定した場合、GAの画面では左のメニューの

「行動」→「イベント」→「上位のイベント」

からイベントカテゴリー一覧で確認ができます。

—————————————-
また、GTMでのイベント計測の設定方法は記事の最後(5.スクロール率の設定方法)で説明しているので、併せて確認してください。

ちなみに今回はGTMで以下のように設定しています。

カテゴリー名 アクション ラベル
ページスクロール Page URL スクロールの割合

そのため、イベントカテゴリーの「ページスクロール」をクリックすると、選択したカテゴリーごとのアクション「Page URL」が記載されている状態です。

GAの画面では1URLごとの「スクロールの割合(ラベル)」が別々の行で表示されてしまい1URLごとの分析が行いにくいため、実際にデータを見て分析する際には別ツールでの集計が必要です。
GAの画面だと実際には以下のように表示されます。

※スクロール率はイベントラベルを選択すると確認ができます。

上記の画像ではサイト全体のスクロール率の傾向が確認できました。
ただ、上記は複数のページフォーマットのスクロール率を集計したデータなので、ここからページごとのCV改善ポイントを読み取ることは難しいため、 Googleデータポータル(旧 データスタジオ)とExcelを使用して集計を行います。

スクロール率の分析方法について

データポータルとExcelを使用した実際の分析方法を紹介します。

今回はテンプレートから生成されているサイトを分析します。
テンプレートから生成されているサイトとはAmazonや楽天のようなECサイトに多く、ページのフォーマットがほぼ統一されているので、スクロール率を活かした分析が行いやすいです。

スクロール率を分析・改善するための準備

分析方法はGoogleデータポータルでGoogleアナリティクスのデータを読み込み、そのデータをExcelで集計しています。

この記事では「モバイルでコンバージョンしたセッション」と「モバイルでコンバージョンしなかったセッション」の行動の違いを比較するので、以下の2種類のデータを使用します。

  1. モバイルトラフィック(基礎になるデータ)
  2. コンバージョンに至ったモバイルトラフィック(基礎にCVを1回以上の条件を付け加えたデータ)

そして上記それぞれに、

  • ディメンション…「ページ」「イベントカテゴリ」「イベントアクション」「イベントラベル」
  • 指標…「合計イベント数」

が必要です。

「モバイルトラフィック」は全体のデータです。サイトによっては「デバイスごとの全てのユーザー」もしくは「デバイスごとのチャネル別」のセグメント等に変更する必要があります。
「コンバージョンに至ったモバイルトラフィック」は上記で設定したセグメントに「1回以上CVした」といった条件を追加したものです。
そのデータをGoogleデータポータルで出せたら、あとはExcelに落として加工するだけです。

以下画像はデータポータルのエクスプローラで2種類の「セグメント」の「ディメンション」「指標」「フィルタの条件」をそれぞれに設定し、ダウンロードした一例です。

スクロール率の分析結果と改善一例

ダウンロードしたExcelデータを開いてスクロール率を横軸に並べ、それぞれのセグメントをSUMIFSの関数で集計をおこなってください。
一例:=SUMIFS(E:E,A:A,”URL”,D:D,”スクロール%”)

※以下が前提です。
A列「ページ」
B列「イベントカテゴリ」
C列「イベントアクション」
D列「イベントラベル」
E列「合計イベント数」

以下の画像はデータを使用したサイトに基づいて作成した仮想のサイト構造です。

【 項目の定義 】
・全体のPV数:特定のスクロール割合までたどり着いたPV数の総計
・CVセッションのPV数:CVしたセッションで特定のスクロール割合までたどり着いたPV数の総計
・○○の前後差:一つ前のスクロール率からの離脱(遷移)したPV数
・前後差の割合:離脱(遷移)したセッションの中でCVに至った割合
→ 計算式は「CVセッションのPV数の前後差」÷「全体のPV数の前後差」×100%

1サイトの商品ジャンルでサイトの構造が違う場合において、以下のようなデータが出ました。

ここで気が付くのは、どのページもスクロール率が70%の部分で前後差の割合が高いことです。
ページを70%まで見て離脱(遷移)したセッションは、その後CVする割合が60%をまで見たセッションに比べて高いということです。
このページの70%地点はレビュー部分なので、レビューを見たセッションはCV率が高くなるということが確認できます。
そのため、レビューの項目を今よりもページの上部に持ってくる事により、全体的なCV率が上昇する可能性があるという仮説が立てられます。

※ユーザーが情報を得る順番も影響している可能性があるので必ずしもレビューを上部に持ってくることが正解だとは限りません。

次に気が付くのは「商品ジャンル_2」が全体的に前後差の割合が低いことです。
そこで、ページに足りない要素を確認すると、「クーポンへの遷移バナー」要素がないことが確認できます。
この情報のみでは確定はできないですが、「クーポンへの遷移バナー」要素が足りていない事が他のテンプレートに比べCVの割合が低い原因の可能性があるので、さらに詳しい調査をおこなう価値はあります。

このように、テンプレートが存在するサイトにおいては、ページのスクロール率とCV数を紐づけたデータを元にして仮説を立てて改善することができます。

スクロール率の設定方法

【概要】
・変数の追加
スクロールした距離など、スクロール行動に関連した変数がデフォルトでは使えないので有効化します。

・トリガーの追加
一定のラインまでスクロールしたらタグが発火するようにトリガーを設定します

・タグの追加
上記のトリガー条件までスクロールしたら発火するGAのイベントタグを設定します

変数の追加

Googleタグマネージャーの左側に存在しているメニューから「変数」を選択し、
組み込み変数の設定をクリックしてください。
以下画像の赤枠内

  • Scroll Depth Threshold
  • Scroll Depth Units
  • Scroll Direction
  • Percent Visible
  • On-Screen Duration

にチェックを入れます。

トリガーの追加

変数を追加したら、Googleタグマネージャーの左側にある「トリガー」を選択し、新規をクリックしてください。

クリック後にトリガーのタイプを「ユーザーエンゲージメント」の「スクロール距離」を選択してください。

選択したら、あとは各項目設定をおこなうのみです。

項目 設定内容
スクロール方向 縦方向と横方向は取得したいデータによって選択してください。
指標 「割合」
トリガーの場所 取得する条件が決まっていれば設定が必要です。

今回は商品詳細ページのみスクロール率を計測するので、商品詳細ページのURLもしくは特定のディレクトリを指定します。

タグの追加

トリガーを追加したら、Googleタグマネージャーの左側にある「タグ」を選択し、新規をクリックしてください。
タグの設定は「Googleアナリティクス – ユニバーサル アナリティクス」を選択してください。

トラッキングタイプは「イベント」に設定し、あとは欲しいデータごとに設定を行ってください。
以下画像の赤枠では以下画像と同様に設定してください。青枠ではサイトによって自由に設定を変更してください。

Googleアナリティクス設定に関しては、変数で設定を行っている場合はそちらを選択し、それ以外の場合はオーバーライド設定を有効にし、GoogleアナリティクスのトラッキングIDを記述してください。

以上でスクロール率は取得の設定が完了しましたので、あとはGTMプレビューを行い、GAで計測できているかの動作確認を行った後に、GTMの公開をおこなうことで設定が完了します。

まとめ

ページスクロール率を取得する設定を行いレポートを出すことで、CVページのスクロール傾向を把握でき、重要コンテンツの発見と改善につながることがあります。

ただし、スクロール率はヒートマップではないので、ユーザーがページ内のどのコンテンツを集中的に確認している(アテンション)のかはわかりません。
そのため、ページ単位でどの文章が読まれているのか・どのコンテンツに強く反応しているのかを細かく確認するためには、今回紹介したスクロール率よりもヒートマップを使用することが望ましいです。

また、このイベントでかなりのヒット数が計測されてしまうので、無償GAの場合はヒット数が上限の1プロパティにつき1カ月あたり1,000万を超えないよう、スクロール率取得を導入するページを慎重に選定する必要があります。

著者 : 大沢 翔己

Twitter : @kuma_aspiration

Facebook : shoki.osawa