Ви заходите в адмінку WordPress, відкриваєте редактор теми та вставляєте черговий фрагмент JavaScript у header.php. Знайомо? За місяць таких фрагментів набирається з десяток: аналітика, рекламні пікселі, чат, теплові карти. Сайт важчає, а розібратися в мішанині коду стає дедалі складніше.

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

Нижче, покроковий посібник зі встановлення GTM на WordPress: ручний спосіб, спосіб через плагін і налаштування Google Analytics 4 без жодного рядка коду на сайті.

💡 Швидкий огляд:

• Створюєте безплатний акаунт Google Tag Manager і отримуєте контейнер із двома кодами встановлення
• Додаєте коди на WordPress: вручну через header.php (2 хвилини) або через плагін GTM4WP (1 хвилина, без правок теми)
• Підключаєте Google Analytics 4 усередині GTM: тег «GA4 Configuration» плюс тригер «All Pages», жодного рядка JS на сайті
• Тестуєте через режим попереднього перегляду GTM, публікуєте контейнер, і всі теги працюють

Що таке Google Tag Manager

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

Тег у контексті цифрового трекінгу — це фрагмент JavaScript, який активує сторонні функції: аналітику трафіку, рекламні кампанії, чати, теплові карти. Їх ще називають вебмаяками або пікселями відстеження. Класичний приклад, код Google Analytics, який ви додаєте на сайт для відстеження відвідувань.

Постачальники тегів — це платформи на кшталт Google Analytics, Google Ads, Meta (Facebook), LinkedIn, Hotjar і десятки інших. Кожен із них пропонує свій JS-фрагмент. Без системи керування тегами всі ці фрагменти живуть прямо в коді теми WordPress.

Навіщо потрібен Google Tag Manager

Традиційний підхід, ручне редагування header.php, functions.php та інших файлів теми, породжує три проблеми.

Перша, швидкість сайту. Кожен сторонній JS-скрипт додає ваги сторінці та збільшує час завантаження. Десяток тегів від різних постачальників, і Site Speed у Google Search Console забарвлюється в червоний.

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

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

Google Tag Manager знімає всі три проблеми:

• Один контейнер замість десятка тегів. На сайті, лише пара рядків коду GTM. Уся логіка тегів живе в хмарному інтерфейсі.

• Встановлення без розробника. Інтерфейс GTM інтуїтивний: вибрали тип тега, вказали ID відстеження, призначили тригер, готово. Жодного рядка коду на сайті.

• Вбудовані інтеграції. GA4, Google Ads, Floodlight, десятки сторонніх шаблонів, вибираєте зі списку, а не копіюєте код.

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

• Версіонування. GTM зберігає історію всіх опублікованих версій контейнера. Відкотити невдалу конфігурацію, дві секунди.

Безплатна версія GTM покриває потреби переважної більшості сайтів. Платна версія (Google Tag Manager 360) додає розширену підтримку та підвищені ліміти для великих enterprise-проєктів, але для WordPress-сайту будь-якого масштабу безплатного тарифу більш ніж достатньо.

У GTM є крива навчання, інтерфейс спочатку може здатися перевантаженим. Але базові сценарії (GA4 + пара маркетингових тегів) освоюються за годину. Для поглибленого вивчення наприкінці поста, перевірене відео на YouTube.

Як налаштувати Google Tag Manager для WordPress

Далі, два способи встановлення: ручний (через файл теми) і через плагін GTM4WP. Обидва робочі, вибирайте під свій стиль роботи.

Створіть акаунт Google Tag Manager

Перший крок, безплатний акаунт GTM. Він дає вам контейнер та ID, який знадобиться для інтеграції з WordPress.

Перейдіть на сайт Google Tag Manager та увійдіть під своїм обліковим записом Google.

Натисніть «Створити акаунт» на панелі адміністратора GTM.

Введіть назву акаунта (наприклад, назву компанії), виберіть країну та натисніть «Продовжити».

Потім вкажіть ім’я контейнера (зазвичай домен сайту), виберіть «Веб» як ціль використання та натисніть «Створити».

Прийміть умови використання Google Tag Manager та умови обробки даних.

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

GTM показує інструкцію з розміщення кодів: перший, якомога вище в <head>, другий, одразу після відкривального <body>. Звучить просто, але для новачка у WordPress це може бути неочевидно. Нижче розбираємо обидва способи.

Важливо перед тим як продовжити:

