Вбудовані змінні в GTM

Встроенные переменные в GTM - smartseo.com.ua

Вбудовані змінні створюються автоматично, і їх не можна змінити. Частина в GTM не активна за замовчуванням.

Встроенные переменные GTM

Вбудовані змінні GTM

Вони включаються і відключаються шляхом проставляння галочок (чекбоксів) навпроти кожної з них.

Встроенные переменные GTM

Увімкнення/Відключення вбудованих змінних

Використання вбудованих змінних не потребує глибоких знань у програмуванні та іноді дозволяє замінити велику кількість рядків коду всього парою кліків миші.

У Google Tag Manager на даний момент існує 9 категорій вбудованих змінних:

  • Сторінки
  • Утиліти
  • Помилки
  • Кліки
  • Форми
  • Історія
  • Відео
  • Прокрутка
  • Видимість

Сторінки

Встроенные переменные GTM

Вбудовані змінні «Сторінки»

Найчастіше використовувані змінні. Вони дозволяють визначити, де користувач знаходиться в даний момент щодо URL-структури сайту. Сторінка може бути як поточна, на якій зараз знаходиться відвідувач сайту, так і та сторінка, з якої він перейшов на поточну сторінку (Referrer).

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 це виглядатиме так:

Встроенные переменные GTM

Приклад вбудованих змінних «Сторінки»

Змінна Page Hostname повернула ім’я домену «graphanalytics.ru», Page Path містить шлях до сторінки в поточній URL, що відповідає «/» (головна директорія), Page URL – повна URL поточної сторінки «https://graphanalytics.ua/», а перехід на сайт був виконаний з пошуку Google, тому змінна Referrer повернула значення «https://www.google.ua/».

Утиліти

Встроенные переменные GTM

Вбудовані змінні «Утиліти»

Набір з 6 вбудованих змінних GTM, які більшою мірою носять службові функції.

Event – повертає підрядок, який містить тип події, що сталася на сайті. Наприклад, при натисканні на будь-який елемент повертає gtm.click, на посилання – повертає gtm.linkClick, при заповненні форми – gtm.formSubmit, при виникненні помилки – gtm.pageError.

Environment Name – повертає назву поточного середовища («Реальне», «Остання» або «Редагування»), якщо запит контейнера виконано з функції «Поділитися посиланням для перегляду» або з фрагмента коду середовища.

Container ID – повертає номер контейнера GTM. Наприклад, GTM-NC2LK3M.

Встроенные переменные GTM

Container ID

Container Version – повертає номер версії контейнера як рядкового значення. Наприклад, 5.

Встроенные переменные GTM

Container Version

Random Number – повертає випадкове число від 0 до 214 748 36 47. Наприклад, 666.

HTML ID – повертає ідентифікатор користувальницького HTML-тегу. Використовується з секвенування (порядком активації) тегів.

Якщо ми з вами перейдемо у відладчик GTM, то побачимо такі значення змінних з категорії «Утиліти»:

Встроенные переменные GTM

Приклад вбудованих змінних «Утиліти»

В якості події було обрано Page View (Перегляд сторінки):

  • 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 (генератор випадкових чисел). При оновленні сторінки та фіксації нової події це число зміниться.

Ошибки

Встроенные переменные GTM

Вбудовані змінні «Помилки»

Змінні з цієї категорії дозволяють розробникам аналізувати помилки на сайті (аналіз сторінок, типи пристроїв, версій браузерів, дозволів екранів тощо). Для використання цих змінних необхідно їх активувати та створити хоча б один тригер типу «Помилка JavaScript».

Встроенные переменные GTM

Тип тригера – Помилка JavaScript

Error Message – повертає рядок, що містить повідомлення про помилку, відправлене за допомогою тригера «Помилка JavaScript».

Error URL – повертає рядок, що містить URL-адресу скрипта, в якому було виявлено помилку.

Error Line – рядок файлу, у якому сталася помилка.

Debug Mode – повертає значення «true», якщо активовано режим налагодження в Google Tag Manager.

Як наочний приклад створимо вимушену помилку в коді JS. Але перед тим, як запускати налагоджувач Google Tag Manager, не забуваємо створити новий тригер «Помилка JavaScript» і оновити режим попереднього перегляду. Тільки після цього зміни набудуть чинності.

