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