Відстеження глибини скролінгу та часу на активній вкладці за допомогою Google Tag Manager

<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%';
   }

   //Назначаємо характеристику читачу статті виходячи з глибини скролінгу і часу на сторінці

   function getCharacters(deep, time) {
       if (/Android|webOS|Windows Phone|Macintosh|Samsung|Nokia|Bada|Symbian|iPhone|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
           var etalon = 21.1;
       else
           var etalon = 15.7;
       var documentH = jQuery(document).height();
       var etalonT = Math.floor(documentH / etalon, 2);

       if (deep >= 70 && time >= 0.7 * etalonT)
           return 'Читал вдумчиво';
       if (deep >= 70 && time < 0.7 * etalonT)
           return 'Читал по диагонали';
       if (deep < 10)
           return 'Не читал вовсе';
       if (deep >= 40 && deep < 70 && time >= 0.5 * 0.7 * etalonT)
           return 'Бросил читать на середине';
       if (deep >= 10 && deep < 40 && time >= 0.25 * 0.7 * etalonT)
           return 'Бросил читать в начале';
       if (deep >= 40 && deep < 70 && time < 0.5 * 0.7 * etalonT)
           return 'Просмотрел материал до середины';
       if (deep >= 10 && deep < 40 && time < 0.25 * 0.7 * etalonT)
           return 'Начал просматривать, но бросил в начале';
   }

   // Функція підрахунку часу неактивності вікна

   function onVisibilityChange() {
       var current_timestamp;

       if (document.visibilityState == "hidden") {
           invisibility_time = jQuery.fixTime();
       } else {
           current_timestamp = jQuery.fixTime();
           window_invisibility_time += (current_timestamp - invisibility_time);
       }
   }

   //Виконуємо виклик описаних вище функцій і передаємо дані в GTM

   jQuery(document).ready(function() {

       // запускаємо всі лічильники як тільки вікно стало активним (вперше)

       if (document.visibilityState == "visible")
       {
           window_invisibility_time = 0; // час, коли вікно було не активним
           document.addEventListener('visibilitychange', onVisibilityChange, false); // запускаємо прослуховувач активності вікна

           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 time_on_page_active = jQuery.timeFormat(endLiveDoc - startLiveDoc - window_invisibility_time);
               var character = getCharacters(current_max, endLiveDoc - startLiveDoc  - window_invisibility_time);
               var percent_of_scrolling_int = getScrollingInterval(current_max);

               var time_on_page_int = getTimeInterval(endLiveDoc - startLiveDoc);
               var time_on_page_int_active = getTimeInterval(endLiveDoc - startLiveDoc - window_invisibility_time);
               dataLayer.push({'event': 'Scroll to', 'percent_of_scrolling': current_max_string, 'time_on_page': timeLiveDoc, 'character' : character, 'percent_of_scrolling_interval' : percent_of_scrolling_int, 'time_on_page_interval' : time_on_page_int, 'time_on_page_active': time_on_page_active, 'time_on_page_interval_active' : time_on_page_int_active, 'time_invisibility' : window_invisibility_time});
           });
       }
   });
</script>