пт, 31 травня 2019 р.
Робота зі спеціальними подіями в Google Tag Manager. Тег автоподії
Оригінальна стаття була написана 31 травня 2019 року і йшлося в ній про передачу даних до Google Analytics Universal, але при переїзді блогу на нову CMS я вирішив оновити матеріал, до актуальної версії Google Analytics 4.
Google Tag Manager дозволяє відстежити величезну кількість подій, що відбуваються на сторінці, за допомогою стандартних тригерів, але в деяких випадках їх недостатньо. Тоді на допомогу приходить передача спеціальних подій і відповідний тригер для їх відстеження. Завдяки ним можна відстежити будь-які дії користувача: від додавання товару до кошика до натискання певної кнопки на клавіатурі.
- Як працює тригер Custom Event (Спеціальна подія)
- Передача даних про Custom Event (Спеціальну подію) в dataLayer
- Замість висновку
Перед тим як ми почнемо, давайте розберемо, як працюють вбудовані тригери основних подій.
Інформація нижче описує лише один невеликий аспект роботи тригерів. Насправді їхня робота значно складніша. Але це пояснення допоможе краще зрозуміти роботу тригера Custom Event (Спеціальна подія).
Кожен із тригерів чекає, коли в dataLayer переміститься інформація про відповідну подію. Якщо ви проводили дебаг налаштування тегів, то швидше за все помічали цю інформацію у дебагеррі:
При цьому кожен тригер очікує на якусь свою подію. Наприклад:
- DOM Ready (Модель DOM готова) очікує появи події gtm.dom;
- Element Visibility (Видимість елемента) - події gtm.elementVisibility;
- Just Links (Лише посилання) - події gtm.linkClick.
Оскільки кожен із встановлених тригерів чекає на якусь свою подію, то для всіх інших і використовується тригер Custom Event (Спеціальна подія).
Як працює тригер Custom Event (Спеціальна подія)
Налаштування тригера Custom Event (Спеціальна подія) одне з найпростіших завдань у Google Tag Manager. Тригер типу Custom Event (Спеціальна подія) реагує на об'єкти, які потрапляють у dataLayer і мають поле event.
Наприклад, ось такий пуш в dataLayer це все, що потрібно, щоб спрацював тригер Custom Event (Спеціальна подія) з іменем send_form:
dataLayer.push({
event: 'send_form'
});Тобто все, що вам потрібно – це ввести ім'я спеціальної події (фактично це значення з ключа event) в відповідне поле і дати назву тригеру.
Єдина опція в цьому налаштуванні - це можливість використовувати регулярний вираз для вибору декількох спеціальних подій.
Ну і стандартна можливість Активувати тригер тільки за певних умов з функцією This trigger fires on.
Передача даних про користувацьку подію в dataLayer
Ми з'ясували як нам створити тригер на основі кастомної події, але щоб подія відбувалася, її спочатку треба передати. Рішень два: написати ТЗ програмісту, який передасть потрібну інформацію на рівень даних (dataLayer), або налаштувати передачу даних самостійно. Нижче я розберу обидва варіанти.
Яким би шляхом ви не пішли, рекомендую попередньо ознайомитись з базовими принципами роботи з dataLayer та рівнем даних.
Пишемо ТЗ програмісту
Для передачі даних про подію використовуйте наступний фрагмент коду:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: 'YOUR_CUSTOM_EVENT_NAME' });
</script>Де замість YOUR_CUSTOM_EVENT_NAME вкажіть назву події. Момент, коли ви передаватимете дані, ви визначаєте самостійно та додатково описуєте програмісту. Наприклад, надсилати ці дані в момент успішної відправки форми.
За необхідності до подій можна також додавати параметри. Наприклад ось так може виглядати код успішної відправки форми з вказаною назвою форми:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'form_submit_success',
form_name: 'contact_form'
});
</script>Для того щоб отримати значення з додаткових параметрів, в нашому випадку з параметра form_name, можна скористатись змінною типу Data Layer Variable (Змінна рівня даних). Просто вкажіть назву потрібного параметра у відповідне поле:
Передаємо самостійно за допомогою тега типу Користувацький тег HTML
Якщо ви хочете передати інформацію в dataLayer про виконання якоїсь події через GTM, то найкраще для цієї мети підійде тег типу Custom HTML (Користувацький тег HTML). Фрагмент коду передачі буде аналогічним попередньому. Не забудьте лише вибрати правильний тригер.
Здебільшого користувацькі рішення, які стосуються відстеження різних дій, якраз і будуються на такій передачі інформації.
Наприклад, ось як передати подію form_change, коли користувач змінює значення у формі:
Код, який використовується в тезі нижче. Не забудьте вказати свої значення CSS-селектора форми або поля, зміни в якому вас цікавлять, замість YOUR_SELECTOR і додати тригер, який відповідає за запуск тега — наприклад DOM Ready.
<script>
(function() {
var formSelector = 'YOUR_SELECTOR';
var form = document.querySelector(formSelector);
if (form) {
form.addEventListener('change', function() {
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'form_change'
});
});
}
})();
</script>Більше таких прикладів тут: відстеження введення даних у поля форми або відстеження глибини скролінгу та часу на активній вкладці.
Замість висновку
Тригер Custom Event (Спеціальна подія) — один із ключових інструментів при налаштуванні відстеження за допомогою GTM. Custom Event (Спеціальна подія) — це спосіб реалізувати все, що не покривається стандартними тригерами. На ньому базується величезна кількість кастомних рішень: від валідації форм до складних сценаріїв взаємодії з інтерфейсом. Якщо ви хочете використовувати Google Tag Manager на повну силу — обов’язково розберіться в принципі передачі подій у dataLayer і роботі тригера Custom Event (Спеціальна подія).
І не забувайте, що чіткі та осмислені назви подій полегшують роботу з даними.
Якщо у вас залишилися запитання — сміливо пишіть у коментарі. Буду радий підказати.
Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.
Вебаналітик, Маркетолог