googleAnalyticsを利用した10%単位でスクロールイベントを取得する方法

eye-catch

googleAnalyticsのイベントトラッキングを利用してページがどこまでスクロールされたのか、取得されたのかを調べようと思います。 

必要なもの

jquery-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については詳しく知りたい方はこちらの記事が参考になりました。

jQuery Scroll Depthを使ってみたので詳細を書いとく