Почему страница на русском?
Этот блог начинался давно, когда писать материалы на английском языке для меня было сложно, и для достижения большей аудитории он велся на русском. Но с началом полномасштабного вторжения в феврале 2022 года я решил прекратить писать на этом языке. Моя страна переживает тяжелые времена, но мы с верой смотрим в будущее, и я больше не хочу поддерживать использование русского языка для новых материалов. Те статьи, что уже есть, остаются на сайте как часть истории блога, напоминая о предыдущих этапах его развития.Як і Україна, цей блог продовжує активно зростати та зміцнюватись без використання російської мови, незважаючи на всі випробування, і впевнено рухається до майбутнього 💙💛
вс, 19 мая 2019 г.
Улучшенный триггер таймера в Google Tag Manager: запускаем таймер по времени активности вкладки
Одна из главных проблем маркетологов и веб-аналитиков - большое количество параллельно открытых вкладок в браузерах пользователей.
Именно они и не позволяют посетителям сконцентрироваться только на нашем контенте. Поэтому, маркетологи придумывают различные “уловки”, чтобы удерживать внимание пользователей. Еще большей проблемой это является для аналитика: при таком количестве вкладок нельзя быть уверенным, что пользователь все время от начала загрузки до определенного момента провел на странице.
В итоге могут возникать абсурдные ситуации:
- Маркетолог хочет показать окно со спец. предложением пользователю, который пробыл на странице больше 2 минут. Пользователь открыл страницу и переключился на соседнюю вкладку. Спустя 5 минут вернулся и сразу видит специальное предложение. Особенно забавно это выглядит в таких случаях:
- Аналитик хочет собрать аудиторию людей, которые провели на определенной странице больше 3 минут, чтобы в дальнейшем догнать их ремаркетингом. Для этого он настраивает триггер таймера на 3 минуты и отправляет соответствующее событие в Google Analytics. Пользователь открывает несколько вкладок, на одной из них в течении 5 минут находит ответ на свой вопрос и закрывает все, включая нашу. Такой пользователь попадет в новосозданную аудиторию, хотя реально на странице даже не был.
Подобные примеры можно приводить бесконечно, но лучше показать решение. Как видите, обычный триггер таймера в Google Tag Manager уже не кажется таким прекрасным, поэтому давайте напишем свой.
Настройка таймера по времени активности вкладки
В этом решении будем использовать Page Visibility API с помощью которого мы можем отследить активна вкладка на данный момент или нет. В моменты активной вкладки таймер работает, в противном случае таймер ставится на паузу. Спасибо Eugen Hardysh, который помог написать этот код.
<script>
(function($) {
$.fixTime = function() {
var dateObj = new Date();
return Math.floor(dateObj.getTime() / 1000);
}
})(jQuery);
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() {
/* Через сколько секунд после загрузки окна отправлять данные в dataLayer? */
TIME_WHEN_SEND_DATA = 30;
// дальше тело скрипта
invisibility_time = 0;
window_invisibility_time = 0;
document.addEventListener('visibilitychange', onVisibilityChange, false);
if (document.visibilityState === "visible") {
if (typeof dataLayer === 'undefined') {
console.log('dataLayer НЕ ОПРЕДЕЛЁН!!!');
} else {
var startLiveDoc = jQuery.fixTime();
var check_time = function() {
if (document.visibilityState === "visible" && jQuery.fixTime() - startLiveDoc - window_invisibility_time === TIME_WHEN_SEND_DATA) {
dataLayer.push({
'event': 'active_time_' + TIME_WHEN_SEND_DATA
});
} else {
setTimeout(check_time, 1000);
}
};
check_time();
}
}
});
</script>Вам всего лишь нужно изменить значение переменной TIME_WHEN_SEND_DATA. Время необходимо указать в секундах. Давайте настроим это. Нам понадобится тег типа Пользовательский HTML, в который мы поместим наш скрипт и триггер пользовательского события.
Для тега со скриптом будем использовать триггер All Pages. Так как мы с вами делаем таймер, его не обязательно запускать сразу при загрузке страницы. При необходимости вы можете использовать и другие триггеры.
Обратите внимание на название пользовательского события: в конце в нем всегда будет подставляться значение таймера в секундах, например, в нашем случае 30.
Можете также изменить информацию, которая передается в dataLayer, чтобы хранить время таймера в отдельной переменной. Например, так:
dataLayer.push({
'event': 'active_time',
'time': TIME_WHEN_SEND_DATA
});Конечно, такое решение не позволит отследить посетителей, которые открыли вкладку и пошли делать себе кофе, но оно в любом случае сделает ваши данные более точными.
Вы также можете узнать, как с помощью данного решения можно улучшить измерение показателя отказов на вашем сайте.
Вебаналитик, Маркетолог