Відстеження видимості елементів за допомогою Google Tag Manager
Нещодавно в Google Tag Manager з’явилася можливість активувати теги в момент, коли певний елемент сторінки потрапляє у видиму область вікна браузера. Це надзвичайно корисна функція, оскільки поява об’єкта на екрані з великою ймовірністю свідчить про те, що він потрапив у поле зору користувача.
Завдяки цьому ми можемо точніше розуміти, як відвідувачі взаємодіють зі сторінками та які важливі блоки залишаються поза увагою.
1. Основні налаштування триггера
Щоб почати роботу, створіть новий триггер і виберіть тип «Доступність елемента».
Метод вибору елемента
Ви можете ідентифікувати об’єкт двома способами:
- ID атрибут: вибирається один конкретний елемент (перший на сторінці з таким ID).
- Селектор CSS: дозволяє вибрати один або кілька елементів за шаблоном (наприклад, за класом чи ієрархією). Можна вказати кілька селекторів через кому.
Правила запуску
GTM пропонує три варіанти активації:
Один раз на сторінку: триггер спрацює лише один раз, навіть якщо об’єктів кілька або користувач постійно скролить туди-сюди.
Один раз на елемент: якщо кілька елементів відповідають селектору, триггер спрацює для кожного з них окремо, коли той вперше з’явиться на екрані.
Під час кожної появи елемента на екрані: спрацьовує щоразу, коли об’єкт потрапляє у видиму зону.
2. Додаткові параметри
Додаткові параметри триггера
Ці налаштування дозволяють уточнити умови, за яких фіксується перегляд елемента, щоб уникнути помилкових спрацьовувань.
Мінімальний відсоток видимості Цей показник визначає, яка частина вибраного елемента має з’явитися на екрані, щоб триггер активувався. Наприклад, якщо встановити 50%, то подія не зарахується, поки користувач не побачить принаймні половину об’єкта.
Мінімальний час видимості Вказує, протягом якого часу елемент повинен перебувати у видимій області для запуску триггера.
- Значення вказується у мілісекундах (наприклад, 2000 мс = 2 секунди).
- Особливість: якщо протягом перебування на одній сторінці елемент з’являвся, потім зникав (скролінг вгору-вниз) і знову з’являвся, час цих періодів видимості підсумовується.
Реєстрація змін DOM Ця функція дозволяє відстежувати елементи, які з’являються на сторінці динамічно.
- Навіщо це потрібно: корисно для об’єктів, яких не було в структурі сторінки (DOM) у момент її початкового завантаження (наприклад, контент, що з’являється після натискання кнопки без перезавантаження сторінки або спливаючі повідомлення).
Важливо: при активації «Мінімального часу видимості» або «Реєстрації змін DOM» слід враховувати, що це може дещо підвищити навантаження на ресурси браузера користувача.
3. Практичні приклади використання
Приклади використання тригера доступності елемента
Розглянемо практичні приклади. Наприклад, для сайту odesseo.com.ua мені потрібно налаштувати тег, який буде надсилати подію в Google Analytics у разі, коли контактні дані (номер телефону, адреса, email) з’являться у видимій частині екрана.
Налаштування ідентифікації елемента Створюємо тригер типу «Доступність елемента». Для того, щоб ідентифікувати блок контактних даних, я скористаюся селектором CSS. У цьому випадку мені зручно зробити це за класом.
Таким чином, за допомогою селектора .contacts я однозначно ідентифікую потрібний блок.
Параметри активації Для цього прикладу я обираю наступні налаштування:
- Правило активації: «Один раз на сторінку».
- Мінімальний відсоток видимості: 80%.
- Мінімальний час: 5 секунд (5000 мілісекунд).
Ці параметри ви обираєте самостійно, залежно від ваших завдань.
Створення тегу Далі нам потрібно створити тег, який буде надсилати дані в Google Analytics у момент, коли блок контактів буде видимим на екрані не менше 5 секунд:
- Додаємо новий тег типу «Universal Analytics».
- У меню вибору типу відстеження вказуємо «Подія».
Процес створення цього тега аналогічний створенню звичайного тега відправки подій, а умовою активації буде створений вище тригер. Якщо раніше ви не стикалися з відстеженням подій у Google Tag Manager, вам буде корисна ця стаття, де докладно розглянуто створення різних типів тегів.
Робота з вбудованими змінними
При активації тригера видимості у вбудованих змінних зберігаються фактичні значення:
- «Відсоток видимості»: число від 0 до 100, яке показує, який відсоток потрібного елемента був у видимій області.
- «Час видимості»: число, яке показує, скільки часу вибраний елемент перебував у видимій області (вказується в мілісекундах).
Щоб скористатися цими змінними, їх потрібно попередньо активувати — перейти на вкладку «Змінні» в інтерфейсі GTM і в конфігурації вбудованих змінних установити потрібні чекбокси.
Приклад: Відстеження конкретного банера у «каруселі»
Часто на сайтах присутній елемент «карусель», завдяки якому користувачеві можна по черзі показувати різні банери зі спецпропозиціями, акціями тощо. Розглянемо завдання відстеження факту появи одного конкретного банера (наприклад, про нові надходження товару), якщо він не завантажується першим під час відкриття сторінки.
Налаштування тригера: Аналогічно до попередніх кроків, створюємо новий тригер типу «Доступність елемента». Як метод вибору скористаємося селектором CSS. Для визначення банера з новими надходженнями підійде селектор виду:
.slideshow a[href*="/novye-postupleniya/"]
- За допомогою конструкції
.slideshowми виділяємо блок, у якому відбувається зміна банерів. - Додаючи вираз
a[href*="/novye-postupleniya/"], ми вказуємо, що нас цікавить лише банер із посиланням на нові надходження.
Важливий нюанс: Як я вже зазначала вище, для фіксації динамічних змін у структурі сторінки нам потрібно встановити чекбокс «Реєстрація змін DOM» (у блоці додаткових налаштувань тригера). Це дозволить GTM «побачити» банер у момент його появи в каруселі.
Залишилося додати тег відправки даних в аналітику — і налаштування завершено.
Підсумок
GTM продовжує розвиватися і цього разу порадував нас чудовою новою функцією, яка відкриває низку цікавих можливостей для відстеження та дозволяє реалізувати їх без великих зусиль. Упевнена, подібні нововведення від GTM тішать не лише мене, а й інших любителів детально аналізувати свої проєкти.
Дякую за прочитання!