НАПИСАТИ НАМ
10
.
07
.
2024

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

PPC
Поради експерта
ЗМІСТ

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

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

Що таке Google Tag Manager?

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

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

Google Tag Manager 1.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Увімкніть режим попереднього перегляду. Натисніть кнопку «Попередній перегляд» у верхньому правому куті інтерфейсу gtm google.
Google Tag Manager 4
  1. Введіть свій сайт у вікні, що зʼявився, та переконайтеся, що тег встановлено на сайті.
Google Tag Manager 5

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

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

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

Типи тегів:

  • Google Analytics: відстежує дії користувача.
  • AdWords Conversion Tracking: Відстежує конверсії від реклами.
  • Remarketing Tags: Збирає дані для ремаркетингу.
  • Facebook Pixel: Відстежує дії для Facebook реклами.
  • Hotjar Tracking: Збирає дані для аналізу поведінки користувачів.
Google Tag Manager 5
Тригер визначає, коли повинен запускатися тег. Це може бути завантаження сторінки, натискання кнопки або подання форми. Наприклад, тригер може бути налаштований так, що він активується кожного разу, коли користувач натискає на певний елемент на сторінці. Таким чином, тригери дозволяють точно визначити умови, за яких мають виконуватися теги.

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

  • Page View: Активується при завантаженні сторінки.some text
    • All Pages: Запускається на всіх сторінках.
    • Some Pages: Запускається на певних сторінках за умовами.
  • Click:some text
    • All Elements: Відстежує всі натискання.
    • Just Links: Відстежує лише натискання на посилання.
  • Form Submission: Активується при відправленні форми.
  • Scroll Depth: Відстежує глибину прокручування сторінки.
  • Timer: Запускається через певний час після завантаження сторінки.
Google Tag Manager 6
Змінна – це елемент даних, який використовується тегами і тригерами для забезпечення додаткової інформації. Наприклад, змінна може містити 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 Tag Manager 7

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

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

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

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

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

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

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

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

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

Google Tag Manager 9

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

Google Tag Manager 10

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

Google Tag Manager 12

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

Google Tag Manager 13

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

Google Tag Manager 14

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

Google Tag Manager 15

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

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

Створення конверсії в Google Ads
  • Увійдіть до свого облікового запису на ads.google.com.
  • Перейдіть до Goals > Conversions > Summary.
Google Tag Manager 16
  • Натисніть "Нова дія конверсії" і виберіть «Веб-сайт».
Google Tag Manager 17
  • Введіть URL вашого сайту та натисніть «Сканувати».
Google Tag Manager 17
  • Виберіть «Додати дію конверсії вручну».
Google Tag Manager 18
Налаштування конверсії
  • Виберіть тип дії, в нашому випадку це буде — Subscribe.
  • Введіть назву конверсії, наприклад, «Форма підписки».
  • Вкажіть цінність кожної конверсії.
  • Виберіть підрахунок як «Одиниця».
  • Натисніть «Зберегти та продовжити».
Google Tag Manager 19

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

Google Tag Manager 20

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

  • Створюємо новий тег «Теги» > New.
Google Tag Manager 22
  • Виберіть Google Ads > Google Ads Conversion Tracking.
Google Tag Manager 23
Google Tag Manager 24
  • Введіть ідентифікатор та мітку конверсії, які уже отримали з рекламного кабінету.
Google Tag Manager 25
  • Створіть «Тег зв’язування конверсій», клікнувши на Create, введіть назву тегу та збережіть його.
Google Tag Manager 26
  • Встановіть тригер для події, у нашому випадку це буде успішна відправка форми.
Google Tag Manager 27
Google Tag Manager 28
  • Збережіть тригер і тег.

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

Google Tag Manager 29

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

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

Google Tag Manager 30

Висновок

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

ТАКОЖ НА ЦЮ ТЕМУ:

Підпишіться
на розсилку
Дякуємо за підписку!
Упс! Щось пішло не так. Спробуйте ще раз
В закладки

ДОПОМОГТИ В НАЛАШТУВАННІ GOOGLE TAG MANAGER МОЖУТЬ ФАХІВЦІ PROMODO. НАПИШІТЬ НАМ, ЩОБ МИ НАЛАШТУВАЛИ ВСЕ ЗАМІСТЬ ВАС АБО ОПТИМІЗУВАЛИ ДЕТАЛІ. 

Захочете отримати юзабіліті-аудит і персональні рекомендації для свого інтернет-магазину — напишіть нам.

Обговоримо ваш проєкт?
Надіслати заявку
Ваше повідомлення відправлено
Наш менеджер зв‘яжеться з вами найближчим часом.
Назад
Упс! Щось пішло не так. Спробуйте ще раз
ДОЛУЧАЙСЯ ДО
КОМАНДИ PROMODO ❤️
Надіслати заявку
Ваше повідомлення відправлено
Наш менеджер зв‘яжеться з вами найближчим часом.
Назад
Упс! Щось пішло не так. Спробуйте ще раз