PPC 3 Minute

Вчимося працювати в GTM

Анастасія Тимошенко

26.06.2015

82 коментарі

Google Tag Manager V2

У зв’язку з оновленням акаунтів 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 або VK). Фрагменти 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 – ім’я відповідної події.

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

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

  

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

  

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

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

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

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

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

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

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