googleAnalyticsのイベントトラッキングを利用してページがどこまでスクロールされたのか、取得されたのかを調べようと思います。
必要なもの
- jQuery 1.7.1+
- jquery-scrolldepth(jQueryプラグイン)
ｊquery-scrolldepthについて
このプラグインはjqueryとgoogleAnalytics(以下GA）のイベントトラッキングを利用して、 『スクロールをイベントとして取得』するプラグインです。
基本状態では、 4/1単位で25％、50％、75％100％とスクロールされたことを取得することができます。
基本的な使い方
発行したGAコードと以下の記述のページ内記述します。
※太字にした箇所は必ずGAタグの後にいれてください。
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script src=”jquery.scrolldepth.js”></script>
<script>
$(function() { $.scrollDepth(); });
</script>
結果
10％単位で計測できるようにjquery-scrolldepthの中を書き換える。
せっかくなので、10%単位で計測できないものかと思い立ったのがきっかけです。それでは、
書き換える項目は二箇所
・58行目あたりと
・112行目
から始まる以下の項目を
58行目 before
function calculateMarks(docHeight) { return {
‘25%’ : parseInt(docHeight * 0.25, 10),
‘50%’ : parseInt(docHeight * 0.50, 10),
‘75%’ : parseInt(docHeight * 0.75, 10),
// 1px cushion to trigger 100% event in iOS
‘100%’:docHeight – 1 }; }
58行目 after
function calculateMarks(docHeight) { return {
‘10%’ : parseInt(docHeight * 0.10, 10),
’20%’ : parseInt(docHeight * 0.20, 10),
’30%’ : parseInt(docHeight * 0.30, 10),
’40%’ : parseInt(docHeight * 0.40, 10),
‘50%’ : parseInt(docHeight * 0.50, 10),
’60%’ : parseInt(docHeight * 0.60, 10),
’70%’ : parseInt(docHeight * 0.70, 10),
’80%’ : parseInt(docHeight * 0.80, 10),
’90%’ : parseInt(docHeight * 0.90, 10),
// 1px cushion to trigger 100% event in iOS
‘100%’: docHeight – 1 }; } と変えます。
二つ目の書き換え項目
112行目 before
// If all marks already hit, unbind scroll event
if (cache.length >= 4 + options.elements.length) {
$window.off(‘scroll.scrollDepth’); return;
}
の”4″の部分を10に書き換える。
112行目 after
// If all marks already hit, unbind scroll event
if (cache.length >= 10+options.elements.length) {
$window.off(‘scroll.scrollDepth’); return;
}
これでスクロールによって取得するイベント数が10個に増えました。
結果画像
以上の項目を書き換えるだけで、ページが10%単位でスクロールされたのかを取得することができます。 このイベント取得はウインドウやページのサイズによって、最初から100％で取得してしまうこともあります。 そのために、scrollDepthプラグインのオプションでドキュメントの最低サイズを指定して、それより小さいページは計測しないという設定もできますので併せて活用すれば、自分が測定したいページをある程度は振り分けることが出来ると思います。
さらにscrollDepthについては詳しく知りたい方はこちらの記事が参考になりました。
