Вчимося працювати в Google Tag Manager

Що таке Google Tag Manager (GTM) і для яких цілей його можна використовувати

В роботі інтернет-маркетолога є безліч завдань, що вимагають встановлення додаткових фрагментів відстеження на сайт. Наприклад, якщо ви запускаєте рекламу в Facebook/Instagram, вам знадобиться встановити Facebook Pixel. При роботі з контекстною рекламою в Google Ads, відповідно, буде корисний тег цієї системи. Для аналізу ефективності залученого трафіку потрібно встановити код системи веб-аналітики, а то й кілька. Також буде потрібно втручання в код сайту, якщо ви захочете відстежувати не лише перегляди сторінок, а й взаємодії користувача з контентом: кліки по кнопках, відправки форм, перегляди відео тощо.

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

Як встановити Google Analytics через Google Tag Manager

На даний момент окрім існуючої та вже звичної Google Universal Analytics у використання активно входить Google Analytics 4. Стандарт Google Analytics 4 є новою версією Google Analytics, засновану на типі ресурсу App+Web. Новий підхід дозволяє відстежувати дії користувачів на сайті та у додатку згідно з єдиною логікою збору даних та аналізувати цю інформацію в єдиному інтерфейсі. Інструкцію, як налаштувати Google Analytics 4 за допомогою Google Tag Manager, я виділила у окрему статтю: https://odesseo.com.ua/google-analytics-4-kak-nastroit-sbor-dannyh-dlya-novogo-tipa-resursa/

Оскільки на сьогоднішній день Google Analytics 4 ще не готова повною мірою замінити Universal Analytics (не всі функції доступні, інструментарій поступово тільки з’являється в облікових записах), то поки не варто відмовлятися від старого стандарту аналітики. Краще збирати дані в обидва ресурси паралельно. Розглянемо, як настроїти Universal Analytics за допомогою GTM.

Створюємо новий тег. Це можна зробити на сторінці «Огляд»

Або на вкладці «Теги».

Вибираємо тип тега: «Google Аналітика — Universal Analytics».

Тип відстеження: «Перегляд сторінки».

Щоб визначити, у який ресурс Google Analytics надсилати дані, створюємо нову змінну «Налаштування Google Analytics».

У полі «Ідентифікатор відстеження» вказуємо ID ресурсу аналітики.

Як знайти ID ресурсу Google Analytics: відкрийте налаштування ресурсу у вашому обліковому записі GA та скопіюйте його.

Задаємо тригер, за яким надсилатимуться дані.

Тригер — це умова активації тега (перегляд сторінки, клік по кнопці, відправка форми тощо). Для базового збору переглядів обираємо «All Pages».

Після збереження тега, щоб нова версія Google Tag Manager з’явилася на сайті, її потрібно опублікувати.

Перед публікацією зручно протестувати зміни за допомогою режиму попереднього перегляду та налагодження (інтегрований із розширенням для браузера Tag Assistant by Google). Це допоможе перевірити коректність налаштувань і уникнути помилок.

Щоб перейти до налагодження, увійдіть у режим перегляду у верхньому правому кутку.

Після цього у новій вкладці браузера з’явиться спливаюче вікно, де потрібно вказати посилання на ваш сайт і натиснути Start.

У поточній вкладці відкриються елементи налагодження, а в новій — ваш сайт у режимі попереднього перегляду. Розберемо основні частини відладчика.

Область 1 (меню зліва) показує інформацію про сторінки сайту та зареєстровані події у хронологічному порядку. При завантаженні сторінки тут буде перелік подій, які GTM надсилає за замовчуванням:

• Container Loaded (gtm.js) — спрацьовує якомога раніше після завантаження сторінки;
• Подія DOM Ready (gtm.dom) — спрацьовує, коли модель DOM готова;
• Window Loaded (gtm.load) — спрацьовує, коли повністю завантажиться початковий контент.

В області 2 (Tags Fired) показані теги, які активовані на цій сторінці. В області 3 (Tags Not Fired) — теги, які ще не активовані. Як тільки тег буде активовано дією на сайті, він переміститься з цього розділу до другого.

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

