どこまでスクロール(閲覧)されているか計測する方法 | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2017年09月21日

どこまでスクロール(閲覧)されているか計測する方法

訪問者がページをどこまでスクロール(閲覧)したかを指標とする方法をご案内いたします。

▼こんな方に役立ちます。
・スクロール頻度の高いスマホ向けページや、長いブログ記事のスクロール深度を計測したい
・長いコンテンツのページ割を最適化したい
・ゴールにいたる過程の中間指標として、スクロール深度を計測したい
・より深く実験結果を分析したい

スクロール深度から得られるユーザー理解と実験アイデア

長いコンテンツをページ分割する場合、どの程度の長さに収めると良いのか?
その答えは、実験が導いてくれます。

AページからBページへの最適な動線を実験する場合でも、訪問者がどれだけBページへ遷移したかを指標とするのに加えて、Aページでどこまでコンテンツを閲覧したかを計測することで、より深く実験結果を分析することが可能です。

たとえ、実験の勝敗が付かないケースでも、ゴールまでの中間指標を分析して得られる気づきから、さらなる実験のアイデアが生まれることも多いものです。

特に、スクロール頻度の高いスマホ向けページや長いブログ記事、くわしい説明やスペックが記載された詳細ページが実験対象のフローに含まれる場合は、スクロール深度の計測をご検討ください。

設定手順

訪問者がページの下方向に25%、50%、75%、もしくは、100%スクロールした場合にコンバージョンを計測する例をご紹介します。

1.実験にスクロール深度を送信するコードを追加する

該当の「Experiments」編集画面 > [Shared Code]に移動
以下のスクロール深度を送信するコードを追加し、「Save & Apply」をクリックして保存します。

JavaScriptの例:

/*
 * Usage
 *    This function fires custom events at different scroll depth milestones.
 */

  // Variables to prevent continuous firing of custom events

  var scrollTwentyFive = true;
  var scrollFifty = true;
  var scrollSeventyFive = true;
  var scrollOneHundred = true;

  // Create the scrollPercentage

  $(window).bind('scroll', function() {
      window.scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;

      // Conditional code we'll use to fire events based on scrollPercentage.

      if (window.scrollPercent >= 25 && scrollTwentyFive) {
          window['optimizely'] = window['optimizely'] || [];
          window['optimizely'].push({type: "event", eventName: "scroll25"});
          scrollTwentyFive = false;
      }

      if (window.scrollPercent >= 50 && scrollFifty) {
          window['optimizely'] = window['optimizely'] || [];
          window['optimizely'].push({type: "event", eventName: "scroll50"});
          scrollFifty = false;
      }

      if (window.scrollPercent >= 75 && scrollSeventyFive) {
          window['optimizely'] = window['optimizely'] || [];
          window['optimizely'].push({type: "event", eventName: "scroll75"});
          scrollSeventyFive = false;
      }

      if (window.scrollPercent >= 100 && scrollOneHundred) {
          window['optimizely'] = window['optimizely'] || [];
          window['optimizely'].push({type: "event", eventName: "scroll100"});
          scrollOneHundred = false;
      }

  });

2.プロジェクト設定で、フルバージョンのjQueryを選択

このJavaScriptの例では、jQueryの最適化されたバージョンに含まれていないjQueryの.scrollTop()メソッドを使用しています。実験でこのコードを使用するには、jQueryのプロジェクト設定で、フルバージョンのjQueryを選択します。

[Settings] > jQuery Inclusion に移動し、
「Include full jQuery (1.11.3) in project code」を選択し、「Save」ボタンで保存します。

3.カスタムイベントを作成

スクロール深度の計測用にカスタムイベントを追加します。

[Implementation] > [Event]タブ > [Create New event]ボタンを押下し、[Custom]を選択
[Event name]、[API Name]を記入し、[Save Event]ボタンを押下してカスタムイベントを保存します。

4.スクロール深度別に4つの「Metrics」を設定

25%スクロール、50%スクロール、75%スクロール、100%スクロールの指標をそれぞれ設定します。

該当の「Experiments」編集画面 > [Metrics]に移動し、3で作成したカスタムイベントを選択
「Save」をクリックして保存します。

以上で設定は完了です。
以下のように、4つのスクロール深度別に指標が計測できます。

Optimizelyのサポートに関するお問い合わせはこちらまで

コメントは受け付けていません。

ヘルプの関連記事

「何を実験するべきか?」を解決する7つのTips
投稿日: 2017年09月04日
Exclusion Groups(排他的グループ機能)の設定方法
投稿日: 2017年08月24日
Custom snippets(カスタムスニペット)の設定方法
投稿日: 2017年08月24日
Optimizely X カスタムコードの特性について(Optimizely X)
投稿日: 2017年03月29日

ヘルプのよく読まれている記事