PPC 22 Minute

Datalayer в Google Tag Manager – що це таке і як працює?

Анастасія Тимошенко

25.09.2017

27 коментарів

DataLayer в Google Tag Manager

Google Tag Manager – це дуже функціональний та корисний інструмент у роботі інтернет-маркетологів. Завдяки йому більшість установок необхідних для роботи кодів рекламних систем та систем вебаналітики, а також різних кодів відстеження стало можливим без залучення веброзробників та втручання у код сайту. Але є ряд завдань, при яких для налаштування коректного відстеження необхідна передача даних без прив’язки до DOM-структури. У такому разі нам знадобиться використовувати спеціальну конструкцію – рівень даних (або dataLayer).

Що таке dataLayer (рівень даних)

Для початку розглянемо, що таке dataLayer.

DataLayer – це масив об’єктів JavaScript, за допомогою якого можна передавати потрібну інформацію в Google Tag Manager. Наприклад, це можуть бути різні змінні, події. В інтерфейсі GTM на підставі даних можна налаштовувати тригери, а також розширювати інформацію про відвідувачів сайту, що передається в Google Analytics. даними.

Як виглядає dataLayer

Розглянемо приклад dataLayer:

<script>

dataLayer = [{
'pageCategory': 'blog',
'author': 'Anastasiia'
}];

</script>

У цьому разі рівень даних є масив, який містить об’єкт, властивості якого є тими змінними, які ми передаємо необхідні нам значення. Так, якщо при завантаженні сторінки блогу я хочу передати в dataLayer тип сторінки та ім’я автора поточної статті, то я можу в змінну pageCategory передати значення ‘blog’, в author – ‘Anastasiia’.

Значенням змінної може виступати як рядок (укладається в лапки), так і інші типи значень: наприклад, числа, вкладені масиви та ін.

Важливо відзначити, що подібне оголошення рівня даних коректно працюватиме у випадку, якщо цей фрагмент коду буде розміщений до ініціалізуючого коду GTM.

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

<!-- End Google Tag Manager -->

У разі потреби ми можемо перевизначити назву масиву dataLayer. Для цього в коді, що ініціалізує, в рядку

потрібно замінити “dataLayer” на бажану назву.

Метод push для передачі даних

Передавати додаткові значення у рівень даних можна також і після коду ініціалізації. Оскільки dataLayer є масивом, то можна використовувати метод push() для додавання нових елементів.

dataLayer.push({'variableName': 'variableValue'});

Дана конструкція буде корисна, якщо ви хочете передати деякі дані не в момент завантаження сторінки, а при вчиненні користувачем певної дії (клік по кнопці, заповнення форми тощо)

Що таке event в dataLayer

Для відстеження різних дій користувача у GTM передбачена спеціальна змінна event. Event можна використовувати всередині обробника тієї чи іншої події.

dataLayer.push({'event': 'eventName'});

Наприклад, при натисканні на кнопку, що викликає вікно замовлення дзвінка, можна використовувати конструкцію:

<a href="#order" name="order-button" onclick="dataLayer.push({'event': 'order-button-click'});" >Замовити дзвінок</a>

Якщо таких кнопок на сторінці дві, у хедері та футері, тоді ми можемо доповнити нашу конструкцію, передавши уточнюючі значення, а саме:

<a href="#order" name="order-button" onclick="dataLayer.push({'event': 'order-button-click', 'position': 'top'});" >Замовити дзвінок</a>

Змінні рівня даних та користувацькі події в GTM

У GTM на підставі даних, що передаються за допомогою dataLayer, можна створювати змінні і тригери.

Як створити змінну рівня даних у GTM

Необхідно додати нову зміну користувача,

у якості її типу вибрати «Змінна рівня даних». У полі “Ім’я змінної рівня даних” вказати назву змінної, що фігурує в dataLayer (наприклад, наведеного вище, це variableName).

Як створити спеціальну подію в GTM

Потрібно додати новий тригер. У якості типу тригера потрібно вибрати “Спеціальна подія”

У полі “Ім’я події” вказати ім’я події, яке фігурує в dataLayer (для прикладу, наведеного вище, це eventName).

Як перевірити вміст рівня даних

Щоб перевірити, що передається в dataLayer, можна скористатися консоллю на панелі інструментів розробника.

Для того, щоб перейти в консоль, потрібно клікнути правою кнопкою миші на будь-якій області вебсторінки, потім в меню вибрати “проінспектувати елемент” і перейти на вкладку Console.