При завантаженні сторінки у налагоджувачі бачимо, як спрацював створений нами тег Google Analytics.

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

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

Як встановити Facebook Pixel через Google Tag Manager

У Google Tag Manager є вбудовані теги (Google Ads, Google Optimize та інші). Якщо потрібно додати код системи, якої немає за замовчуванням (наприклад, Facebook Pixel), це робиться за допомогою тега користувача.

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

Про користувацькі теги в Google Tag Manager.
Якщо ви часто використовуєте певний користувацький код, його можна обернути у зручний інтерфейс. Для цього в GTM існують Custom Templates (користувацькі шаблони).
Мій досвід створення власного шаблону.

Відстеження дій користувачів на сайті за допомогою Google Tag Manager

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

Приклад 1. Відстеження часу, проведеного на сторінці

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

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

У налаштуваннях таймера вказуємо «Інтервал» – час, через який має активуватися подія. Час задається у мілісекундах. Також можна встановити обмеження на кількість активацій події та одразу вказати умови, за яких тригер буде включений.

2. Створюємо новий тег типу Google Analytics.

Тип відстеження – подія. Вказуємо параметри події (“Категорія”, “Дія”, “Ярлик”, “Значення”).

Для зручності подальшого аналізу можна вказати змінну Page URL. Це дозволить одразу у звіті подій подивитися, на яких сторінках надсилалися дані по таймеру.

У полі «Не взаємодія» залишаємо значення False, якщо ви хочете, щоб відправка події впливала на показник відмов сайту, тобто відвідування сайту з цією подією не вважалося відмовою. Інакше задаємо значення True.

Умовою активації вибираємо створений на попередньому кроці тригер «Таймер».

Тестуємо в режимі попереднього перегляду. Відкривши сторінку та зачекавши 30 секунд, ви помітите подію Timer та активацію тега відправки події у GA.

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

і додати його як виняток.

Приклад 2. Надсилання події при натисканні на кнопку

Створюємо новий тригер.

Оскільки я налаштовую відстеження кліка по кнопці, як тип тригера вкажу «Клік» – «Всі елементи».

Далі задаємо умову активації. За замовчуванням встановлено всі кліки. Це означає, що тригер приводить у дію тег при будь-якому кліку на сайті. Мені ж потрібно відстежити конкретний клік, тому я поставлю варіант «деякі кліки». У меню, що з’явилося, додаємо умову активації.

Тут нам необхідно ідентифікувати елемент, яким ми хочемо відстежити клік. Наприклад, розглянемо, як відстежити клік на кнопці «Залишити заявку».

Ідентифікувати цю кнопку можна за допомогою однієї із вбудованих змінних групи «Кліки»: Click ID, Click Classes, Click Text та ін. У цьому прикладі найпростіше і швидке рішення – прив’язатися до тексту кнопки: «ЗАЛИШИТИ ЗАЯВКУ». Тобто тригер виглядатиме так:

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

Зберігаємо тригер і створюємо новий тег надсилання даних у Google Analytics типу «Подія».

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

Які завдання можна вирішувати за допомогою GTM

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

• Як відстежувати глибину скролінгу в Google Analytics, використовуючи GTM
• Взаємодія з формами в Google Analytics, використовуючи GTM
• Відслідковування потрапляння елементів до зони видимості користувача
• Коли важливі не тільки кліки. Збираємо статистику щодо наведення курсору на елементи сайту
• Відслідковуємо, що копіюють на нашому сайті! Google Analytics + GTM

Ще кілька популярних завдань, які можна вирішити за допомогою GTM:

• Відстеження помилок JavaScript на сайті;
• Налаштування стандартної та розширеної електронної торгівлі для інтернет-магазинів;
• Налаштування динамічного ремаркетингу для рекламних систем (Як налаштувати піксель Facebook; передавати дані для роботи динамічного ремаркетингу);
• Проведення A/B-тестування;
• Розміщення банерів на вашому сайті.