Почему страница на русском?
Этот блог начинался давно, когда писать материалы на английском языке для меня было сложно, и для достижения большей аудитории он велся на русском. Но с началом полномасштабного вторжения в феврале 2022 года я решил прекратить писать на этом языке. Моя страна переживает тяжелые времена, но мы с верой смотрим в будущее, и я больше не хочу поддерживать использование русского языка для новых материалов. Те статьи, что уже есть, остаются на сайте как часть истории блога, напоминая о предыдущих этапах его развития.Як і Україна, цей блог продовжує активно зростати та зміцнюватись без використання російської мови, незважаючи на всі випробування, і впевнено рухається до майбутнього 💙💛чт, 30 мая 2019 г.
Рассказывать о важности отслеживания скроллинга и времени на странице много не стоит. Чем больше информации о взаимодействии пользователей с контентом страницы мы соберем, тем лучше. К тому же лучше сразу с двух сторон:
Ранее я уже писал об отслеживании скроллинга с помощью встроенного функционала диспетчера тегов Google, а также о том, как оценить взаимодействие с контентом передавая событие, основанное на глубине прокрутки и времени проведенном на странице. Сегодня мы разберем еще одно решение, основанное на пользовательском JS скрипте. С помощью этого метода вы сможете передать информацию о максимальной глубине прокрутки и точном времени проведенном на странице. Нам понадобится следующее:
В Google Tag Manager существует стандартный триггер для отслеживания глубины прокрутки. Он имеет свой минус: данные отправляются в момент достижения порогового значения. Получается, что с помощью этого триггера нет возможности отследить максимальное значение процента скроллинга. Для того, чтобы обойти это ограничение, мы используем пользовательский скрипт, который добавим на сайт с помощью тега типа Пользовательский HTML.
Когда-то давно сам скрипт придумала Настя Тимошенко, а спустя несколько лет ее решение было мной улучшено. Ранее скрипт отслеживал время на странице просто измеряя разницу между временем наступления события beforeunload (моментом, перед выгрузкой страницы с браузера) и началом запуска на странице. Теперь, после усовершенствования, скрипт считает время только тогда, когда вкладка пользователя активна.
<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>
Для удобства дальнейшей работы с данными, в скрипте также описаны методы группировки значений в интервалы, которые вы можете отредактировать индивидуально под ваш проект. Для того, чтобы добавить скрипт на сайт, используйте тег со следующими настройками:
После создания тега перейдите в режим предварительного просмотра и попробуйте поймать событие beforeunload. Вы можете нажимать на кнопку обновления страницы - это действие будет инициировать нужное событие. При этом, стоит сразу же нажимать и кнопку Esc, чтобы предотвратить полную выгрузку страницы и загрузку новой. Ваша задача поймать следующую информацию в отладчике Google Tag Manager:
Нужное нам событие - Scroll to. Как видите, в момент этого события в dataLayer передается много интересной информации:
Скорее всего, вам не понадобится вся информация, которую передает скрипт, поэтому создайте переменные типа Data Layer только для тех ключей, которые вам необходимы.
Как вы уже знаете, при работе с уровнем данных, для получения значения вам необходимо создать соответствующую переменную. Ниже скриншоты каждой из таких переменных:
Если вы все сделали верно, то в режиме предварительного просмотра в момент события Scroll to ваши переменные будут хранить в себе нужные значения:
Выше я уже не раз говорил о событии Scroll to. Это пользовательское событие, на которое нам необходимо настроить триггер. Выглядит он следующим образом:
На этом наши приготовления закончены, осталось собрать все в теге передачи события в Google Analytics. Ниже представлен один из возможных примеров настройки передачи данных. В зависимости от целей вашего проекта вы можете передавать другие значения.
Решение, описанное в этой статье, позволит вам еще лучше понять, как посетители вашего сайта взаимодействуют с контентом на нем, а также настроить аудитории ремаркетинга на основе собранных данных. Если у вас остались вопросы по настройке - задавайте их в комментариях.