Shoora
4/6/2019 - 6:42 PM

Отслеживание глубины скроллинга и времени на странице

Отслеживание глубины скроллинга и времени на странице


(function($){"use strict";
//определяем максимальную глубину скроллинга и функции обработки времени
$.scrollEvent = function(current_max) {
var documentObj = $(document);
var windowObj = $(window);
var documentHeight = documentObj.height();
var windowHeight = windowObj.height();
var currentHeight = windowHeight + documentObj.scrollTop();
current_value = getPercent(documentHeight, currentHeight);
return(current_max > current_value ? current_max : current_value);
}
$.fixTime = function() {
var dateObj = new Date();
return Math.floor(dateObj.getTime() / 1000);
}
function num(val){
val = Math.floor(val);
return val < 10 ? '0' + val : val;
}
$.timeFormat = function(ms){
var sec = ms, hours = sec / 3600 % 24, minutes = sec / 60 % 60, seconds = sec % 60;
return num(minutes) + ":" + num(seconds);
};
function getPercent(doc, cur) {
return !cur ? 0 : Math.floor(cur * 100 / doc);
}
})( jQuery );
//Определяем временные интервалы
function getTimeInterval(time) {
    if (time >= 0 && time < 30)
   	 return 'from 0 sec to 30 sec';
    if (time >= 30 && time < 60)
   	 return 'from 30 sec to 1 min';
    if (time >= 60 && time < 120)
   	 return 'from 1 min to 2 min';
    if (time >= 120 && time < 180)
   	 return 'from 2 min to 3 min';
    if (time >= 180 && time < 300)
   	 return 'from 3 min to 5 min';
    if (time >= 300 && time < 480)
   	 return 'from 5 min to 8 min';
    if (time >= 480)
   	 return 'more 8 min';
}
//Определяем интервалы глубины скроллинга
function getScrollingInterval(deep) {
    if (deep >= 0 && deep < 20)
   	 return '0% to 20%';
    if (deep >= 20 && deep < 40)
   	 return '20% to 40%';
    if (deep >= 40 && deep < 60)
   	 return '40% to 60%';
    if (deep >= 60 && deep < 80)
   	 return '60% to 80%';
    if (deep >= 80 && deep <= 100)
   	 return '80% to 100%';
}
//Осуществляем вызов вышеописанных функций и передаем данные в GTM
jQuery(document).ready(function() {
    var startLiveDoc = jQuery.fixTime();
    var current_max = 0;
    jQuery(window).scroll(function() {
    current_max = jQuery.scrollEvent(current_max);
    });
//назначаем объекту window событие, действие которого выполнится в момент завершения работы пользователя со страницей (закрытие, обновление, переход на другую страницу)
    jQuery(window).bind('beforeunload', function(){
   	 current_max_string = current_max.toString() + '%';
   	 var endLiveDoc = jQuery.fixTime();
   	 var timeLiveDoc = jQuery.timeFormat(endLiveDoc - startLiveDoc);
   	 var percent_of_scrolling_int = getScrollingInterval(current_max);
   	 var time_on_page_int = getTimeInterval(endLiveDoc - startLiveDoc);
	 
	 ga('send', 'event', 'MYMY', percent_of_scrolling_int, timeLiveDoc, time_on_page_int, current_max_string);
    });
});
<script>(function ( $ ) {

//определяем максимальную глубину скроллинга и функции обработки времени
$.scrollEvent = function(current_max) {
var documentObj = $(document);
var windowObj = $(window);

var documentHeight = documentObj.height();
var windowHeight = windowObj.height();
var currentHeight = windowHeight + documentObj.scrollTop();

current_value = getPercent(documentHeight, currentHeight);
return(current_max > current_value ? current_max : current_value);
}

$.fixTime = function() {
var dateObj = new Date();
return Math.floor(dateObj.getTime() / 1000);
}

function num(val){
val = Math.floor(val);
return val < 10 ? '0' + val : val;
}

$.timeFormat = function(ms){
var sec = ms, hours = sec / 3600 % 24, minutes = sec / 60 % 60, seconds = sec % 60;
return num(hours) + ":" + num(minutes) + ":" + num(seconds);
};


function getPercent(doc, cur) {
return !cur ? 0 : Math.floor(cur * 100 / doc);
}

})( jQuery );

//Определяем временные интервалы
function getTimeInterval(time) {
    if (time >= 0 && time < 30)
   	 return 'from 0 sec to 30 sec';
    if (time >= 30 && time < 60)
   	 return 'from 30 sec to 1 min';
    if (time >= 60 && time < 120)
   	 return 'from 1 min to 2 min';
    if (time >= 120 && time < 180)
   	 return 'from 2 min to 3 min';
    if (time >= 180 && time < 300)
   	 return 'from 3 min to 5 min';
    if (time >= 300 && time < 480)
   	 return 'from 5 min to 8 min';
    if (time >= 480)
   	 return 'more 8 min';
}

//Определяем интервалы глубины скроллинга
function getScrollingInterval(deep) {
    if (deep >= 0 && deep < 20)
   	 return 'from 0% to 20%';
    if (deep >= 20 && deep < 40)
   	 return 'from 20% to 40%';
    if (deep >= 40 && deep < 60)
   	 return 'from 40% to 60%';
    if (deep >= 60 && deep < 80)
   	 return 'from 60% to 80%';
    if (deep >= 80 && deep <= 100)
   	 return 'from 80% to 100%';
}

//Осуществляем вызов вышеописанных функций и передаем данные в GTM
jQuery(document).ready(function() {
    var startLiveDoc = jQuery.fixTime();
    var current_max = 0;

    jQuery(window).scroll(function() {
    current_max = jQuery.scrollEvent(current_max);
    });

//назначаем объекту window событие, действие которого выполнится в момент завершения работы пользователя со страницей (закрытие, обновление, переход на другую страницу)
    jQuery(window).bind('beforeunload', function(){
   	 current_max_string = current_max.toString() + '%';
   	 var endLiveDoc = jQuery.fixTime();
   	 var timeLiveDoc = jQuery.timeFormat(endLiveDoc - startLiveDoc);
   	 var percent_of_scrolling_int = getScrollingInterval(current_max);
   	 var time_on_page_int = getTimeInterval(endLiveDoc - startLiveDoc);
   	 dataLayer.push({'event': 'Scroll to', 'percent_of_scrolling': current_max_string, 'time_on_page': timeLiveDoc, 'percent_of_scrolling_interval' : percent_of_scrolling_int, 'time_on_page_interval' : time_on_page_int});
    });
});
</script>