どこまでスクロールしたかをイベントトラッキングで計測できるjQueryプラグインを作ってみた

スクロール位置をイベントトラッキングで取得する実験をしてみたついでに、処理をプラグイン化してみました。
特定の要素を指定した数値でエリアを分割して、どこまで表示されたのかを取得できます。
「scrollTracking.js」のデモページはこちら
「scrollTracking.js」のダウンロード
※ユニバーサルアナリティクスのみの対応になります。

設定方法

jQueryとプラグインを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./scrollTracking.js"></script>

JavaScript

$(function(){
	$('#contents').scrollTracking();
});

今回は#contents内のスクロール位置を取得するようにしていますが、ページ全体で使いたい場合はbodyなどを指定してください。

特にオプションを指定しない場合、以下のような設定になります。

ga('send', 'event', 'ページURL', 'scroll', 'X/5');

ページURLはそのページのドメイン以下のパス、X/5はどこまでスクロールしたかで、Xに0～5が入ります。

オプション

$(function(){
	$('#contents').scrollTracking({
		area: 5,
		time: true,
		category: 'url'
	});
});

オプション指定のデモページ

最初はスクロールイベントが一定回数発生する毎にスクロール位置を取得しようと思っていたのですが、セッション毎で取得の上限があるようなのでこのような形にしました。
　

データの確認

取得した値は、Googleアナリティクスにログイン後、左メニューの「行動 > イベント > 上位のイベント」で確認ができます。

特にオプションを設定しない場合は以下のように表示されます。
イベントの値には前のエリアからこのエリアにくるまでの秒数(つまり前のエリアの閲覧秒数)が入るようになっています。

オプションでエリアの分割数を10、経過時間の取得を切った場合です。

【参考サイト】

• イベントについて – アナリティクス ヘルプ