Курс Google Analytics → Анализ просмотренных блоков страницы

В виду особенности технической реализации счетчиков, время на странице определяется как разница между временем посещения одной страницы и посещением следующей.

Если пользователь зашел на одностраничный сайт и вышел — то второй страницы просто нет, и временем на сайте будет время последнего переданного события в систему веб аналитики. А если событий не было, то и время посещения определить не возможно.

Но как же получить более внятную статистику о времени посещения одностраничника?

Можно посмотреть записи Вебвизора в Метрике, там будет правильное время, но там нет вариантов обобщить полученные данные.

Есть карты скролинга страниц, но к ним нельзя применить фильтры и сегменты. Например, если вы захотите выделить только пользователей, зашедших на сайт по определенному ключу с определенной кампании и посмотреть «общий срез» их поведения (скролят ли они вообще, внимательно читают или просто покидают сайт), то это окажется проблематичной задачей.

У меня возникла идея разбить всю страницу на блоки по разделам страницы, и когда «взгляд» пользователя попадает в нужный раздел, считать, что он в данный момент его просматривает.  Так как обычно одностраничные сайты длинные, то при скроллинге через экран проходит последовательно много разделов (блоков страницы).

Так как взгляд посетителя нам поймать не получиться, то нужно определить «зону чтения» или «зону просмотра». Обычно, когда читают страницу, читаемый текст находится в верхней половине экрана. Для реализации я взял 25% от верха окна браузера, в коде вы можете задать своё значение.

Теперь, если хотя бы часть нужного нам блока (раздела сайта) попала на линию, на уровне 25%, то будем считать, что пользователь видит этот блок. При первом «просмотре» блока будем передавать в метрику и аналитику «событие» о посещении «виртуальной страницы». Если пользователь скролит до следующего блока, то как только новый блок попадает в 25%, передаем просмотр новой виртуальной страницы.

Для систем веб анализа наш одностраничный сайт превращается в «многостраничный», а раз так, то появляется «просмотры» и время посещения «виртуальной» страницы, в нашем случае — раздела сайта. А эти данные уже можно легко можно обработать стандартными методами и построить нужные отчеты.

Ниже пример отчета Google Analytics о поведении на страницах:

Теперь видно, что одни блоки просто я проскролил, а на других задержался, а на некоторые вернулся назад. Причем можно построить любые сегменты и отчеты для анализа в Google Analytics. В метрике, даже в новой, такой отчет сразу получить нельзя 🙁 , нужно делать отдельные сегменты, надеюсь яндекс допилит в дальнейшем свою Метрику 2.0.

Для реализации «виртуального многостраничного сайта» потребуется javascript код ниже:

window.onload=function(){  
  // Обзываем блоки как витруальные страницы 
    // 1 - ID веб-тега, например блока DIV
    // 2 - Передаваемый в метрику URL страницы
    // 3 - Передаваемое в метрику Название страницы - title

 var hitLinks= [
                //Страница по умолчанию
                ["main","/","Настройка контекстной рекламы Google AdWords и Яндекс.Директ"],
                //Остальные блоки как виртуальные страницы
                ["how","/virtual/how","Как это работает"],
                ["preim","/virtual/preim","Преимущества контекстной рекламы"],
                ["offer","/virtual/offer","Что мы предлагаем"],
                ["whatyouget","/virtual/whatyouget","Что Вы получите"],
                ["howwetune","/virtual/howwetune","Как мы настраиваем рекламные кампании"],
                ["orderform","/virtual/orderform","Форма заказа"],
                ["testimonial","/virtual/testimonial","Отзывы наших клиентов"],
                ["sertifikat","/virtual/sertifikat","Сертификаты специалистов"],
                ["waranty","/virtual/waranty","Гарантия возврата денег"]
                ];

                
//    global_ch - высота окна браузера             
 var global_ch=document.body.clientHeight;
 var global_wh=document.body.scrollHeight;
 var global_currentBlock = 0;
 var global_refererBlock = 0;
 //Добавляем в архив с блоками отступы самих блоков
hitLinks.forEach(function(value,i,arr) {
 var linkId=arr[i][0];
  hitLinks[i][3]=getElementPosition(linkId).top;
  hitLinks[i][4]=getElementPosition(linkId).top+getElementPosition(linkId).height;
});   
//получаем отступ блока от вверха и его высоту по ID блока
function getElementPosition(elemId){
   var elem = document.getElementById(elemId);
   var h = elem.offsetHeight;
   var t = 0;
   while (elem)
   {
     t += elem.offsetTop;
     elem = elem.offsetParent;
   }
   return  {"top":t, "height":h};
} 
 //Сравниваем значение скрола со всеми элементами
 window.onscroll = function() {
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    hitLinks.forEach(function(value,i,arr) {
    // viewLine - линия, по которой определяем, в каком блоке сейчас ноходимся, по умолчанию 25% (1/4) от верха 
    var viewLine = scrolled+global_ch/4;
    if (viewLine >= arr[i][3] && viewLine < arr[i][4]){
          if (i!==global_currentBlock) {
             global_refererBlock=global_currentBlock;
             global_currentBlock=i;
            //Для отладки
            //console.log ("yaCounterXXXXXX.hit("+hitLinks[global_currentBlock][1] +","+ hitLinks[global_currentBlock][2]  +","+hitLinks[global_refererBlock][1] +")");
            //.hit(url, [title], [referer], [params])
            //
            yaCounter17462314.hit(hitLinks[global_currentBlock][1] ,hitLinks[global_currentBlock][2]  ,hitLinks[global_refererBlock][1]);
            ga('send', 'pageview', { 'page': hitLinks[global_currentBlock][1] ,  'title': hitLinks[global_currentBlock][2]});
            }     
    }
    }); 
};
};

Названия блоков приведены для примера, они соответствуют ID блоков DIV и их названию на главной страницы этого сайта, на которой код и тестировался. Вместо них впишите свои данные. Также измените номер счетчика в строке с yaCounter17462314.hit на свой.

Скрипт должен располагаться после скриптов метрики и аналитики.

Источник: https://esliklientov.net/articles/веб-аналитика/отслеживание-времени-посещения-на-landig-page.html