サイト制作に関するメモ書き

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

どこまでスクロールしたかをイベントトラッキングで計測できる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'
	});
});
area 要素をいくつのエリアに分割するかを数値で指定します。
初期値は5。
time 前のエリアをどのくらい閲覧していたかを取得するかどうか指定。
trueかfalseで初期値はfalse。
category ページの判別をどのようにするか指定。
‘url’: そのページのドメイン以下のパスを指定。初期値。
‘title’: そのページのtitleタグを指定。
他、特定の文字列を固定で入れておきたい場合などはその文字列を指定してください。

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

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

データの確認

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

own-plugin-scroll-tracking01

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

own-plugin-scroll-tracking02

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

own-plugin-scroll-tracking03

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP