Google Tag Manager для початківців: як налаштувати і використовувати

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

‍

У цьому гайді від Web-аналітика в Promodo Андрій Корнят ми розглянемо основні можливості Google Tag Manager, крок за кроком розберемо процес його налаштування і покажемо, як ефективно використовувати цей інструмент для досягнення бізнес-цілей.

Що таке Google Tag Manager?

Для встановлення інструментів трекінгу Google Analytics, Hotjar, Meta Pixel тощо на сайті потрібно додати частину JavaScript-коду. Для маркетологів ці коди збирають дані про тривалість відвідувань сторінок, заповнення форм, джерела трафіку, кліки на посилання та інші дії користувачів. Наприклад, код Google Analytics може відстежувати, скільки людей заповнюють форму на сторінці «Зв’яжіться з нами» та надсилати цю інформацію в Google Analytics.

‍

Приклад, як може виглядати JavaScript-код:

Додавання одного інструменту відстеження не є складним завданням. Однак проблема виникає, коли потрібно додавати більше скриптів для відстеження взаємодій, продажів та інших подій. Це перетворюється на постійний процес, де нові коди мають регулярно додаватися та змінюватися. Тут може виникнути затримка, оскільки IT-відділ має свої пріоритети, і маркетингові завдання часто стають другорядними.

‍

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

Google Tag Manager (GTM) — це безкоштовне рішення для керування тегами від Google, яке слугує посередником між вашим сайтом і маркетинговими або аналітичними інструментами. З його допомогою можна додавати та оновлювати теги та фрагменти коду без залучення розробників. Ви додаєте коди відстеження до гугл тег менеджер та налаштовуєте правила для їх активації, наприклад, під час завантаження сторінки або натискання кнопки.

Уявіть тег менеджер як панель інструментів, де зберігаються всі необхідні інструменти для маркетингу та аналітики, такі як Google Analytics або Google Ads. Gtm google також дозволяє тестувати теги, щоб переконатися, що вони правильно активуються, і забезпечує можливість змінювати теги та їх поведінку без зміни вихідного коду сайту.

‍

За допомогою облікового запису Менеджера тегів ви можете:

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

Переваги використання gtm google:

Швидке розгортання кодів відстеження: ви можете самостійно додавати коди відстеження без залучення розробників, що економить час і ресурси.
Контроль тегів в одному місці: усі теги керуються через інтерфейс GTM, усуваючи потребу в редагуванні вихідного коду веб-сайту і зменшуючи ризик людських помилок.
Вбудовані та сторонні засоби тестування: тег менеджер має режим попереднього перегляду та налагодження, що дозволяє перевірити роботу тегів перед їх публікацією, знижуючи ймовірність помилок.
Просте відстеження подій: GTM автоматично відстежує події, такі як кліки і подання форм, спрощуючи процес налаштування і підвищуючи точність даних.
Готові шаблони тегів: тег менеджер пропонує вбудовані шаблони для популярних інструментів, таких як Google Analytics і Google Ads, що дозволяє швидко і легко налаштовувати теги без необхідності глибоких знань кодування.

Як створити обліковий запис гугл тег менеджер

Перейдіть на офіційний веб-сайт Google Tag Manager: https://tagmanager.google.com/
Натисніть на кнопку Create Account для створення нового проєкту.

https://monosnap.com/file/51FHRxQhlnabHz5B0MPAQCElvxAtUj

Увійдіть за допомогою свого облікового запису Google;
Створіть обліковий запис GTM;
Введіть назву вашого підприємства в полі «Назва облікового запису»;
Введіть назву вашого сайту (домен або просто ім'я);
Виберіть «Веб» як цільову платформу.

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

Як встановити Google Tag Manager на сайт

Після створення контейнера у GTM ви отримаєте два коди, які потрібно додати на ваш сайт.

Перший код додайте в секцію <head> вашого сайту.
Другий код додайте одразу після відкриваючого тегу <body>.

Передайте ці інструкції вашому розробнику, щоб він правильно додав коди.

Якщо ви використовуєте систему управління вмістом, наприклад, WordPress, або Shopify використовуйте плагіни для полегшення процесу установки. Ці коди забезпечать запуск всіх налаштованих тегів на вашому веб-сайті.

Як перевірити, чи працює Менеджер тегів Google?

Увімкніть режим попереднього перегляду. Натисніть кнопку «Попередній перегляд» у верхньому правому куті інтерфейсу gtm google.

Введіть свій сайт у вікні, що зʼявився, та переконайтеся, що тег встановлено на сайті.

Як працює Менеджер тегів Google?

Для початку важливо зрозуміти три основні поняття: теги, тригери та змінні.

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

Типи тегів:

Google Analytics: відстежує дії користувача.
AdWords Conversion Tracking: Відстежує конверсії від реклами.
Remarketing Tags: Збирає дані для ремаркетингу.
Facebook Pixel: Відстежує дії для Facebook реклами.
Hotjar Tracking: Збирає дані для аналізу поведінки користувачів.

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

Типи тригерів

Page View: Активується при завантаженні сторінки.some text
- All Pages: Запускається на всіх сторінках.
- Some Pages: Запускається на певних сторінках за умовами.
Click:some text
- All Elements: Відстежує всі натискання.
- Just Links: Відстежує лише натискання на посилання.
Form Submission: Активується при відправленні форми.
Scroll Depth: Відстежує глибину прокручування сторінки.
Timer: Запускається через певний час після завантаження сторінки.

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

Типи змінних

Built-in Variables:some text
- Page URL: Адреса сторінки.
- Click ID: ID натиснутого елемента.
User-Defined Variables:some text
- Custom JavaScript: Виконання власного коду JavaScript.
- Constant: Постійне значення, яке можна використовувати в тегах і тригерах.
Data Layer Variables: Дані, передані через Data Layer.some text
- ecommerce.purchase: Дані про покупки.
- event: Події, визначені в Data Layer.

Приклад взаємодії між тегами, тригерами та змінними:

Тег: Тег конверсії Google Ads відстежує завершення покупки.
Тригер: Тег запускається на сторінці подяки з URL-адресою, що містить "purchase-success".
Змінна: Загальна сума замовлення передається в Google Ads під час активації тегу.

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

Налаштування тегів в гугл тег менеджер

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

Налаштуємо тег конфігурації GA4 на наш сайт.

Створіть новий тег:

Натисніть "Tags" у меню зліва.
Натисніть кнопку "New" для створення нового тегу.

Налаштуйте тег: Назвіть тег та натисніть Tag Configuration.

У вас відобразиться десятки типів тегів різноманітних маркетингових платформ, які ви можете використовувати. Оберіть Google Analytics:

Та оберіть Google Tag.

Після чого вставте MEASUREMENT ID з вашої GA4.

Та оберіть тригер клачнувши у будь-якому полі блоку Triggering та оберіть All Pages.

Збережіть тег:

Налаштуємо тег конфігурації Google Ads на наш сайт

Перш ніж перейти до налаштування тегу в GTM, нам спочатку потрібно отримати Conversion ID.

Створення конверсії в Google Ads

Увійдіть до свого облікового запису на ads.google.com.
Перейдіть до Goals > Conversions > Summary.

Натисніть "Нова дія конверсії" і виберіть «Веб-сайт».

Введіть URL вашого сайту та натисніть «Сканувати».

Виберіть «Додати дію конверсії вручну».

Налаштування конверсії

Виберіть тип дії, в нашому випадку це буде — Subscribe.
Введіть назву конверсії, наприклад, «Форма підписки».
Вкажіть цінність кожної конверсії.
Виберіть підрахунок як «Одиниця».
Натисніть «Зберегти та продовжити».

Після чого у вас відобразиться ваша конверсія в рекламному кабінеті. Вам необхідно буде перейти в «Переглянути тег події» та отримати його Conversion ID та Conversion Label.

Створення тегу в тег менеджер

Створюємо новий тег «Теги» > New.

Виберіть Google Ads > Google Ads Conversion Tracking.

Введіть ідентифікатор та мітку конверсії, які уже отримали з рекламного кабінету.

Створіть «Тег зв’язування конверсій», клікнувши на Create, введіть назву тегу та збережіть його.

Встановіть тригер для події, у нашому випадку це буде успішна відправка форми.

Збережіть тригер і тег.

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

Після чого ви попадете на сторінку «Конфігурація публікації». Є два варіанти: «Опублікувати та створити версію» або «Створити версію».

Наприклад, я готовий розмістити тег на всіх сторінках свого сайту, я вибрав «Опублікувати та створити версію», а потім натиснув синю кнопку Publis у верхньому правому куті, щоб розмістити усі ваші теги на сайт.

Висновок

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

Google Tag Manager: гайд для початківців