У зв’язку з оновленням облікових записів Google Tag Manager до нової версії та виникненням численних питань щодо роботи з новим інтерфейсом вирішила написати огляд, в якому коротко розповім про основні зміни в новій версії порівняно зі старою, а також наведу приклади вирішення найпоширеніших завдань у новій версії . Для початку розглянемо, що змінилося з переходом на другу версію.
- Тепер GTM доступний на піддоміні tagmanager.google.com
- Макрос замінено змінними. Правила замінено на тригери. Мітки залишились тегами.
- Більше немає необхідності додати теги прослуховування подій для відстеження кліка, відправлення форми і т.д.
- Окремим блоком стали виділятися вбудовані змінні. За замовчуванням вони вимкнені, тому перед використанням їх необхідно активувати, встановивши відповідні чекбокси.
- Користувацькі змінні можна створювати як і раніше. Тепер вони розміщуються окремо від вбудованих.
- Змінилися назви змінних. Наприклад, еквівалентом макросу URL тепер є змінна Page URL, макросу Element ID відповідають Click ID/FORM ID тощо.
- Ще більше вбудованих тегів.
- Налаштовувати теги стало ще простіше, оскільки процес налаштування реалізовано покроково.
- Тригери, які активують теги, відрізняються символом, що дає можливість при одному погляді на тег у списку зрозуміти, який тип якого тригер активує.
- Нове API для управління акаунтами, контейнерами, змінними, тригерами та тегами.
Складнощів при роботі в новій версії тег менеджера не виникає, навпаки, інтерфейс став простіше і зрозуміліше. Але деякі відмінності в налаштуванні є, тому розглянемо кілька поширених завдань і їх реалізацію в новому інтерфейсі Google Tag Manager.
Установка кода Google Analytics в GTM V2
1. Створюємо новий тег. Ми можемо це зробити або зі сторінки “Огляд”,
або перейшовши вкладку “Теги”.
При виборі продукту зупиняємось на “Google Analytics”.
2. Вказуємо тип тега (“Universal Analytics”, “Класичний Google Analytics”) та ідентифікатор відстеження ресурсу у Google Analytics.
Не забуваймо активувати чекбокс “Включити функції для контекстної мережі”, щоб мати можливість використовувати ремаркетинг у Google Analytics, а також переглядати дані у демографічних звітах та звітах за інтересами.
3. Вказуємо правило активації тега.
Код аналітики повинен активуватись на всіх сторінках сайту, тому вибираємо відповідне правило.
Створений тег з’явиться у списку тегів:
4. Публікуємо нову версію контейнера.
Не забуваємо тестувати зміни перед публікацією за допомогою інструмента попереднього перегляду та налагодження (цей інструмент, до речі, теж спрощений, порівняно з минулою версією).
Для цього потрібно увійти в режим перегляду та оновити сторінку сайту. З’явиться віконце відладчика.
Якщо під час перевірки у відладчику ви переконалися, що все працює правильно, можна сміливо публікувати нову версію контейнера.
5. Перевіряємо дані в Google Analytics, звіт “Режим реального часу”.
Тестування в режимі попереднього перегляду, публікація тегів та перевірка даних у поданні — це обов’язкові кроки, які повинні йти за будь-якими змінами в контейнері, тому далі я ці пункти дублювати не буду.
Установка Яндекс Метрики, ремаркетингу FB, VK та інших тегів користувача в GTM V2
1. Додаємо новий тег типу “Тег користувача HTML”.
2. Вставляємо в полі код Яндекс Метрики (коду ремаркетингу FB або ШІ). Фрагменти JavaScript необхідно укласти в HTML-теги скрипту <script>…</script>
3. Задаємо умови активації тега.
Надсилання подій по таймеру в GTM V2
Для прикладу налаштуємо подію, яка надсилатиметься, якщо користувач провів на сторінці не менше 60 секунд.
1. Додаємо тригер типу “Таймер”.
2. Задаємо налаштування таймера.
У полі “Інтервал” вказуємо час, через який має активуватися подія. Час вказується у мілісекундах. У полі “Обмеження” вказуємо максимальну кількість активацій події. Щоб таймер спрацьовував на всіх сторінках додаємо відповідний регулярний вираз. На четвертому етапі вибираємо всі таймери.
3. Додаємо новий тег типу Google Analytics.
Вибираємо тип відстеження – подія. Вказуємо обов’язкові параметри “Категорія” та “Дія”. Звертаю увагу на опцію “Не взаємодія” (ВАЖЛИВО!).
Якщо ви хочете, щоб надсилання події впливало на ваш показник відмов, необхідно встановити значення “false” для цього параметра. А якщо ні, то встановлюйте значення “true”. Як умову активації вибираємо створений на попередньому кроці тригер “Таймер”.
Відстеження кліків в GTM V2
1. Створюємо новий тригер “Клік”.
При налаштуванні тригера можна вибрати мету “Всі елементи” або “Тільки посилання”. При виборі типу “Всі елементи”, тег буде активуватися при натисканні на будь-який елемент, при виборі “Тільки посилання” – тільки при натисканні на посилання.
Якщо вибрати мету “Тільки посилання”, з’являться додаткові налаштування: “Чекати на теги”, “Перевірка помилок”. Такі опції з’являються також під час створення тригера “Форма”.
При активації опції “Чекати на теги” відбувається затримка відкриття посилань (надсилання форми), поки не будуть активовані всі пов’язані з цією подією теги або поки не закінчиться вказаний час очікування (залежно від того, що відбудеться раніше)
При активації опції “Перевірка помилок” тег не спрацьовуватиме, якщо для відстежуваного елемента (посилання/форми) не було виконано дію за умовчанням (надсилання форми/перехід за посиланням).
2. Далі задаємо умову активації тригера.
Вибираємо “Деякі кліки”
і уточнюємо, яким елементом хочемо відстежувати клік , встановивши правило зіставлення з ідентифікуючим цей елемент атрибутом (Click Classes, Click ID…). Значення атрибута можна отримати, звернувшись до коду сторінки сайту. Щоб вбудована змінна Click Classes стала доступною, не забуваємо її активувати на вкладці “Змінні”:
3. Далі створюємо тег, який надсилатиме подію в аналітику. Створюємо новий тег типу “Universal Analytics”. Як тип відстеження вибираємо “Подія”, вказуємо обов’язкові параметри “Категорія”, “Дія”.
4. Додаємо умову активації – тригер, створений на 3-му кроці.
У випадку, коли необхідно налаштувати відстеження кліка по будь-якому елементу на веб-сторінці, а цей елемент не має ідентифікуючих його атрибутів, таких як, наприклад, ID, class або URL, завдання відстеження можна вирішити за допомогою селекторів CSS.
Відстеження відправки форм в GTM V2
Якщо виникає необхідність налаштувати відстеження відправки форми, для початку потрібно визначити, яким способом передаються дані форми на сервер, оскільки в залежності від цього налаштування GTM будуть відрізнятися. Надіслати дані з форми можна за допомогою методу submit або у фоновому режимі через ajax. У першому випадку відбуватиметься перезавантаження сторінки, у другому – ні.
Відстеження форм, що надсилають дані за допомогою submit
Якщо дані надсилаються через submit, для відстеження такої події можна прив’язатися до класу або ідентифікатору форми. Налаштування здійснюється аналогічно до налаштування відстеження кліків.
1. Створюємо новий тригер, як тип події тригера вибираємо “Надсилання форми” замість “Клік”.
Якщо активувати хоча б одну з опцій “Чекати на теги”, “Перевірка помилок”, про які я вже писала в пункті “Відстеження кліків”, з’явиться додатковий крок створення тригера “Умови включення”. Це не те саме, що умова активації. Умова включення дозволяє вказати, у яких випадках тригер має бути доступний, тобто за яких умов повинні прослуховуватися надсилання форм. Поширеною умовою включення тригера типу “форма” є лише сторінок, у яких є форми.
При установці опції “Чекати на теги” обов’язково тестуйте події. Якщо виникають проблеми, знімайте чекбокс. Щоправда, у такому разі є ймовірність, що частина звернень може бути втрачена. На четвертому етапі вказуємо умову активації. Прив’язуємося до атрибуту, що ідентифікує потрібну форму (Form ID, Form Classes, …). Не забуваймо активувати необхідну вбудовану змінну перед використанням.
2. Далі створюємо тег, який надсилатиме подію в аналітику. Як умову активації вибираємо тригер, створений на попередньому кроці.
Відстеження форм, що надсилають дані за допомогою ajax
Якщо для надсилання даних використовується ajax, необхідно зробити наступні кроки:
- В одному з JavaScript-фалів знайти функцію, що відповідає за відправлення даних потрібної форми через ajax. Виглядає це приблизно так:
$.ajax ({ url :'/example.com/geinfo_function', type : 'post', data : {'exam1': value1}, success: function() {...} })Параметр success відповідає за виконання зазначених дій у разі успішного надсилання форми. Всередині function() { … } потрібно прописати команду
dataLayer.push({'event': 'event_name'});где event_name — ім’я відповідної події.
- В GTM створюємо користувальницьку подію event_name.Додаємо новий тригер “Подія користувача”.
І за умови його активації вказуємо івент, який відправили за допомогою dataLayer.push().
- Далі створюємо тег, який надсилатиме подію в аналітику. Як умову активації вибираємо тригер, створений на попередньому кроці.
Якщо у вас виникла потреба відстежувати взаємодію з окремими елементами форм, ви можете ознайомитися з докладним описом методів у статті Відстеження взаємодії з елементами форм за допомогою GTM.
Віртуальні сторінки в GTM V2
1. Створюємо новий тег типу Google Analytics з типом відстеження Перегляд сторінки. У додаткових параметрах додаємо нове поле, в ньому шукаємо параметр “page”. Вказуємо URL віртуальної сторінки, яку хочемо бачити в аналітиці.
2. Як умову активації використовуємо необхідний тригер. У цій статті я розглянула основні зміни GTM 2.0., а також продемонструвала основні принципи роботи на прикладі деяких типових завдань. Сподіваюся, цей матеріал допоможе збагнути основи роботи з новою версією тег менеджера. Якщо залишилися питання — залишайте у коментарях, розбиратимемося разом!