ishikawa

2015.09.09

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

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'から特に変更の必要はありません。

11～37行目が実際に処理を行っている部分になります。

同じ分割エリア内でのイベントトラッキングの送信は、
1回のアクセス中に1度しか行われないようにしています。
例えば40%地点まで閲覧してからページ上部に戻り、再度40%地点まできた場合には
イベントトラッキングは送信されません。
　

イベントトラッキングの確認は、Google Analyticsにログイン後、左メニューの
「行動 > イベント > 上位のイベント」から行えます。

サンプルページの20%位置までスクロールしているのが確認できました。
　

【参考サイト】

■JavaScript

Recommend

GoogleタグマネージャでGoogle AnalyticsやAdWordsのタグを一元管理する

browser-syncでどんな拡張子でも「.html」の内容を表示させる

CSSやJavaScriptで画像の保存を防止する方法4種類

Googleマップに、GPSを使って現在位置(と誤差を表す円)を表示するサンプル