問題 × 解決策

イベントトラッキングで、フッターまでスクロールしたらカウントさせる

問題

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

コメント

コメントを残す

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

13 − 12 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