Гід по Google Tag Manager. Частина друга.

У другій частині керівництва розповімо, що таке шари даних, навіщо вони потрібні, і як ними користуватися. Першу частину читайте тут, а також ми писали про Шаблон налаштувань для Google Tag Manager та Як не заплутатися у власних тегах: наводимо порядок в GTM.

Шар даних (він же dataLayer) - це об'єкт JavaScript, який зберігає і відправляє дані в GTM. Наприклад, це може бути інформація про ціну товару, його характеристики, кількості відвідувачів і покупок в інтернет-магазині.

Приклад порожнього шару даних:

<script type="text/javascript">
dataLayer = [];
</script>

Приклад шару даних зі змінними:

<script type="text/javascript">
dataLayer = [{
    'pageCategory': 'Purchase',
    'product': 'Socks',
    'color': 'red',
    'amount' : 2,
    'price': 550
}];
</script>

Цей невеликий шматок коду повідомляє GTM, що ви продали шкарпетки червоного кольору. За замовчуванням GTM отримує дані з HTML-сторінки і вставляє їх в Google Analytics, де ви бачите свою статистику продажів.

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

Щоб уникнути цього, потрібно використовувати dataLayer - цей об'єкт буде зберігати всю інформацію, яку потрібно зібрати з веб-сторінки. Тепер не важливо, як буде змінюватися HTML-структура сайту - ці зміни не торкнуться dataLayer, а ваші теги продовжать працювати правильно.

Для того, щоб краще зрозуміти як працює dataLayer, необхідно спочатку познайомитися з об'єктами і масивами Javascript.

Масиви Javascript

Масив - це особлива змінна для зберігання даних. Якщо звичайна змінна зберігає тільки одне значення в один момент часу, то масив може зберігати кілька елементів одного або різних типів даних одночасно або в різні періоди часу. Наприклад, якщо a - звичайна змінна, то в один момент вона може зберігати значення 10, а в іншій - 20.

a = 10; a = 20;

Масив складається з одного або декількох елементів. Ними можуть бути: слова (наприклад, hello), числові значення (наприклад, 10), невизначені значення, логічні значення (true або false), інші масиви або об'єкти.

Масив можна створити за допомогою функції масиву або літерного значення []. Наприклад, так в JavaScript буде виглядати порожній масив, створений за допомогою функції:

var a=new Array();

Тут a - ім'я масиву, а var - команда, яка створює змінні в JavaScript.

Масиву можна дати будь-яке ім'я:

var myArray = new Array();

Так виглядає масив, створений за допомогою літерного значення []:

var a= [];

або:

a= [];

У GTM масив шару даних називають dataLayer. Так буде виглядати порожній dataLayer:

dataLayer=[];

Оскільки цей рядок коду написана на JavaScript, його необхідно закрити тегами < script> ... < / script>, щоб вставити масив в HTML-документ:

<script type="text/javascript">
dataLayer = [];
</script>

Тепер створимо нову змінну масиву a, з трьома елементами:

a=["hi","bye","good bye"];

Всі ці елементи - hi, bye і good bye - належать до типу string (рядки). Такі масиви називаються масивами рядків. Аналогічно і з числовими значеннями, такий масив називається числовим масивом:

a=[10,24,56];

Також в масиві, можуть бути різні типи даних одночасно:

a1=["hi","bye","good bye", 10, 20, 56]; 
a2=["hi",10,"bye",20, 56,"good bye"];

Примітка: Навіть якщо a1 і a2 містять ті ж самі елементи, це все одно різні змінні масиву, так як порядок в них відрізняється.

Інші приклади масивів:

a=[,,,]; // масив невизначених значень. Використовуйте коми, щоб задати невизначене значення.
a=[true,false]; // масив логічних значень.
a=[["Clasicos",57],["Zapatos",456]]; // масив масивів, також називаєтся багатовимірним масивом.
a=[{"id":"20","name":"Zapatos"}]; // масив, який містить тільки один об'єкт.
a=[{"id":"20","name":"Zapatos"},{"id":"53","name":"Masculino"}]; // масив з двома об'ектами

Пробіли і переноси не мають значення, тому, для більш зручного сприйняття, той же самий масив a простіше записати так:

a=[
{"id":"20","name":"Zapatos"},
{"id":"53","name":"Masculino"},
];