• Зробіть резервну копію сайту перед редагуванням файлів теми. Відкат бекапу через плагін на кшталт UpdraftPlus займає хвилину, відновлення зламаної теми, годину.
• Ще краще, створіть дочірню тему WordPress і редагуйте її замість батьківської. Оновлення батьківської теми не затиратиме ваші правки.

Ручне встановлення GTM через header.php

В адмінці WordPress перейдіть у «Зовнішній вигляд → Редактор теми».

На скриншоті використовується дочірня тема з файлами header.php (заголовок), footer.php (підвал), rtl.css і 404.php. Коди GTM вставлятимемо у header.php.

Клацніть «Заголовок теми (header.php)» на правій панелі навігації файлами.

Дотримуйтесь інструкції GTM: перший код, якомога вище в <head>, другий, одразу після відкривального тега <body>. У WordPress тег <body> зазвичай має вигляд <body <?php body_class(); ?>>.

Скопіюйте перший код із GTM і вставте його високо в <head>.

Скопіюйте другий код і вставте його одразу після відкривального тега <body>.

Натисніть «Оновити файл» унизу екрана. Готово, GTM встановлено на сайт вручну. Весь процес займає пару хвилин.

Не хочете чіпати файли теми? Далі, спосіб через плагін, який робить те саме без жодної правки коду.

Встановлення через плагін GTM4WP

GTM4WP (Google Tag Manager for WordPress, автор DuracellTomi), найпопулярніший плагін для інтеграції GTM у WordPress: понад 700 000 активних установок, оновлюється з 2013 року. Він не просто вставляє коди контейнера, а й додає data layer для WooCommerce, відстеження контактів та інших сценаріїв.

В адмінці WordPress перейдіть у «Плагіни → Додати новий».

Введіть «Google Tag Manager for WordPress» у рядку пошуку та натисніть «Встановити зараз».

Після встановлення натисніть «Активувати».

Угорі екрана з’явиться сповіщення з пропозицією ввести GTM ID. Клікніть посилання в сповіщенні.

Ваш GTM ID знаходиться в акаунті Google Tag Manager, на верхній панелі, поруч із назвою контейнера. Формат: GTM-XXXXXXX.

Скопіюйте ID, поверніться в адмінку WordPress, вставте у відповідне поле на сторінці налаштувань плагіна та натисніть «Зберегти зміни».

Готово. Плагін автоматично розмістив обидва коди GTM у потрібних місцях, ви не відкривали жодного PHP-файлу.

Тепер, коли контейнер GTM на сайті, налаштуємо збір даних через Google Analytics 4.

Як підключити Google Analytics 4 через Google Tag Manager

Раніше в GTM використовувався тег «Universal Analytics», він припинив збір даних у липні 2024 року. Зараз єдиний актуальний варіант — це Google Analytics 4 (GA4). Налаштовується він у три кроки: створення тегу, вказування ідентифікатора вимірювання та прив’язка тригера.

Якщо на вашому сайті досі стоїть старий код Universal Analytics (функція gtag('config', 'UA-XXXXX-Y') у header.php або вставка через плагін), спочатку видаліть його. Інакше GA4 та Universal Analytics дублюватимуть дані, спотворюючи звіти.

Поверніться в акаунт GTM і натисніть «Теги» в лівому меню.

Натисніть «Створити» (кнопка New).

Назвіть тег (наприклад, «GA4, Перегляди сторінок») і клацніть по полю «Конфігурація тегу», щоб вибрати тип тегу.

У списку типів тегів виберіть «Google Analytics: GA4 Configuration». Саме GA4, не Universal Analytics. Інтерфейс GTM регулярно оновлюється, тому розташування пунктів може незначно відрізнятися від скріншотів, але логіка та сама.

Ви повернетеся назад до конфігурації тегу. У полі «Measurement ID» введіть свій ідентифікатор вимірювання GA4 (формат: G-XXXXXXXXXX). Щоб не хардкодити його в кожному тегу, створіть змінну — це найкраща практика GTM.

Виберіть «New Variable» і у вікні, що відкрилося, введіть ваш Measurement ID з Google Analytics 4. Назвіть змінну, наприклад «GA4 Measurement ID».

Щоб дізнатися свій Measurement ID, увійдіть в акаунт Google Analytics, виберіть потрібний ресурс.

Перейдіть в «Адміністратор» → «Налаштування ресурсу» → «Потоки даних» → виберіть вебпотік. Measurement ID починається з G- і відображається у правому верхньому куті картки потоку.

Скопіюйте Measurement ID, вставте в поле змінної та натисніть «Зберегти».

