問題
Google analyticsのイベントトラッキングの設定で、コンテンツの最後までスクロールしたらカウントさせるには？
解決策
スクロールイベントに対して、コンテンツの「offset().top」の値にコンテンツの高さ「height()」を合わせた数値に対して、スクロール位置「scrollTop()」の値を比較して処理を行う。
スクロールに対するイベントトラッキング設定例
Google analyticsのイベントトラッキングで、スクロールに対する設定例として、コンテンツの最後までスクロールしたらカウントさせる記述例をご紹介します。
イベントトラッキングの記述
イベントトラッキングの記述は以下になります。
- ※jQueryでの記述です。
- ※コンテンツがid「content」と設定されているという想定での記述なので、「#content」の部分をフッターに設定されたidまたはclassに適宜、修正してください。
- ※イベント名、カテゴリ名、ラベル名は適宜、設定し直してください。
var nowCount = 0;
if($('#content').length ){
var ctop = $('#content').offset().top + $('#content').height();
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > ctop - windowHeight && nowCount == 0){
gtag('event','scroll', {'event_category': pageid,'event_label': 'コンテンツの最後までスクロール'});
nowCount++;
}
};
$(window).scroll(function (){
if($('#content').length ){
var ctop = $('#content').offset().top + $('#content').height();
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > ctop - windowHeight && nowCount == 0){
gtag('event','scroll', {'event_category': pageid,'event_label': 'コンテンツの最後までスクロール'});
nowCount++;
}
};
});- 「$(window).scroll(function (){ }」で、スクロールイベントに対する処理を行います。
- 「$(‘#content’).offset().top」で、コンテンツの現在の位置の値を取得します。
- さらにコンテンツの高さ「$(‘#content’).height()」を取得して、コンテンツの現在の位置の値と合わせることで、コンテンツの最後の位置の値を取得します。
- 「$(window).scrollTop()」で、現在のスクロール位置の値を取得します。
- 「$(window).height()」で、ウインドウの高さの値を取得します。
- 「scroll > ptop – windowHeight」（スクロール位置 > コンテンツの最後の位置 – ウインドウの高さ）で、スクロールをしていって、コンテンツが最後までウインドウに表示されたかどうかを判定しています。
- 条件分岐IFで「nowCount == 0」、そして0だった場合の処理の最後に「nowCount++;」をすることにより、現在のページ内で処理は一回までしか行われないようにします。
ここに注意！
処理が一回までしか行われないように記述をしないと、重複で処理が行われてしまうので、対策はしっかりと行う必要があります。
コメント