Встроенные переменные GTM

Оновлення режиму попереднього перегляду

У відладчику GTM буде доступна така інформація:

Встроенные переменные GTM

Приклад вбудованих змінних «Помилки»

  • Debug Mode – true, оскільки у нас активовано режим налагодження;
  • Error Line – 801 строка;
  • Error Message – повідомлення про помилку;
  • Error URL – URL-адреса скрипта, у якому виявлено помилку.

У випадку, якщо ми JavaScript використовуємо конструкцію “try..catch“, то Google Tag Manager не зафіксує помилку. Конструкція виглядає так:

Встроенные переменные GTM

Конструкція “try..catch

Працює вона так:

  1. Виконується код усередині блоку try.
  2. Якщо в ньому помилок немає, то блок catch(err) ігнорується, тобто виконання доходить до кінця try і потім стрибає через catch.
  3. Якщо в ньому виникне помилка, то виконання try на ній переривається, і управління стрибає в початок блоку catch (err).

При цьому змінна err (можна вибрати й іншу назву) міститиме об’єкт помилки з детальною інформацією про подію. Таким чином, при помилці в try скрипт не «падає», і ми отримуємо можливість обробити помилку всередині catch.

Докладніше про try..catch читайте у довідниках JavaScript.

Кліки

Встроенные переменные GTM

Вбудовані змінні «Кліки»

