нд, 19 травня 2019 р.
Покращений тригер таймера в Google Tag Manager: запускаємо таймер за часом активності вкладки
Одна з головних проблем маркетологів і вебаналітиків — велика кількість одночасно відкритих вкладок у браузерах користувачів.
Саме вони не дають відвідувачам сконцентруватися лише на нашому контенті. Тому маркетологи вигадують різні "хитрощі", щоб утримати увагу користувачів.
Ще більшою проблемою це є для аналітика: при такій кількості вкладок не можна бути впевненим, що користувач увесь час — від початку завантаження до певного моменту — провів на сторінці.
У результаті можуть виникати абсурдні ситуації:
- Маркетолог хоче показати вікно зі спецпропозицією користувачу, який пробув на сторінці понад 2 хвилини. Користувач відкрив сторінку й перемкнувся на сусідню вкладку. Через 5 хвилин повернувся — і одразу бачить спецпропозицію. Особливо смішно це виглядає у таких випадках:
- Аналітик хоче зібрати аудиторію людей, які провели на певній сторінці понад 3 хвилини, щоб надалі “наздогнати” їх ремаркетингом. Для цього він налаштовує тригер таймера на 3 хвилини й надсилає відповідну подію в Google Analytics 4. Користувач відкриває кілька вкладок, на одній із них протягом 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. Час вказується в секундах.
Давайте налаштуємо це. Нам знадобиться тег типу Custom HTML (Користувацький тег HTML), у який ми вставимо наш скрипт, і тригер користувацької події.
Для тега зі скриптом я використаю тригер All Pages. Але оскільки ми створюємо таймер, його не обов’язково запускати одразу при завантаженні сторінки. За потреби можна використовувати й інші тригери.
Зверніть увагу на назву користувацької події, яка буде відпрацьовувати в момент спрацювання таймера: у кінці завжди підставлятиметься значення таймера в секундах, наприклад, у нашому випадку — 30.
Ви також можете змінити інформацію, яка передається в dataLayer, щоб зберігати час таймера в окремій змінній. Наприклад, так:
dataLayer.push({
'event': 'active_time',
'time': TIME_WHEN_SEND_DATA
});Звісно, таке рішення не дозволить відстежити відвідувачів, які відкрили вкладку й пішли готувати собі каву, але в будь-якому випадку воно зробить ваші дані точнішими.
Ви також можете дізнатися, як за допомогою цього рішення можна покращити вимірювання показника відмов на вашому сайті.
Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.
Вебаналітик, Маркетолог