Далі в консолі написати dataLayer та натиснути Enter.

Нижче буде представлено внутрішню структуру масиву.

За стандартними налаштуваннями Диспетчер тегів Google передає на рівень даних наступний набір значень:

gtm.js – передається в той момент, коли Google Tag Manager готовий до роботи.

gtm.dom – передається у момент, коли готова модель DOM.

gtm.load – передається у момент, коли вікно повністю завантажено.

Після налаштування передачі даних у dataLayer, їх також будуть видно в структурі масиву в консолі при завантаженні сторінки або після виконання заданої дії.

Розглянемо приклад

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

Для цього нам потрібно, щоб при успішному надсиланні цієї форми в масив dataLayer додавалася подія, наприклад, назвемо її ordercall. Тоді конструкція з dataLayer набуде наступного вигляду:

dataLayer.push({'event': 'ordercall'});

Для того, щоб перевірити коректність передачі даних, скористаємося консоллю.

Бачимо, що при успішному надсиланні форми замовлення дзвінка, івент ordercall додається до рівня даних.

Тепер в інтерфейсі Google Tag Manager ми зможемо створити тригер типу “Угода користувача” для відправки даних в Google Analytics або іншу систему аналітики.

Приклади використання dataLayer

Розглянемо кілька прикладів використання рівня даних.

• Відстеження надсилання форм

В статті “Вчимося працювати в GTM”  в пункті, присвяченому відстеженню відправки форм я вже докладно розповідала, як використовувати dataLayer для трекінгу форм, що відправляють дані за допомогою ajax. 

• Відстеження e-commerce‎

Не обійтися без рівня даних і при встановленні електронної торгівлі на сайтах інтернет-магазинів. На сторінці успішного оформлення замовлення необхідно розмістити наступний код:

<script>

dataLayer = [{
'transactionId': '123456',                              //id транзакції
'transactionAffiliation': 'best-flowers',           //найменування магазину
'transactionTotal': '20',                                 //сума транзакції
'transactionTax': '1.99',                                //податок
'transactionShipping': '1.99',                       //доставка
'transactionProducts': [{                              
'sku': 'AA11',                                               //артикул товару
'name': 'rose',                                             //найменування товару
'category': 'red',                                          //категорія товару
'price': '20',                                                 //ціна товару
'quantity': '1'                                               //кількість
}]
}];

</script>

Не обійтися без рівня даних та при встановленні електронної торгівлі на сайтах інтернет-магазинів. На сторінці успішного оформлення замовлення необхідно розмістити наступний код:

dataLayer.push({
'event': 'transactionComplete',                     //подія здійснення транзакції
'transactionId': '123456',                              //id транзакции
'transactionAffiliation': 'best-flowers',           //найменування магазину
'transactionTotal': '20',                                 //сума транзакції
'transactionTax': '1.99',                                //податок
'transactionShipping': '1.99',                       //доставка
'transactionProducts': [{                              
'sku': 'AA11',                                               //артикул товару
'name': 'rose',                                             //найменування товару
'category': 'red',                                          //категорія товару
'price': '20',                                                 //ціна товару
'quantity': '1'                                               //кількість
}]
});

• Передача ідентифікатора переглянутого користувачем товару для використання динамічного ремаркетинга.

Функціонал ремаркетингу дозволяє показувати оголошення тим, хто відвідував сайт. Динамічний ремаркетинг – це ще ефективніший інструмент, за допомогою якого можна показувати рекламу саме того товару, яким цікавився користувач.

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

Для коректного налаштування оголошень динамічного ремаркетингу необхідно реалізувати передачу даних про переглянуті користувачем товари в рекламну систему. Для надсилання ID товару та інших атрибутів також можна застосувати рівень даних.

Наприклад, для передачі ідентифікатора продукту, категорії сторінки та вартості товару  можемо використовувати dataLayer виду:

<script>

dataLayer = [{
   'productId' : '123',
   'pageType' : 'product',
   'totalValue' : 1000
}];

</script>

Також частими прикладами використання є передача різноманітних атрибутів відвідувача – User ID, Client ID, тип користувача (залогінений/не залогінений) та ін.

Як ви вже зрозуміли, рівень даних – це один із важливих інструментів при налаштуванні передачі даних для аналітики та інших систем. Розуміння того, як він влаштований і як використовується, дуже важливе для постановки задач і для пошуку несправностей у відстеженні. Сподіваюся, що моя стаття буде корисною для вас!