Якщо Ви працюєте з Tag Manager, то Ви рано чи пізно зіткнетеся з терміном "Data Layer", який при правильному використанні може відкрити масу можливостей для веб-аналітики.
Data Layer - це унікальна система передачі даних з сайту в Google Tag Manager, що включає в себе конкретний інформаційний масив.
Як це працює, або схема роботи Data Layer:
- Скрипт Data Layer, як правило імплементований в код з підвантаженням змінних з сайту;
- Google Tag Manager містить спеціальні обробники, які сканують дані блоку Data Layer і відправляють в контейнер тегів;
- Потім, дані в контейнері тегів розподіляються згідно його алгоритмам настройки.
Приклад розташування коду Data Layer наступний:
<script>
dataLayer = [];
</script>
Код, як правило містить змінні, які пов'язані з Google Tag Manager і тягнуть інформацію з сайту. Мовою програмістів це - додати змінні рівня даних, змінні що передають інформацію. Для прикладу розглянемо простий код електронної торгівлі Universal Analytics:
<script>
dataLayer = [{
'transactionId': '1234',
'transactionAffiliation': 'holostenko.ua',
'transactionTotal': 11.99,
'transactionTax': '1.29',
'transactionShipping': '5',
'transactionProducts': [{
'sku': 'DD44',
'name': 'T-Shirt',
'category': 'Apparel',
'price': 11.99,
'quantity': 1
}]
}];
</script>
Price, name, sku - ці змінні є в Google Tag Manager, і їх значення потім просто завантажуються в контейнер. Якщо випадок індивідуальний, або ж це нова функція, яка ще не прошита в TGM, то змінні необхідно спочатку створити в менеджері тегів.
- Код “dataLayer = []” зазвичай розміщується вище коду контейнера. Якщо він буде нижче, то дані в контейнер просто не запишуться.
- Оголошені змінні актуальні тільки на сторінці, на якій вони оголошені. Разове оголошення для всього сайту не актуально.
- Підвантаження Data Layer відбувається асинхронно і не перешкоджає завантаженню інших елементів сторінки.
Data Layer, event, push
Також, в роботі з "Data Layer" вагому роль відіграє спеціальна змінна "event", яка спрацьовує як тригер при настанні події, і відправляє відповідні дані.
Тригер - задана умова спрацьовування події в Google Tag Manager.
Спрацьовування події "event" здійснюється тільки з методом "push", і має такий вигляд:
dataLayer.push({'event': 'event_name'});
де "event_name" - назва події.
Якщо Ви помітили, то квадратні дужки, помінялися на круглі. Це особливість методу "push", який відправляє дані при певній дії, незалежно від місця розташування коду. Яскравий приклад був нами описаний в розташуванні кодів розширеної електронної торгівлі.
<script>
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
},
'event': 'gtm-ee-event',
'gtm-ee-event-category': 'Enhanced Ecommerce',
'gtm-ee-event-action': 'detail',
'gtm-ee-event-non-interaction': 'True',
});
</script>
Метод "Push" актуальний, коли Ви не знаєте, чи буде здійснено подія чи ні. І таким чином, дані відправляються тільки в тому випадку, коли буде здійснена конкретна дія типу: click, addtocart, event, або будь-яка інша, і за кодом вона може розташовуватися де завгодно.
В інтернеті можна зустріти вираз "window.dataLayer.push". Це універсальний спосіб, що дозволяє прописувати змінні в будь-якому місці. Але, ми його не використовуємо, так як строго дотримуємося рекомендацій Google Developer.
Ще кілька важливих моментів про Data Layer і змінні рівня даних:
- назви змінних чутливі до регістру;
- єдність способу підвантаження даних - не рекомендується відправляти дані відразу з декількох місць;
- на кожен ресурс рекомендується свій контейнер, крім випадку якщо це не ієрархічна доменна структура;
- одна сторінка - один контейнер, не рекомендується розміщувати кілька контейнерів на одній сторінці.
Якщо немає програміста і немає можливості розмістити код Data Layer. Як бути?
- підвантаження через теги подій Google Tag Manager з публікацією змінних;
- дані змінних завантажуються через селектори.
Даний спосіб не зовсім надійний, так як сучасні сайти мають динамічну структуру, і дані з селектора в певний момент можуть перестати надходити.
Сподіваємося, що ця стаття була для Вас корисною, і будемо радувати цікавими матеріалами на нашому блозі ще.
Замовити послугу