Тепер призначимо тригер, умову, за якої тег спрацьовує. Клацніть по секції «Triggering».

Для відстеження всіх переглядів сторінок виберіть вбудований тригер «All Pages».

Натисніть «Зберегти», тег GA4 готовий, але ще не опублікований.

Тестування та публікація тега

Перш ніж надсилати контейнер у продакшен, протестуйте тег у режимі попереднього перегляду. Натисніть кнопку «Preview» у правому верхньому куті.

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

Щоб переконатися, що дані доходять до GA4, відкрийте Google Analytics і перейдіть у «Звіти → У реальному часі». Там відобразиться перегляд сторінки, який ви щойно згенерували перезавантаженням сайту.

Дані йдуть. Жодного рядка JS на сайті ви не додали, усе обробляється всередині контейнера GTM.

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

У вікні, що з’явилося, дайте версії осмислену назву (наприклад, «GA4 page view tag v1») та опис.

Натисніть «Опублікувати». Після публікації активна версія контейнера відобразиться із зеленим індикатором.

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

Якщо хочете заглибитися в можливості GTM, від подій кліків до відстеження YouTube-плеєра та інтеграції з Google Ads, перегляньте цей відеоурок: він охоплює повний цикл налаштування GA4 + GTM на WordPress.

⁉️🤔 Часті запитання

Чим Google Tag Manager відрізняється від Google Analytics?

Google Analytics збирає дані про відвідувачів: перегляди сторінок, джерела трафіку, конверсії. Google Tag Manager не збирає дані сам — це кур’єр, який доставляє теги на сайт. GTM спрощує встановлення та оновлення десятків маркетингових інструментів з одного вебінтерфейсу, а GA4 обробляє зібрані дані у звітах.

Чи обов’язково використовувати плагін GTM4WP чи можна без нього?

Можна й без плагіна, вставивши два коди GTM у header.php вручну. Плагін GTM4WP зручніший: не втрачає налаштування під час зміни теми, додає data layer для WooCommerce і контактних форм, автоматично розміщує коди в потрібних місцях. Вибір залежить від того, як часто ви змінюєте тему і чи потрібен вам data layer з коробки.

Що таке data layer і для чого він потрібен?

Data layer — це JavaScript-об’єкт, прошарок між сайтом і GTM. Через нього передаються структуровані дані: ID товару, сума замовлення, тип події. GTM читає data layer і вирішує, який тег коли спрацьовувати. Без data layer ви відстежуєте перегляди сторінок, з ним, кожну дію користувача з точними сумами та назвами продуктів.

Google Tag Manager безплатний?

Так, базова версія повністю безплатна без обмежень за кількістю тегів, тригерів і обсягом трафіку. Платна Tag Manager 360 ($150 000 на рік, дані з офіційної сторінки Google Marketing Platform) додає розширену підтримку та SLA для enterprise-команд. Для WordPress-сайту будь-якого масштабу безплатної версії більш ніж достатньо.

Чи потрібно видаляти старий код Universal Analytics перед налаштуванням GA4?

Обов’язково. Universal Analytics припинив обробку даних у липні 2024 року. Залишений у header.php або плагіні старий код UA-XXXXX-Y дублює дані з GA4 і спотворює звіти. Після налаштування GA4 перевірте розділ «Адміністратор → Порівняння даних» у Google Analytics: відсутність розбіжностей з очікуваним трафіком підтверджує, що старий код видалено.

Як перевірити, що GTM працює після встановлення?

Три способи: відкрийте вихідний код сторінки (Ctrl+U) і пошукайте GTM- у <head>, контейнер має бути на місці. Встановіть розширення Google Tag Assistant Legacy для Chrome, воно покаже всі активні теги на сторінці. Увімкніть Preview Mode у GTM, перезавантажте сайт і переконайтеся, що в консолі налагодження відображається зелений статус «Connected».

Що ставити на WordPress у підсумку

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

Ключовий сценарій для WordPress-сайту: встановили GTM через плагін GTM4WP (один раз, дві хвилини), додали тег GA4 (один раз, п’ять хвилин із тестуванням), і аналітика працює. Далі додаєте Hotjar, Google Ads, LinkedIn Insight Tag і будь-які інші пікселі за потреби, не чіпаючи код сайту.

Почніть із GA4 і режиму попереднього перегляду, переконайтеся, що дані пішли. А потім відкривайте вбудовані шаблони тегів GTM: там десятки готових інтеграцій, які раніше потребували ручного розміщення JS на кожній сторінці.