Робота з спеціальними подіями в Google Tag Manager. Тег автоподії

Google Tag Manager дозволяє відстежити величезну кількість подій, що відбуваються на сторінці, за допомогою стандартних тригерів, але в деяких випадках їх недостатньо. Тоді на допомогу приходить передача спеціальних подій і відповідний тригер для їх відстеження. Завдяки їм можна відстежити будь-які дії користувача: від додавання товару до кошика до натискання певної кнопки на клавіатурі.

Як працює тригер Custom Event
Передача даних про користувацьку подію в dataLayer
- Пишемо ТЗ програмісту
- Передаємо самостійно за допомогою тега типу Користувацький тег HTML
Тег автоподії

Перед тим як ми почнемо, давайте розберемо, як працюють вбудовані тригери основних подій.

Примітка! Інформація нижче описує лише один невеликий аспект роботи тригерів. Насправді їхня робота складніша.

Кожен із тригерів чекає, коли в dataLayer переміститься інформація про відповідну подію. Якщо ви проводили дебаг налаштування тегів, то швидше за все помічали цю інформацію у дебагеррі:

При цьому кожен тригер очікує на якусь свою подію. Наприклад:

1. - DOM Ready очікує появи події gtm.dom;
  - Element Visibility – події gtm.elementVisibility;
  - а Just Links – події gtm.linkClick.

Оскільки кожен із встановлених тригерів чекає на якусь свою подію, то для всіх інших і використовується тригер Спеціальна подія (Custom Event).

Як працює тригер Custom Event

Налаштування тригера типу Спеціальна подія (Custom Event) одне з найпростіших завдань у Google Tag Manager. Все, що вам потрібно – це ввести ім’я користувацької події в відповідне поле і дати назву тригеру.

Єдина опція в цьому налаштуванні – це можливість використовувати регулярний вираз для вибору декількох користувацьких подій.

Ну і стандартна можливість Активувати тригер тільки за певних умов.

Передача даних про користувацьку подію в dataLayer

Ми з’ясували як нам створити тригер на основі користувацької події, але як говорив один персонаж: “Щоб продати щось непотрібне, потрібно спочатку купити щось непотрібне”. У цьому випадку ситуація така сама: щоб подія відбувалася, її спочатку треба передати. Рішень два: написати ТЗ програмісту, який передасть потрібну інформацію на рівень даних (dataLayer), або налаштувати передачу даних самостійно.

Яким би шляхом ви не пішли, рекомендую попередньо ознайомитись з базовими принципами роботи з dataLayer та рівнем даних.

Пишемо ТЗ програмісту

Для передачі даних про подію використовуйте наступний фрагмент коду:

<script>

   window.dataLayer = window.dataLayer || [];

   window.dataLayer.push({ 'event' : 'YOUR_CUSTOM_EVENT_NAME'});

</script>

Де замість YOUR_CUSTOM_EVENT_NAME вкажіть назву події. Момент, коли ви передаватимете дані, ви визначаєте самостійно та додатково описуєте програмісту. Наприклад, надсилати ці дані в момент успішної відправки форми.

Передаємо самостійно за допомогою тега типу Користувацький тег HTML

Якщо ви хочете передати інформацію про виконання якоїсь події через GTM, то найкраще для цієї мети підійде тег типу Користувацький HTML (Custom HTML). Фрагмент коду передачі буде аналогічним попередньому. Не забудьте лише вибрати правильний тригер.

Здебільшого користувацькі рішення, які стосуються відстеження різних дій, якраз і будуються на такій передачі інформації. Наприклад, відстеження введення даних у поля форми або відстеження глибини скролінгу та часу на активній вкладці.

Тег автоподії в Google Tag Manager

Окремим блоком при роботі з тригером спеціальної події є налаштування тега автоподії. Плюс цього підходу в тому, що інформацію про всі події користувача і їх властивості, ви передаєте за заздалегідь підготовленим шаблоном. Це значно зменшує кількість тегів, та й тригерів також. Принцип роботи дуже простий:

1. - Налаштовуємо Змінні рівня даних для зберігання потрібної інформації;
  - Створюємо тригер спеціальної події;
  - Створюємо тег передачі автоподії в Google Analytics;
  - Налаштовуємо тег передачі інформації на рівень даних (dataLayer).

Налаштовуємо Змінні рівня даних для зберігання потрібної інформації

Нам знадобиться чотири змінні для зберігання інформації про:

1. - категорії події:
  - дії події:
  - ярлику події:
  - значення параметра Не взаємодія:

Створюємо тригер типу Custom Event

Наступним кроком створюємо тригер для нашої користувацької події. Назва події autoEvent :

Створюємо тег передачі автоподії у Google Analytics

Нам знадобиться тег типу Google Analytics – Universal Analytics з наступними налаштуваннями:

Налаштовуємо тег для передачі на рівень даних

Залишилося лише правильно передавати дані на рівень даних. Решту за нас зробить тег автоподії. Структура коду передачі наступна:

<script>
       dataLayer.push ({
                        'event':'autoEvent',
                        'eventCategory':'Value1',
                        'eventAction':'Value2',
                        'eventLabel':'Value3',
                        'eventNonInteraction':'Value4'
                        })
</script>

Де замість Value1, Value2 та Value3 можна передавати будь-яке значення, а замість Value4 одне з двох логічних – true/false.

Залишилося написати обробники до цікавих для нас подій і налаштування готове. На скріншоті нижче ви бачите реалізацію відстеження взаємодії з формою за допомогою автоподії. Звичайно ж, перелік дій, що відстежуються, може бути значно більшим.

Замість висновку

Тригер Custom Event – один з основних при налаштуванні відстеження за допомогою диспетчера тегів. На ньому будується величезна кількість кастомних рішень. І якщо ви дійсно хочете використовувати тег менеджер на повну силу, обов’язково навчіться розуміти принципи його роботи.

Запитання, які у вас залишилися, сміливо пишіть в коментарі.