イベントトラッキングでどこまでスクロールしたかを計測する方法

Google Analyticsのイベントトラッキングを使って、
ユーザーがページのどこまで閲覧したかを計測してみます。
　

イベントトラッキングは、ページに訪問したユーザーの操作に対して、
Google Analyticsで計測を行うことができる機能です。

例えば、以下のような計測が行えます。

購入ボタンのクリックされた回数
PDFファイルなどのダウンロード数
動画の再生された回数

詳しくはこの記事の下部に参考サイトを記載していますので、そちらをご確認ください。
　

今回作成したサンプルでは、画面下部をスクロールの基準位置として、
分割した次のエリアが少しでも表示されたらイベントトラッキングを送信するようにしています。

■JavaScript

jQueryを使用しています。

// 値の設定
var content = 'body', // 分割する要素
 total = 10, // 分割する数
    category = location.pathname, // categoryに入れる値
  action = 'scroll'; // actionに入れる値

// 処理に使用する変数
var current = 0,
 divide = [];

$(function() {
  contentDivide();
    $(window).on('load resize scroll', function() {
       contentScroll();
    });
});

// コンテンツを分割
function contentDivide() {
 var contentTop = $(content).offset().top;
   var contentHeight = $(content).outerHeight();
   for(var i = 0; i < total; i++) {
     divide[i] = Math.floor(contentHeight / total * (i + 1)) + contentTop;
   }
}

// スクロール位置の取得とイベントトラッキングの送信
function contentScroll() {
 var scrollBottom = $(window).height() + $(window).scrollTop();

  while(divide[current] <= scrollBottom) {
     current++;
      var label = Math.round(current / total * 100) + '%';
      ga('send', 'event', category, action, label);
   }
}

サンプルはこちら

1～5行目で値の設定を行っています。

content	計測する要素を指定します。ページ全体ではなく特定のエリア内で計測したい場合は、その要素を指定してください。
total	contentで指定した要素を何分割して計測するかを指定します。 total = 10 の場合、contentの要素を10分割して、10%スクロールする(次のエリアが表示される)毎にイベントトラッキングを送信します。
category	計測の対象を指定します。 category = location.pathname の場合、現在閲覧しているページURLのパスになります。
action	計測対象のイベントを指定します。ここはaction = 'scroll'から特に変更の必要はありません。