Приклад масиву з декількома об'єктами:

a=[
{"id":"20","name":"Zapatos"},
{"id":"53","name":"Masculino"},
{"id":"57","name":"Clasicos"},
{"id":"138","name":"Deportes"},
{"id":"139","name":"Masculino"}
{"id":"201","name":"Zapatos"},
{"id":"1244","name":"Mocasines"},
{"id":"1340","name":"Apaches"}
];

Типи даних, які можуть міститися в масиві

Також ви можете створити масив, який містить елементи всіх можливих типів даних:

a=["size", 10, true,,["Clasicos",57],{"id":"20","name":"Zapatos"}];

Size - елемент типу рядок.

10 - елемент типу число.

True - логічне значення.

,, або пусте значення - елемент масиву невизначеного типу.

[ "Clasicos", 57] - елемент масиву, який також є масивом.

{ "Id": "20", "name": "Zapatos«} - елемент масиву типу об'єкт.

об'єкти JavaScript

Об'єкт JavaScript - це змінна з властивостями і методами. Так, наприклад, виглядає синтаксис, який створює об'єкт JavaScript:

object_name = {"property1":value1, "property2":value2, ....."propertyN":valueN};

або:

object_name = {"key1":value1, "key2":value2, ....."keyN":valueN};

В цьому випадку властивість може бути рядком або ідентифікатором. Ідентифікатор - це ключове слово з особливим значенням, яке не можна використовувати в якості імені змінної. Наприклад, event (подія) - ідентифікатор. Значенням властивості може бути:

рядок;
числове значення;
невизначене значення;
логічне значення (true, false);
масив;
багатовимірний масив;
об'єкт;
масив об'єктів.

Тепер створимо порожній об'єкт без властивостей:

a = {};

Тут a - це ім'я об'єкта JavaScript, але взагалі ви можете називати його як завгодно. Наприклад, створимо об'єкт з ім'ям user (користувач) і додамо до нього чотири властивості:

user={"firstName":"John", "lastName":"Marshall", "age":85, "eyeColor":"blue"};

Для більш зручного сприйняття, той же самий код простіше записати так:

user={
"firstName":"John",
"lastName":"Marshall",
"age":45,
"eyeColor":"blue"
};

Інші приклади об'єктів JavaScript:

a = {"color":"#fu00e9"};

color (колір) - це властивість об'єкта a.

# Fu00e9 - значення властивості color.

a = {"price":164900.00};

price (ціна) - властивість об'єкта а.

164900.00 - значення властивості price.

a = {"color":"#fu00e9", "price":164900.00};

Тут у об'єкта a відразу дві властивості - color і price.

Аналогічно, можна визначити об'єкт за допомогою декількох властивостей:

a = {
    "color": "#fu00e9", // значення типу &ldquo;рядок&rdquo;
    "price": 164900.00, // числове значення
    "sizeList": null, // невизначене значення
    "visitorsHasOrders": true, // логічне значння
    "data": [45, 67, 89, 20], // значенння типу &ldquo;масив&rdquo;
    "shoppingCart": [["Clasicos", 57], ["Zapatos", 456]], // значення типу &ldquo;багатовимірний масив&rdquo;
    "pageAttributes": {"page": "product"}, // значення типу &ldquo;об'ект&rdquo;
    "pageCategory": [
        // значення типу &ldquo;масив об'ектів&rdquo;
        {"id": "20", "name": "Zapatos"}, {"id": "53", "name": "Masculino"}, {"id": "57", "name": "Clasicos"}, {"id": "138", "name": "Deportes"}, {"id": "139", "name": "Masculino"}, {"id": "201", "name": "Zapatos"}, {"id": "1244", "name": "Mocasines"}, {"id": "1340", "name": "Apaches"}
     ]
};

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

<script type="text/javascript"><?php if($_SERVER['SCRIPT_NAME'] == 'thank-you.php') {?>

    dataLayer = [{
        // ID Транзакції. Тип: рядок. Обов'язково.
        'transactionId': <?=$transaction['trans_id']?>,
        // Им'я магазину. Тип: рядок. Опційно.
        'transactionAffiliation': <?=$transaction['store_name']?>,
        // Загальна виручка. Тип: число. Обов'язково.
        'transactionTotal': <?=$transaction['revenue']?>,
        // Сума податку на транзакцію. Тип: число. Опційно.
        'transactionTax': <?=$transaction['tax']?>,
        // Вартість доставки. Тип: число. Опційно.
        'transactionShipping': <?=$transaction['shipping_cost']?>,
        'transactionProducts': [
            <?php   $flag = false;
            $n = sizeof($products_array);
            for($i = 0;$i < $n;$i++) {
            ?><?php if($flag) { ?>,<?php } ?><?php $flag = true; ?>
            {
        // Артикул продукту. Тип: рядок. Обов'язково
        'sku': '<?=$products_array[$i]['sku']?>',
        // Назва продукту. Тип: рядок. Обов'язково.
        'name': '<?=$products_array[$i]['name']?>,
        // Категорія продукту. Тип: рядок. Опційно.
        'category': '<?=$products_array[$i]['category']?>',
        // Ціна продукту. Тип: число. Обов'язково.
        'price': '<?=$products_array[$i]['price']?>',
        // Кількість продукту. Тип: число. Обов'язково.
        'quantity': '<?=$products_array[$i]['quantity']?>'
            }
            <?php } ?>
        ]
    }];

    <?php } ?></script>

Запам'ятайте:

a = []; - створює масив.

a = {}; - створює об'єкт.

a = [{}]; - створює масив з одним об'єктом.

DOM-скрапінг

Це техніка вилучення даних безпосередньо з HTML-елементів веб-сторінки (кнопок, посилань, форм і т. д.) За допомогою JavaScript і знань HTML DOM. Наприклад, цей код витягує з сайту інформацію про колір якогось товару з id product_45, щоб передати ці дані в потрібне вам місце - CRM, Google Analytics і т. д.

<script type="text/javascript">
var product_color = document.getElementById("div#product_45 > span.color").innerHTML;
</script>

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

Однак, варто розуміти, що рішення, запроваджене через DOM-скрапінг досить нестабільне, бо HTML-структура сторінки постійно змінюється. Тому на нього не можна покладатися протягом довгого часу, а також, якщо на кону великі суми грошей (сайти авіакомпаній, наприклад).

Як ініціалізувати dataLayer

Ініціалізація - це, по суті, і є створення dataLayer, вказівка всіх змінних, їх властивостей і значень.

Так виглядає dataLayer без змінних:

<script type="text/javascript">
dataLayer = [{}];
</script>

DataLayer з однією змінною:

<script type="text/javascript">
dataLayer = [{'pageCategory': 'Statistics'}];
</script>

DataLayer з трьома змінними:

<script type="text/javascript">
dataLayer = [{
    'pageCategory': 'Statistics',
    'visitorType': 'high-value',
    'event':'customizeCart'
}];
</script>

У цих прикладах, pageCategory, visitorType і event - змінні, вони ж властивості об'єкта. Statisitcs, high-value і customizeCart - значення змінних.

Щоб змінити, видалити або додати інформацію в dataLayer, вам, відповідно, потрібно змінити значення змінної, видалити або додати нову змінну.

Як довантажувати інформацію в dataLayer

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

Також через push ви зможете динамічно додавати об'єкти в dataLayer, які містять одну або більше змінних.

Приклад методу push:

dataLayer.push({'variable_name': 'variable_value'});

Уявімо, що цей код вже присутній на сторінці:

<script type="text/javascript">
dataLayer = [{'pageCategory': 'Statistics'}];
</script>

Він вже містить одну змінну. І якщо використовувати push, як в цьому прикладі:

<script type="text/javascript">
dataLayer.push({'visitorType': 'high-value'});
</script>

То dataLayer буде виглядати так:

<script type="text/javascript">
dataLayer = [{'pageCategory': 'Statistics'},{'visitorType': 'high-value'}];
</script>

Як перезаписати значення існуючої змінної

Внести зміну з таким же ім'ям, але з новим значенням в dataLayer. Припустимо, що це ваш поточний dataLayer:

<script type="text/javascript">
dataLayer = [{'pageCategory': 'Statistics'}];
</script>

І якщо виконати код, як в цьому прикладі:

<script type="text/javascript">
dataLayer = [{'pageCategory': 'Maths'}];
</script>

То значення змінної pageCategory перезапише, і dataLayer буде виглядати так:

<script type="text/javascript">
dataLayer = [{'pageCategory': 'Maths'}];
</script>

Правильний формат даних

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

<script type="text/javascript">
dataLayer = [{
    'Transaction Id': '1234',
    ...
}];
</script>

В цьому випадку GTM не зможе розпізнати Transaction Id як змінну електронної торгівлі, тому що між словами стоїть пробіл. Правильний код виглядає так:

<script type="text/javascript">
dataLayer = [{
    'transactionId': '1234',
    ...
}];
</script>

'TransactionId' - приклад ідентифікатора, тому у нього особливе значення і він не може використовуватися в якості звичайного імені змінної в GTM.

Правила присвоєння імен змінним

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

Такий формат працювати не буде:

// сторінка входу 
dataLayer.push({'pageCategory': 'members-signup'}); 
// сторінка покупки товару: 
dataLayer.push({'PageCategory': 'product-purchase'});

Не забувайте укладати змінні в лапки:

dataLayer.push({pageCategory: 'members-signup'}); // Не рекомендуємо
dataLayer.push({'pageCategory': 'members-signup'}); // краще так

Код JavaScript теж чутливий до регістру, тому не плутайте dataLayer і datalayer.

datalayer.push({'pagecategory': 'members-signup'}); // Не буде працювати
dataLayer.push({'pageCategory': 'members-signup'}); // Працює

Event в dataLayer

Це особлива змінна, яка використовується з обробниками подій в JavaScript. Вона потрібна для запуску тега, коли користувач взаємодіє з різними елементами на сторінці: формами, кнопками, посиланнями.

Синтаксис виглядає так:

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

Тут event і event name - рядки.

Наприклад, наступний код оновлює змінну event, коли користувач натискає на кнопку:

<a href="https://www.optimizesmart.com/download" onclick="dataLayer.push({'event': 'pdf-download'});">PDF download</a>

Інші приклади особливих змінних dataLayer:

hitType;
nonInteraction;
ecommerce.

Сніппет GTM

Це шматок коду, який встановлює GTM до вас на сайт. А вже сам GTM містить всі маркетингові та аналітичні теги, тригери і змінні.

Приклад сніппета GTM:

<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script type="text/javascript">
(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 = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXX');
</script><!-- End Google Tag Manager -->

Цей код потрібно помістити на кожну сторінку вашого сайту.

Де повинен знаходитися сніппет dataLayer

Він завжди повинен бути вище сніппета GTM в частині head (< head> ... < / head>).

Наприклад:

<script type="text/javascript">
dataLayer = [{'pageCategory': 'Statistics', 'visitorType': 'high-value'}];
</script><!-- Google Tag Manager --><script type="text/javascript">
(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 = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXX');
</script><!-- End Google Tag Manager --><!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager -->

Якщо ви помістите сніппет dataLayer нижче сніппета GTM, то вся система не буде працювати, наприклад, як в цьому випадку:

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager --><script type="text/javascript">
dataLayer = [{'pageCategory': 'Statistics','visitorType': 'high-value'}];
</script>

В цьому коді змінні pageCategory і visitorType будуть недоступні для GTM.

Яку інформацію потрібно зберігати в dataLayer

Це найважливіше питання. Щоб уникнути клопотів зі зміною шарів кожного разу, коли ви використовуєте новий тег-менеджер, вам варто впровадити універсальні шари даних на кожній сторінці вашого сайту. Кожен універсальний dataLayer повинен містити всі ключові атрибути веб-сторінки, в яку він вписаний.

1. Властивості сторінки:

назва сторінки;
URL сторінки;
тип сторінки і т. д.

2. Властивості продукту:

ім'я;
ID продукту;
ціна;
тип продукту;
URL зображення продукту;
варіація обраного продукту (колір, розмір);
обрану кількість продукту;
кількість переглядів;
кількість кліків на продукт;
доступність (в наявності чи ні);
купон;
використаний купон.

3. Властивості користувача:

ID користувача;
ID клієнта;
тип користувача (залогінений, разлогінений, постійний клієнт і т. д.);
поведінка користувача;
переваги користувача;
історія покупок;
дії користувача (натиснув кнопку, відправив форму, підписався, купив і т. д.);
веб-браузер;
операційна система;
пристрій (комп'ютер, телефон, планшет).

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

dataLayer = [{
    "color": "#fu00e9",
    "deviceAgent": "Mozilla 5.0"
    "deviceOs": "non-mobile",
    "deviceTheme": "desktop",
    "deviceType": "desktop",
    "gender": "Masculino",
    "googleRemarketingLabel": "",
    "image": "www.static.dafyty.com.com/brahma-6338-0822-1-product.jpg",
    "pageAttributes": {"page": "product"},
    "pageBrand": [{"id": "2", "name": "Brahma"}],
    "pageCategory": [
        {"id": "20", "name": "Zapatos"},
        {"id": "53", "name": "Masculino"},
        {"id": "57", "name": "Clasicos"},
        {"id": "138", "name": "Deportes"},
        {"id": "139", "name": "Masculino"},
        {"id": "201", "name": "Zapatos"},
        {"id": "1244", "name": "Mocasines"},
        {"id": "1340", "name": "Apaches"}
    ],
    "pageMainCategory": {"id": "1340", "name": "Apaches"},
    "pageName": "product",
    "pageProductDescription": "Un calzado muy comodo que puedes combinar tanto con tus atuendos formales como informales.",
    "pageProductName": "Zapatos Brahma Cafe",
    "pageTitle": "",
    "price": "164900.00",
    "priceDiscount": "12%",
    "season": "Todas las temporadas",
    "seasonYear": "2012",
    "shopAnalyticsAccount": "",
    "shopName": "default",
    "sizeList": "",
    "sku": "BR002SH19DJS",
    "specialPrice": "144900.00",
    "urlPageProduct": "www.dafiti.com.com/Zapatos-Brahma-Cafe-280.html"
}];

А так виглядає шар даних в консолі інструментарію розробника Google (Google Developers):

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

Шар даних, представлений вище, містить кілька динамічних змінних ближче до кінця, наприклад: price (ціна), specialPrice (ціна зі знижкою). Ці змінні не були закодовані на сторінці спочатку, а динамічно підвантажені в dataLayer за допомогою методу push.

Як зрозуміти, що GTM працює

В Google Chrome натисніть правою кнопкою миші на веб-сторінці і виберіть пункт меню «Переглянути код». Відкриється вікно розробника в нижній частині вашого браузера.

Натисніть на вкладку «консоль» (console) у верхній частині вікна інструментів, введіть dataLayer в командному рядку та натисніть Enter.

Тепер ви побачите кілька об'єктів JavaScript:

gtm.js - бібліотека javascript. Якщо цього файлу немає, ваш тег менеджер не буде працювати.

gtm.dom - файл DOM. Якщо цього файлу немає, значить не завантажений DOM.

gtm.load - завантажувальний файл. Якщо цього файлу немає, значить не завантажено вікно і весь його вміст.

Ці події запускаються в наступному порядку: gtm.js → gtm.dom → gtm.load. Якщо dataLayer не отримує дані всіх перерахованих подій - GTM несправний.

Якщо на вашій сторінці закодований dataLayer, то вікно інструментарію розробника покаже вам як мінімум три об'єкти JavaScript. Один об'єкт - ваш шар даних, а решта три - об'єкти подій JavaScript за замовчуванням:

F.A.Q.

Чи може у кожної сторінки бути свій унікальний dataLayer?

Так, не тільки може, а й повинен.

Чи потрібно використовувати одні і ті ж змінні в dataLayer на кожній сторінці?

Ні.

Коли оновлюється dataLayer у випадку з відслідковуваною подією?

Коли ця подія відбувається, наприклад, користувач клацає по кнопці, відправляє форму або завантажує сторінку.

Які обмеження у змінних dataLayer?

Змінні dataLayer прив'язані до сторінки, це означає, що вони існують до тих пір, поки користувач залишається на сторінці.

Як оголосити змінні dataLayer, які дійсні більш, ніж на одній сторінці?

Використовуючи ті ж самі змінні на декількох сторінках вашого сайту.

Чи можна перейменовувати dataLayer?

Так, змінювати ім'я dataLayer потрібно, коли на одній сторінці працює кілька кодів оболонки GTM, і ви не хочете, щоб кожен контейнер використовував один і той же dataLayer.

Фото: flickr.com
Обробка: Vinci

Menu

Гід по Google Tag Manager. Частина друга.