Google Tag Manager (GTM) – це зручний та простий інструмент для керування кодами відстеження та аналітики: лічильники, пікселі та інші скрипти сторонніх систем. Завдяки цьому інструменту можна додавати теги на сайт без втручання розробника. Якщо точніше, вебмастер один раз додає контейнер або майстер-код на сайт, після чого коди та скрипти можна додавати прямо через веб-інтерфейс GTM .
Вам не доведеться чекати, поки розробник знайде вільний час, щоб поставити код на сайт. Все можна зробити самостійно, та бонусом заощадити гроші на розробниках.
Також можна швидше впроваджувати необхідні зміни — наприклад, змінювати налаштування аналітики, підключати відстеження нових форм та кнопок, ефективніше налаштовувати контекстну рекламу та аналізувати трафік.
Переваги та недоліки Google Tag Manager
Перш ніж використовувати інструмент, розберемося, у чому його переваги порівняно з традиційним розміщенням тегів та скриптів.
- Можна інтегрувати практично будь-які теги. Крім шаблонів Google Analytics, тут є готові рішення для найпопулярніших сервісів та систем аналітики та реклами. Якщо ви не знайшли відповідний шаблон, можна скористатися шаблоном «HTML користувача».
«Користувацький HTML» та «Користувацьке зображення» дозволяють вирішити будь-які завдання, які не передбачили розробку.
- Можливість налагодити тег до запуску його на сайті . Для цього використовується перегляд.
- Контроль версій . Ви завжди можете у два кліки відкотитися до попередньої версії налаштувань.
- Асинхронне завантаження тегів . На відміну від аналогів, GTM практично не впливає на швидкість завантаження сайту.
- Можливість виконувати текстову заміну на сайті без втручання у код . Це криниця для маркетолога, який тепер може тестувати заголовки та інші текстові елементи сайту без залучення розробника.
Тепер перейдемо до недоліків:
- Проблема з налаштуванням цілей на віджети Getcourse . Нещодавно сам зіткнувся із такою проблемою. Для налаштування довелося спочатку налаштовувати взаємодію GetCourse з Google Analytics 4 і лише потім підключати ціль в Google Tag Manager. Можливо, така ж проблема буде і з іншими сервісами, які пропонують використовувати сторонній код у віджетах та формах заявки.
- Необхідність використання пошти Google . Вам потрібно буде зареєструвати обліковий запис, який точно залишиться з вами, якщо фахівець, який працює з сайтом, піде.
Загалом переваг у Google Tag Manager більше, ніж недоліків. Наявні мінуси локальні і не кожен підприємець та фахівець із реклами з ними стикається.
Терміни, що використовуються в GTM
Для початку роботи з менеджером тегів необхідно з’ясувати термінологію цього сервісу, щоб розуміти, що і як працює. Подивіться, за що відповідає той чи інший термін у сервісі, і ви швидко зрозумієте його зміст та призначення:
Встановлення Google Tag Manager на сайт
Зараз ми розглянемо два способи – підходящий для всіх, а також специфічний спосіб встановити на сайт під керуванням WordPress.
Універсальний спосіб підключення до сайту
Далі нам потрібно зайти на сайт Google Tag Manager, щоб виконати первинне налаштування. Для реєстрації в сервісі вам знадобиться пошта Gmail. Натискаємо на кнопку Start for free:
Стартова сторінка
Додаємо новий обліковий запис:
Створюємо обліковий запис
Вказуємо назву облікового запису: у мене це ім’я автора блогу, на який буде встановлений GTM.
Налаштування облікового запису: обов’язково вказуємо країну:
Створюємо контейнер: вказуємо назву та вибираємо цільову платформу для роботи. У моєму випадку це «Веб-сайт»:
Під час створення контейнера вказуємо, що у нас веб-сайт
Після натискання на кнопку «Створити» відкривається віконце із двома фрагментами коду. Зараз нас цікавить перший фрагмент – скопіювати та вставити на сайт.
Система пропонує встановити код на сайт
Відкриваємо код потрібного сайту у редакторі. У вас це може бути редактор хостингу, а мені зручніше користуватися програмою Notepad++. Вставляємо перший код якомога ближче до тега <head>. Це робиться для того, щоб ви змогли відстежити навіть користувачів, які закрили сайт до моменту повного завантаження. Ось так виглядає код на сайті:
Перша частина коду встановлюється відразу після тега <head>
Копіюємо другий код. Його потрібно розмістити відразу після тега <body>. Логіка тут така сама. Чим швидше завантажуватиметься тег Google Tag Manager, тим повнішою буде статистика.
Друга частина коду після тега <body>
Процес встановлення досить простий, хоча на CMS краще використовувати готові плагіни або модулі, тому що так буде надійніше. Зараз ми розглянемо установку GTM у такий спосіб.
Встановлення Google Tag Manager на WordPress
Існує кілька способів підключення:
- Встановити контейнер в код сайту.
- Установка за допомогою плагіна чи модуля.
Вибір конкретного методу залежить від технічних особливостей вашого сайту, а також від CMS, що використовується. У деяких випадках вам доведеться скористатися послугами розробника. Я ж розгляну встановлення системи на найпопулярнішій CMS WordPress. Необов’язково лізти в код сайту, можна скористатися готовим плагіном Google Tag Manager for WordPress .
Перед початком встановлення краще продумати, які теги вам потрібні будуть, щоб не кидатися в процесі налаштування.
Що таке глобальний тег
Традиційний шлях встановлення систем аналітики має на увазі використання глобального тегу сайту gtag.js. Такий спосіб не дуже гнучкий, тому що всі редагування доведеться робити руками безпосередньо в коді сайту і встановлювати всі сторонні скрипти за допомогою розробника ресурсу. Це додаткові витрати на бізнес.
Для нового сайту ми рекомендуємо одразу використовувати Google Tag Manager. Але постає питання: що робити, якщо на сайті вже стоїть глобальний тег? Можна без проблем застосовувати ці два способи одночасно видаляти вже встановлений код gtag.js необов’язково.
Налаштування тега
Так як у нас як приклад взятий сайт на движку WordPress, для установки використовувався плагін Google Tag Manager for WordPress від Thomas Geiger. Знайти та встановити його можна прямо з адміністративної панелі сайту. У WordPress зайдіть у вкладку «Плагіни» і натисніть на кнопку «Додати новий». Далі в пошуковому рядку наберіть назву плагіна, і система сама знайде її:
Плагін для встановлення
Активуємо плагін і переходимо знову у вкладку «Плагіни». Знаходимо встановлений плагін та натискаємо на посилання «Налаштування»:
Після цього переходимо до особистого кабінету. Якщо він ще не налаштований, виконуємо налаштування, як було описано раніше. Не лякайтеся того, що станеться далі: після натискання на кнопку «Створити» система перекине вас у віконце з пропозицією встановити код на кожну сторінку сайту. Нам це не потрібно – ми використовуємо для налаштування плагін, тому просто закриваємо це вікно.
Вам потрібен ідентифікатор облікового запису, який знаходиться на вкладці «Адміністрування». Скопіюйте ідентифікатор, який там відображено.
Повертаємось до адміністративної панелі сайту. Нагадаю, що там розпочали налаштування плагіна. На головній вкладці вставляємо скопійований ідентифікатор. Також перевіряємо розташування коду контейнера. За умовчанням він розміщується в підвалі сайту: я раджу не змінювати це налаштування, оскільки це забезпечує максимальну швидкість завантаження сайту.
Підключення облікового запису до плагіна на сайті
Далі нам знадобиться вкладка Integration. Google Tag Manager може інтегруватись з декількома популярними плагінами, і на цій вкладці ми можемо вибрати, з якими саме. У мене встановлений плагін Contact Form 7, ставлю галочку у чек-боксі. Якщо у вас є інші плагіни зі списку на вкладці, увімкніть інтеграцію, це дозволить їм ефективно взаємодіяти.
Підключаємось до плагіна Contact Form 7
Тепер залишається лише зберегти зміни.
Переходимо до панелі керування для налаштування тега. Перше, що зазвичай роблять – підключають до сайту Google Analytics 4. До сайту з прикладу підключений Analytics Universal.
У робочій області сервісу натискаємо на плашку «Новий тег» або на посилання «Додати новий тег»:
Створюємо новий тег
Бачите два поля? В одному ми конфігуруємо тег, а в іншому — вибираємо тригер, який його активуватиме. На цьому етапі нас цікавить поле “тег”.
Так виглядає стартова сторінка налаштування нового тега
Ідемо до Google Analytics 4 і знаходимо ідентифікатор потоку. Заходимо як адміністратор та клацаємо на «Потоки даних».
Знаходимо ідентифікатор Google Analytics 4
Вибираємо потрібний потік даних. Ви можете мати кілька потоків, тому обирайте відповідний.
Далі ми потрапляємо на вкладку “Відомості про потік”. Тут необхідно скопіювати ідентифікатор потоку даних.
Повертаємось на сторінку Tag Manager. Даємо назву тегу та клацаємо на конфігурацію. Відкривається вікно, де вставляємо скопійований з GA4 ідентифікатор:
Тепер проведемо налаштування у плашку «Трігери»:
Налаштовуємо тригер для активації налаштованого тега
Тут пропонуються три стандартні тригери. Нам потрібно налаштувати просте відстеження, тому вибираємо All Pages:
Вибираємо тригер «Всі сторінки»
Вікно з налаштуванням тега буде виглядати, як показано нижче. Нам залишається натиснути кнопку «Зберегти», і на цьому початкове налаштування завершено.
Так виглядає тег після налаштування
Далі налаштовані налаштування потрібно опублікувати. Для цього на головній сторінці натискаємо кнопку “Опублікувати”. Тут можна побачити одну з переваг – коли ви можете присвоїти будь-яку назву версії налаштувань і за необхідності повернутися до них у будь-який момент.