Змінні в цій категорії використовуються для відстеження кліків на елементах сайту. Розділити їх можна на дві складові:

  • змінні, які повертають значення при натисканні на всі елементи (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 використовуються вбудовані тригери з розділу «Кліки».

Встроенные переменные GTM

Кліки – Всі елементи або Тільки посилання

При активації тригера, запуску відладчика в Google Tag Manager і кліку по будь-якому елементу свого сайту ви можете спостерігати таку картину (на вкладці Variables):

Встроенные переменные GTM

Приклад вбудованих змінних «Кліки»

Цей клік був здійснений за кнопкою «СКАЧАТИ», яка має посилання для завантаження електронної книги на сайті graphanalytics.ua.

Встроенные переменные GTM

Клік на кнопку «Завантажити»

Відкривши консоль розробника (в Google Chrome F12) і підсвітивши потрібний фрагмент коду, ми побачимо, що у даного елемента присутні всього два атрибути – href і class.

Встроенные переменные GTM

Атрибути href та class

Змінні в цьому прикладі повернули значення:

  • _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 можна побачити, як змінні отримують доступ до рівня даних і зчитують ключі, які задаються тригерами «Всі елементи» та «Тільки посилання».

Встроенные переменные GTM

Вкладка Data Layer у режимі налагодження GTM

Аналогічним чином можна подивитися значення змінних, що передаються, за користувальницькою подією gtm.click.

Форми

Схожа з категорією «Кліки», тільки як об’єкти, що відстежуються, використовуються форми.

Встроенные переменные GTM

Вбудовані змінні «Форми»

Ті самі змінні, тільки замість Click -> Form, а як тригер прослуховування використовується «Відправка форми», а користувальницька подія називається gtm.formSubmit.

Встроенные переменные GTM

Тип тригера – Відправлення форми

Form Element – повертає JS-об’єкт для форми, яка була відправлена ​​користувачем. Наприклад, атрибути class, ID, дані про батьківські та дочірні елементи. Цей об’єкт також вилучається з ключа gtm.element у dataLayer.

Form Classes – повертає набір атрибутів class для відправленої форми. Міститься у ключі gtm.elementClasses.

Form ID – повертає значення атрибуту id для відправленої форми. Міститься у ключі gtm.elementId.

Form Target – повертає значення атрибуту target. міститься в ключі gtm.elementTarget

Form URL – повертає значення атрибута action для відправленої форми. Міститься у ключі gtm.elementUrl.

Ця змінна корисна, коли формам не надано атрибути id і class, і вони надсилаються різним обробникам на сервері. Наприклад, форма зворотного зв’язку може надсилати дані на /contacts.php, а форма підписки новин на /subscribe.php.

Form Text — змінна повертає текст, що міститься у відправленій формі та її нащадках. Міститься у ключі gtm.elementText.

Як приклад відправимо форму на тестовому сайті graphanalytics.ua

Встроенные переменные GTM

Приклад відправлення форми

Після відправки форми відладчик Google Tag Manager зафіксував подію gtm.formSubmit, при переході в яку (вкладка Variables) нам стануть доступні значення змінних з цієї категорії:

Встроенные переменные GTM

Приклад вбудованих змінних «Форми»

  • 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 можна побачити, як змінні отримують доступ до рівня даних і зчитує ключі, які задаються тригерами «Відправлення форми».

Встроенные переменные GTM

gtm.formSubmit в Data Layer

Історія

Встроенные переменные GTM

Вбудовані змінні «Історія»

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

Детальну інформацію про додавання та зміну записів історії можна отримати в документації розробника на сайті developer.mozilla.org.

Ця категорія дозволяє організувати навігацію або змоделювати поведінку на сайтах, на яких контент підвантажується динамічно, без перезавантаження сторінок (зазвичай, за допомогою AJAX). При цьому в адресному рядку може змінюватися хеш (/#contacts, /#price, /#otzivi тощо).

Вбудований тригер у Google Tag Manager, який використовується для прослуховування змін в історії, називається «Зміна в історії» (подія gtm.HistoryChange).

Встроенные переменные GTM

Тригер – Зміна в історії

Категорія «Історія» в GTM складається з 5 вбудованих змінних:

New History Fragment – повертає змінну, яка містить нове значення хеша (#) URL-сайту після здійснення події користувача «Зміна в історії». Міститься у ключі gtm.newUrlFragment.

Old History Fragment  – зворотна дія, повертає змінну, яка містить попереднє значення хешу URL-сайту до здійснення події користувача. Міститься у ключі gtm.oldUrlFragment.

New History State – повертає об’єкт, що містить новий стан історії після того, як сталася подія та метод history.pushState() був виконаний. Міститься в ключі gtm.newHistoryState.

Old History State – повертає об’єкт, що містить старий стан історії перед тим, як відбулася подія і метод history.pushState () був виконаний. Міститься в ключі gtm.oldHistoryState.

History Source – повертає рядок-подію, що призвела до зміни об’єкта історії. Наприклад, pushState або popstate.

Детальніше про метод pushState читайте тут.

Розберемо з прикладу. Для демонстрації функціональності використовуватимемо меню тестового сайту.

Встроенные переменные GTM

Приклад вбудованих змінних «Історія»

Припустимо, мій початковий шлях був із посиланням розділу «Вартість». Посилання має вигляд site.ru/#4, де #4 – хеш, так званий «якір», розмітка блоків на веб-сторінках.

Встроенные переменные GTM

Посилання з якорем (хеш)

Далі я переходжу до розділу «Залишити заявку», посилання якого має вигляд site.ru/#1. Як бачимо, відбулася заміна значення у посиланні (адресному рядку браузера) без перезавантаження сторінки.

Встроенные переменные GTM

Підміна значення посилання без перезавантаження сторінки

Google Tag Manager зафіксував подію, пов’язану зі зміною історії.

Встроенные переменные GTM

Приклад вбудованих змінних «Історія»

Змінні набувають відповідних значень:

  • History Source –popstate, оскільки кожного разу, коли користувач переходить до нового стану, відбувається подія popstate, і властивість події state містить копію об’єкта запису історії.

    Це значення буде і тоді, коли ми використовуємо переходи за кнопками «Вперед» – «Назад» у браузері.

Встроенные переменные GTM

Кнопки «Вперед-Назад» у браузері

До того ж, браузери працюють з подією popstate по-різному. Chrome та Safari завжди викликають popstate після закінчення завантаження сторінки, а Firefox не робить цього.

  • New History Fragment – 1, оскільки ми здійснили перехід site.ua/#4 на site.ua/#1
  • Old History Fragment – 4
  • New History State и Old History State – null, порожнє значення.

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

Встроенные переменные GTM

gtm.historyCHang в Data Layer

Відео

Встроенные переменные GTM

Вбудовані змінні «Відео»

Категорія змінних, що з’явилася у GTM у вересні 2017 року. Вони потрібні для відстеження вбудованих на веб-сайт відео. Тригер у Google Tag Manager, який використовується для прослуховування, називається «Відео YouTube» (подія gtm.video).

Встроенные переменные GTM

Тригер – Відео YouTube

Google Tag Manager додав 8 змінних до цієї категорії:

Video Provider – повертає значення постачальника відео. Зараз доступний лише YouTube. Міститься у ключі gtm.videoProvider.

Video Status – повертає стан відео в момент реєстрації користувача події. Наприклад, “Start” або “Pause” відео. Міститься у ключі gtm.videoStatus.

Video URL – URL-адреса, посилання відео на YouTube. Міститься у ключі gtm.videoUrl.

Video Title – назва відео. Міститься у ключі gtm.videoTitle.

Video Duration – загальна тривалість відео в секундах, виражена цілим числом. Міститься у ключі gtm.videoDuration.

Video Current Time – повертає поточний час відео в секундах, в яке відбулася користувальницька подія. Міститься у ключі gtm.videoCurrentTime.

Video Percent – повертає значення відтвореного відео, виражене у відсотках цілим числом (від 0 до 100), на момент, коли відбулася користувальницька подія. Міститься у ключі gtm.VideoPercent.

Video Visible – повертає значення видимості відео у вікні браузера. Якщо відео відображається в області перегляду, результатом буде значення true, якщо в іншій області (наприклад, у нижній частині сторінки, на фоновій вкладці) – false. Міститься у ключі gtm.videoVisible.

Створимо тригер «Відео YouTube» і задамо йому відповідні налаштування:

Встроенные переменные GTM

Налаштування тригера Відео YouTube

  • Початок (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. На сайті перемотаємо відео трохи вперед і зупинимо його на кадрі:

Встроенные переменные GTM

Приклад відео з YouTube

У відладчику буде доступна інформація по всіх 8 змінних:

Встроенные переменные GTM

Приклад вбудованих змінних «Відео»

  • Video Current Time – 715 (у секундах), поточний час, у який відбулася користувальницька подія gtm.video;
  • Video Duration – 3606 (у секундах), загальна тривалість відео;
  • Video Percent – 20 (%, відсоток), відсоток відтвореного відео до моменту здійснення події користувача gtm.video;
  • Video Provider – youtube, постачальник відео (поки що єдиний);
  • Video Status – pause, оскільки воно призупинено;
  • Video Title – Вистава Ріккі, назва відеоролика;
  • Video URL – https://www.youtube.com/watch?t=1118&v=u-wkJTzEdns, посилання на відео на YouTube;
  • Video Visible – значення true, оскільки відео відображалося у видимій області екрана браузера.

На вкладці Data Layer можна побачити, як змінні отримують доступ до рівня даних та читає ключі, які задаються тригерами «Відео YouTube».

Встроенные переменные GTM

gtm.video в Data Layer

Прокрутка

Встроенные переменные GTM

Вбудовані змінні «Прокручування»

У жовтні 2017 року в Google Tag Manager з’явився новий вбудований тригер – Scroll Depth, а з ним і три вбудовані змінні. Тригер «Глибина прокрутки» включає базові опції і дозволяє відстежувати як вертикальну глибину скролінгу, так і горизонтальну.

Встроенные переменные GTM

Тригер – Глібіна прокручування

Три змінні у GTM:

  • Scroll Depth Threshold – повертає значення порога прокручування, який був перетнутий внаслідок користувальницької події gtm.scrollDepth. Міститься у ключі gtm.scrollThreshold.
  • Scroll Depth Units – змінна повертає значення у пікселях (pixels) або відсотках (percent), залежно від налаштувань тригера. Міститься у ключі gtm.scrollUnits.
  • Scroll Direction – змінна повертає значення напрямку прокручування (vertical або horizontal), залежно від налаштувань. Міститься у ключі gtm.scrollDirection.

Створимо тригер «Глибина прокрутки» і задаємо йому відповідні налаштування (приклад):

Встроенные переменные GTM

Налаштування тригера «Глибина прокручування»

  • Глибина вертикального прокручування у відсотках – 10, 25, 50, 75, 90;
  • Глибина горизонтального прокручування в пікселях – 100;
  • Умови активації тригера – Все страницы.

Зберігаємо зміни. Оновлюємо режим попереднього перегляду та переходимо до налагоджувача Google Tag Manager. На сайті проскролимо трохи вниз сторінки і побачимо користувальницьку подію gtm.scrollDepth:

Встроенные переменные GTM

Приклад вбудованих змінних «Прокручування»

  • Scroll Depth Threshold – 75% (відсоток прокручування), оскільки вертикальна прокручування у нас була задана в %;
  • Scroll Depth Units – percent, тут значення може бути «вертикальний» або «горизонтальний», залежно від типу прокручування, який перетнув поріг;
  • Scroll Direction – vertical, тип/напрямок прокручування.

А ось так виглядає горизонтальний скролінг у пікселях (у нашому прикладі):

Встроенные переменные GTM

Приклад горизонтального прокручування

  • Scroll Depth Threshold – 100;
  • Scroll Depth Units – pixels;
  • Scroll Direction – horizontal.

На вкладці Data Layer можна побачити, як змінні отримують доступ до рівня даних і зчитує ключі, які задаються тригерами «Глибина прокручування».

Встроенные переменные GTM

gtm.scrollDepth в Data Layer

Відстежувати прокручування без прив’язки до елементів складно. 50% глибини прокручування для статті довжиною 1000 символів та 50% прокручування для статті 20000 символів не дадуть жодних даних для аналізу. Також тригер не дозволяє відстежувати прокручування до конкретних HTML-елементів. У таких випадках використовують інший тригер, який називається «Видимість елемента».

Видимость

Встроенные переменные GTM

Вбудовані змінні «Видимість»

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

Вбудований тригер – «Доступність елемента», користувальницька подія gtm.elementVisibility.

Встроенные переменные GTM

Тригер – Доступність елемента

У Google Tag Manager у категорії «Видимість» дві змінні:

Percent Visible – повертає числове значення від 0 до 100, яке показує, який відсоток обраного елемента був видно при спрацьовуванні тригера. Міститься у ключі gtm.visibleRatio.

On-Screen Duration – повертає числове значення, яке показує, як довго обраний елемент був видно при спрацьовуванні тригера. Міститься у ключі gtm.visibleTime.

Створимо тригер «Доступність елемента» і задаємо йому відповідні налаштування (приклад):

Встроенные переменные GTM

Приклад налаштування тригера “Доступність елемента”

Будь-які налаштування тригерів у цій статті цілеспрямовано опускаються, оскільки більш докладно про тригери буде говорити далі. Варто відзначити, що в даному прикладі був обраний елемент (кнопка «Записатися на безкоштовне заняття»), при прокручуванні якого активувалася подія gtm.elementVisibility.

Встроенные переменные GTM

Кнопка «Записатися на безкоштовне заняття» як умову активації події:

  • Метод вибору – Селектор CSS;
  • Селектор елементів – body > section.block-cont.block-cont1.g-wrap > div.cont-child_like.wrap > div.child_like–text > a ;
  • Правило запуску цього тригера – Один раз на сторінку;
  • Мінімальний час видимості (у мілісекундах) – 3000 (як довго вибраний елемент має бути видно на екрані для спрацьовування тригера);
  • Умови активації тригера – Усі події типу «Доступність».

Зберігаємо зміни. Оновлюємо режим попереднього перегляду та переходимо до налагоджувача Google Tag Manager. На сайті ми проскролили до цієї кнопки і через мінімальний час видимості елемента відбулася фіксація події gtm.elementVisibility.

Встроенные переменные GTM

Приклад вбудованих змінних «Видимість»

  • On-Screen Duration – 3000 (в мілісекундах), як довго вибраний елемент було видно при спрацьовуванні тригера;
  • Percent Visible – 100 (у відсотках), видимість елемента. У нашому прикладі його було видно на всі 100%.

На вкладці Data Layer можна побачити, як змінні отримують доступ до рівня даних і зчитує ключі, які задаються тригерами «Доступність елемента».

Встроенные переменные GTM

gtm.elementVisibility в Data Layer

Всі вищезгадані вбудовані змінні використовуються для веб-контейнерів, проте ще є велика частина змінних для контейнерів AMP, iOS, Android, і застарілих мобільних контейнерів, які використовують контейнери та SDK нижче версії 5. Їх розбір вимушено опускається через вузьку тематику. Докладніше про решту вбудованих змінних Google Tag Manager читайте в офіційній довідці Google.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *