GTM V2

Google Tag Manager V2

У зв’язку з оновленням акаунтів Google Tag Manager до нової версії та виникненням численних питань по роботі з новим інтерфейсом вирішила написати огляд, в якому коротко розповім про основні зміни в новій версії у порівнянні зі старою, а також наведу приклади вирішення найпоширеніших завдань у новій версії. Для початку розглянемо, що змінилося з переходом на другу версію.

  • Тепер GTM доступний на піддомені tagmanager.google.com
  • Макроси замінено змінними. Правила замінено на тригери. Теги залишилися тегами.
  • Більше немає необхідності додавання тегів прослуховування подій для відстеження кліка, відправки форми і т. д. Якщо потрібно відстежити клік, створюємо тег відстеження події і як правило активації просто вибираємо із запропонованих варіантів тригер типу “Клік”.

    GTM

  • Окремим блоком стали виділятися вмонтовані змінні. За стандартними налаштуваннями вони вимкнені, тому перед використанням їх необхідно активувати, встановивши відповідні чекбокси.

    GTM V2

  • Спеціальні змінні можна створювати як і раніше. Тепер вони розміщуються окремо від інтегрованих.

    GTM

  • Змінилися назви змінних. Наприклад, еквівалентом макросу URL тепер є змінна Page URL, макросу Element ID відповідають Click ID/FORM ID тощо.
  • Ще більше вмонтованих тегов.

    GTM

  • Налаштовувати теги стало ще простіше, оскільки процес налаштування реалізовано покроково.
  • Тригери, які активують теги, відрізняються символом, що дозволяє при одному погляді на тег у списку зрозуміти, тригер якого типу його активує.

    GTM

  • Нове API для управління аккаунтами, контейнерами, змінними, тригерами та тегами.

Складнощів при роботі в новій версії тег менеджера не виникає, навпаки, інтерфейс став простіше і зрозуміліше. Але все-таки деякі відмінності в налаштуванні є, тому розглянемо кілька поширених задач та їхню реалізацію в новому інтерфейсі Google Tag Manager.

 

 

Встановлення коду Google Analytics в GTM V2

 

 

1. Створюємо новий тег. Ми можемо це зробити або зі сторінки “Огляд”,

GTM

або при переході до вкладки “Теги”.

GTM

При виборі продукту зупиняємось на “Google Analytics”.

GTM

2. Вказуємо тип тега (“Universal Analytics”, “Класичний Google Analytics”) та ідентифікатор відстеження ресурсу у Google Analytics.

GTM

Не забуваймо активувати чекбокс “Включити функції для контекстної мережі”, щоб мати можливість використовувати ремаркетинг у Google Analytics, а також переглядати дані у демографічних звітах та звітах за інтересами.

3. Вказуємо правило активації тега.

Код аналітики повинен активуватись на всіх сторінках сайту, тому вибираємо відповідне правило.

GTM

Створений тег з’явиться у списку тегів:

GTM

4. Публікуємо нову версію контейнера.

GTM

Не забуваймо тестувати зміни перед публікацією за допомогою інструмента попереднього перегляду та налагодження (цей інструмент, до речі, теж спрощений, порівняно з минулою версією).

GTM

Для цього потрібно увійти в режим перегляду та оновити сторінку сайту. З’явиться віконце відладчика.

GTM

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

5. Перевіряємо дані в Google Analytics, звіт “Режим реального часу”.

GTM V2

Тестування в режимі перегляду, публікація тегів та перевірка даних у представленні – це обов’язкові кроки, які повинні йти за будь-якими змінами в контейнері, тому далі я ці пункти дублювати не буду.

 

Установка Яндекс Метрики, ремаркетингу FB, VK та інших тегів користувача в GTM V2

 

1. Додаємо новий тег типу “Тет HTML користувача”.

GTM

2. Вставляємо в полі код Яндекс Метрики (код ремаркетингу FB або VK). Фрагменти JavaScript необхідно укласти в HTML-теги скрипта <script>…</script>

GTM

3. Встановлюємо умови активації тега.

GTM

 

Надсилання подій по таймеру до GTM V2

 

Для прикладу налаштуємо подію, яка надсилатиметься, якщо користувач провів на сторінці не менше 60 секунд.

1. Додаємо триггер типу “Таймер”.

GTM

2. Задаєм налаштування таймеру.

У полі “Інтервал” вказуємо час, через який має активуватися подія. Час вказується у мілісекундах. У полі “Обмеження” вказуємо максимальну кількість активацій події. Щоб таймер спрацьовував на всіх сторінках додаємо відповідний регулярний вираз. На четвертому етапі вибираємо всі таймери.

GTM

3. Додаємо новий тег типу “Google Analytics”.

GTM

Вибираємо тип відстеження – подія. Вказуємо обов’язкові параметри “Категорія” та “Дія”. Звертаю увагу на опцію “Не взаємодія” (ВАЖЛИВО!).

GTM V2

Якщо ви бажаєте, щоб надсилання події впливало на показник відмов, необхідно встановити значення “false” для цього параметра. В іншому випадку – встановлюйте значення “true”. Як умову активації вибираємо створений на попередньому кроці тригер “Таймер”.

GTM

 

Відстеження кліків у GTM V2

 

1. Створюємо новий тригер “Клік”.

GTM

При налаштуванні тригера можна вибрати мету “Всі елементи” або “Тільки посилання”. При виборі типу “Всі елементи”, тег буде активуватися при натисканні на будь-який елемент, при виборі “Тільки посилання” – тільки при натисканні на посилання.

Якщо вибрати мету “Тільки посилання”, то з’являться додаткові налаштування: “Чекати на теги”, “Перевірка помилок”. Такі настройки з’являються також при створенні тригера “Форма”.

При активації опції “Чекати на теги” відбувається затримка відкриття посилань (надсилання форми), поки не будуть активовані всі пов’язані з цією подією теги або поки не закінчиться вказаний час очікування (залежно від того, що відбудеться раніше)

При активації опції “Перевірка помилок” тег не спрацьовуватиме, якщо для відстежуваного елемента (посилання/форми) не було виконано стандартну дію (відправлення форми/перехід за посиланням).

2. Далі задаємо умову активації тригера.

Вибираємо “Деякі кліки”

GTM

і уточнюємо, яким елементом хочемо відстежувати клік , встановивши правило зіставлення з ідентифікуючим цей елемент атрибутом (Click Classes, Click ID…). Значення атрибута можна отримати, звернувшись до коду сторінки сайту. Щоб вбудована змінна Click Classes стала доступною, не забуваймо її активувати на вкладці “Змінні”:  

GTM

 

3. Далі створюємо тег, який надсилатиме подію в аналітику. Створюємо новий тег типу “Universal Analytics”. Як тип відстеження вибираємо “Подія”, вказуємо обов’язкові параметри “Категорія”, “Дія”.

GTM

4. Додаємо умову активації – тригер, створений на 3-му кроці.

У випадку, коли необхідно налаштувати відстеження кліка по будь-якому елементу на вебсторінці, а у цього елемента немає атрибутів, що його ідентифікують, таких як, наприклад, ID, class або URL, завдання відстеження можна вирішити за допомогою селекторів CSS.

 

Відстеження відправки форм в GTM V2

 

Якщо виникає потреба налаштувати відстеження відправки форми, для початку потрібно визначити, яким способом передаються дані форми на сервер, оскільки залежно від цього налаштування GTM будуть відрізнятися. Надіслати дані з форми можна за допомогою методу submit або у фоновому режимі через ajax. У першому випадку відбуватиметься перезавантаження сторінки, у другому – ні.

 

Відстеження форм, що надсилають дані за допомогою submit

 

Якщо дані надсилаються через submit, для відстеження такої події можна прив’язатися до класу або ідентифікатора форми. Налаштування здійснюється аналогічно до налаштування відстеження кліків.

1. Створюємо новий тригер, як тип події тригера вибираємо “Відправлення форми” замість “Клік”.

GTM

Якщо активувати хоча б одну з опцій “Чекати на теги”, “Перевірка помилок”, про які я вже писала в пункті “Відстеження кліків”, з’явиться додатковий крок створення тригера “Умови включення”. Це не те саме, що умова активації. Умова включення дозволяє вказати, у яких випадках тригер має бути доступним, тобто за яких умов повинні прослуховуватися надсилання форм. Поширеною умовою включення тригера типу “форма” є лише ті сторінки, у яких є форми.

GTM

При установці опції “Чекати на теги” обов’язково тестуйте події. Якщо виникають проблеми, знімайте чекбокс. Щоправда, у такому разі, є ймовірність, що частина звернень може бути втрачена. На четвертому етапі вказуємо умову активації. Прив’язуємося до атрибуту, що ідентифікує потрібну форму (Form ID, Form Classes, …). Не забуваймо активувати необхідну вбудовану змінну перед використанням.

GTM

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 – ім’я відповідної події.

       Детальніше про dataLayer

  • У GTM створюємо користувальницьку подію event_name. Додаємо новий тригер “Подія користувача”.

    GTM

    І за умови його активації вказуємо івент, який відправили за допомогою dataLayer.push().

    GTM

  • Далі створюємо тег, який надсилатиме подію в аналітику. Як умову активації вибираємо тригер, створений на попередньому кроці.

Якщо у вас виникла потреба відстежувати взаємодію з окремими елементами форм, ви можете ознайомитися з докладним описом методів у статті Відстеження взаємодії з елементами форм за допомогою GTM.

 

Віртуальні сторінки в GTM V2

 

1. Створюємо новий тег типу “Google Analytics” з типом відстеження “Перегляд сторінки”. У додаткових параметрах додаємо нове поле, в ньому шукаємо параметр “page”. Вказуємо URL віртуальної сторінки, яку хочемо бачити в аналітиці.

GTM

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

 

Оновлення від 5.10.16 Одне з найчастіших питань, яке мені ставили – як відстежити копіювання на сайті. Відповідь на це запитання я виділила у окремий пост.

Нова стаття, присвячена роботі в Google Tag Manager, доступна за посиланням.