Вбудовані змінні створюються автоматично, і їх не можна змінити. Частина в GTM не активна за замовчуванням.
- Сторінки
- Утиліти
- Помилки
- Кліки
- Форми
- Історія
- Відео
- Прокрутка
- Видимість
Сторінки
Page URL – змінна повертає повний URL поточної сторінки, але без хеша # (все, що після ґрат). Наприклад, якщо користувач завантажив сторінку https://smartseo.com.ua/analytics?parameter=true#vars, то змінна поверне значення https://smartseo.com.ua/analytics?parameter=true
Page Hostname – змінна повертає ім’я хоста (доменне ім’я) URL поточної сторінки. Наприклад, для сторінки https://smartseo.com.ua/analytics?parameter=true#vars дана змінна поверне значення smartseo.com.ua.
Page Path – змінна повертає шлях до сторінки в поточному URL без урахування GET-параметрів, тобто всього того, що йде в URL після знака питання «?»і «&» між параметрами.
Наприклад, на сторінці https://smartseo.com.ua/analytics?parameter=true#vars в GTM ця змінна повертає значення /analytics, а в Google Analytics Page Path поверне значення /analytics?parameter=true
Referrer – повний URL переходу до поточної сторінки, тобто шлях (посилання), звідки прийшов користувач на поточну сторінку.
Наприклад, якщо користувач зі сторінки https://smartseo.com.ua/google-analytics-book/ перейшов на сторінку https://smartseo.com.ua/google-tag-manager/, то значення даної змінної буде https://smartseo.com.ua/google-analytics-book/
Перші три змінні призначені для поточної сторінки, а остання Referrer необхідна для роботи з URL-сторінки, з якою користувач перейшов на наш сайт. За промовчанням у Google Tag Manager всі 4 вбудовані змінні з категорії «Сторінки» активовані.
Як приклад розберемо простий перехід із пошукової системи Google на сайт graphanalytics.ru. У режимі налагодження GTM це виглядатиме так:
Container Version – повертає номер версії контейнера як рядкового значення. Наприклад, 5.
Random Number – повертає випадкове число від 0 до 214 748 36 47. Наприклад, 666.
HTML ID – повертає ідентифікатор користувальницького HTML-тегу. Використовується з секвенування (порядком активації) тегів.
Якщо ми з вами перейдемо у відладчик GTM, то побачимо такі значення змінних з категорії «Утиліти»:
- Container ID – GTM-W9PC2C8 (ідентифікатор контейнера);
- Container Version – QUICK_PREVIEW (режим попереднього перегляду);
- Environment Name – Draft Environment 6 2018-04-30 09:47:15 (назва середовища);
- Event – gtm.js (подія перегляду сторінки);
- HTML ID – значення не надано. Значення ID змінної HTML відображається тільки в тому випадку, якщо ми працюємо з тегами типу користувача HTML;
- Random Number – 294510670 (генератор випадкових чисел). При оновленні сторінки та фіксації нової події це число зміниться.
Ошибки
Error Message – повертає рядок, що містить повідомлення про помилку, відправлене за допомогою тригера «Помилка JavaScript».
Error URL – повертає рядок, що містить URL-адресу скрипта, в якому було виявлено помилку.
Error Line – рядок файлу, у якому сталася помилка.
Debug Mode – повертає значення «true», якщо активовано режим налагодження в Google Tag Manager.
Як наочний приклад створимо вимушену помилку в коді JS. Але перед тим, як запускати налагоджувач Google Tag Manager, не забуваємо створити новий тригер «Помилка JavaScript» і оновити режим попереднього перегляду. Тільки після цього зміни набудуть чинності.
- Debug Mode – true, оскільки у нас активовано режим налагодження;
- Error Line – 801 строка;
- Error Message – повідомлення про помилку;
- Error URL – URL-адреса скрипта, у якому виявлено помилку.
У випадку, якщо ми JavaScript використовуємо конструкцію “try..catch“, то Google Tag Manager не зафіксує помилку. Конструкція виглядає так:
- змінні, які повертають значення при натисканні на всі елементи (click);
- змінні, які повертають значення при натисканні тільки за посиланнями (linkClick).
Click Element – повертає значення для того HTML-елемента, на який клікнув користувач і який був об’єктом дії події користувача (Event – gtm.click або gtm.linkClick). Цей об’єкт витягується з ключа gtm.element у dataLayer.
Click Classes – повертає рядок, що міститься в ключі gtm.elementClasses значенні атрибуту className користувача події за яким був виконаний клік. Аналог {Click Element}}.className
Click ID – повертає рядок, що міститься в ключі gtm.elementId значенні атрибуту ID події користувача за яким був виконаний клік. Аналог якості {{Click Element}}.id
Click Target – повертає рядок, що міститься в ключі gtm.elementTarget значенні атрибуту target користувача події за яким був виконаний клік. Аналог якості {{Click Element}}.target
Click URL – повертає рядок, що міститься в ключі gtm.elementUrl значенні атрибуту href користувача події за яким був виконаний клік. Аналог властивості {{Click Element}}.href для посилань, і {{Click Element}}.action для форм.
Click Text – повертає рядок, що міститься в ключі gtm.elementText значенні атрибуту textContent / innerText події користувача за яким був виконаний клік. Аналог якості {{Click Element}}.innerText
Для прослуховування кліків у Google Tag Manager використовуються вбудовані тригери з розділу «Кліки».
- _event (пользовательское событие) – gtm.linkClick, оскільки клік був здійснений за посиланням;
- Click Element – https://graphanalytics.ua/Google_Analytics_dlya_googlyat_2018.pdf
- Click Classes – button hp-button-1 slide-button w-button green (клас кнопки)
- Click ID – порожнє значення, немає даних по атрибуту id цього елемента
- Click Target – порожнє значення, немає даних щодо атрибуту target у цього елемента
- Click URL – https://graphanalytics.ua/Google_Analytics_dlya_googlyat_2018.pdf
- Click Text – ЗАВАНТАЖИТИ
На вкладці Data Layer можна побачити, як змінні отримують доступ до рівня даних і зчитують ключі, які задаються тригерами «Всі елементи» та «Тільки посилання».
- Form Element – [object HTMLFormElement],
Форму представляє об’єкт HTMLFormElement, створений на основі HTMLElement і успадковуючи його властивості, методи та події.
- Form Classes – mailchimp-subscribe
- Form ID – порожнє значення, немає даних по атрибуту id цього елемента
- Form Target – порожнє значення, немає даних щодо атрибуту target у цього елемента
- Form Text – Прийняти користувальницьку угоду ВІДПРАВИТИ ЗАЯВКУ (весь зібраний текст із цієї форми)
- Form URL – https://graphanalytics.ru/contact/contact-first.php (обробник, на який надсилаються дані з форми)
На вкладці Data Layer можна побачити, як змінні отримують доступ до рівня даних і зчитує ключі, які задаються тригерами «Відправлення форми».
Історія
Детальніше про метод pushState читайте тут.
Розберемо з прикладу. Для демонстрації функціональності використовуватимемо меню тестового сайту.
- History Source –popstate, оскільки кожного разу, коли користувач переходить до нового стану, відбувається подія popstate, і властивість події state містить копію об’єкта запису історії.
Це значення буде і тоді, коли ми використовуємо переходи за кнопками «Вперед» – «Назад» у браузері.
- New History Fragment – 1, оскільки ми здійснили перехід site.ua/#4 на site.ua/#1
- Old History Fragment – 4
- New History State и Old History State – null, порожнє значення.
На вкладці Data Layer можна побачити, як змінні отримують доступ до рівня даних і зчитує ключі, які задаються тригерами «Зміна в історії».
Відео
- Початок (Start) – користувач починає перегляд відео;
- Завершення (Complete) – користувач досягає кінця відео;
- Призупинення (пауза), перемотування, буферизація (Pause, Seeking, Buffering) – користувач зупиняє, перемотує відео або коли відбувається буферизація;
- Хід перегляду (Progress) – користувач проходить відсотковий або тимчасовий поріг (час вимірюється в секундах). Цілі позитивні числа вказуються через кому.
- “Включити підтримку JavaScript API для всіх відео YouTube“
Установивши цей прапорець, увімкніть YouTube iFrame Player API. В результаті до всіх URL відеопрогравача YouTube буде додано параметр enablejsapi = 1 для управління програвачем через iframe або JavaScript.
Примітка: Якщо під час завантаження Google Tag Manager відтворення ролика вже розпочалося, воно почнеться спочатку.
Зберігаємо зміни. Оновлюємо режим попереднього перегляду та переходимо до налагоджувача Google Tag Manager. На сайті перемотаємо відео трохи вперед і зупинимо його на кадрі:
Прокрутка
- Глибина вертикального прокручування у відсотках – 10, 25, 50, 75, 90;
- Глибина горизонтального прокручування в пікселях – 100;
- Умови активації тригера – Все страницы.
Зберігаємо зміни. Оновлюємо режим попереднього перегляду та переходимо до налагоджувача Google Tag Manager. На сайті проскролимо трохи вниз сторінки і побачимо користувальницьку подію gtm.scrollDepth:
- Scroll Depth Threshold – 75% (відсоток прокручування), оскільки вертикальна прокручування у нас була задана в %;
- Scroll Depth Units – percent, тут значення може бути «вертикальний» або «горизонтальний», залежно від типу прокручування, який перетнув поріг;
- Scroll Direction – vertical, тип/напрямок прокручування.
А ось так виглядає горизонтальний скролінг у пікселях (у нашому прикладі):
- Scroll Depth Threshold – 100;
- Scroll Depth Units – pixels;
- Scroll Direction – horizontal.
На вкладці Data Layer можна побачити, як змінні отримують доступ до рівня даних і зчитує ключі, які задаються тригерами «Глибина прокручування».
Відстежувати прокручування без прив’язки до елементів складно. 50% глибини прокручування для статті довжиною 1000 символів та 50% прокручування для статті 20000 символів не дадуть жодних даних для аналізу. Також тригер не дозволяє відстежувати прокручування до конкретних HTML-елементів. У таких випадках використовують інший тригер, який називається «Видимість елемента».
Видимость
Зберігаємо зміни. Оновлюємо режим попереднього перегляду та переходимо до налагоджувача Google Tag Manager. На сайті ми проскролили до цієї кнопки і через мінімальний час видимості елемента відбулася фіксація події gtm.elementVisibility.
- On-Screen Duration – 3000 (в мілісекундах), як довго вибраний елемент було видно при спрацьовуванні тригера;
- Percent Visible – 100 (у відсотках), видимість елемента. У нашому прикладі його було видно на всі 100%.
На вкладці Data Layer можна побачити, як змінні отримують доступ до рівня даних і зчитує ключі, які задаються тригерами «Доступність елемента».
Всі вищезгадані вбудовані змінні використовуються для веб-контейнерів, проте ще є велика частина змінних для контейнерів AMP, iOS, Android, і застарілих мобільних контейнерів, які використовують контейнери та SDK нижче версії 5. Їх розбір вимушено опускається через вузьку тематику. Докладніше про решту вбудованих змінних Google Tag Manager читайте в офіційній довідці Google.