Skip to content

Всё для WordPress, веб-разработки — и не только

🚀 Как настроить Google Tag Manager для WordPress

🚀 Как настроить Google Tag Manager для WordPress

Вы заходите в админку 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.

Главная страница Google Tag Manager

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

Кнопка создания аккаунта в GTM

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

Форма создания аккаунта GTM с выбором страны

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

Настройка имени контейнера и выбор Веб

Примите условия использования Google Tag Manager и условия обработки данных.

Принятие условий использования GTM

После подтверждения появится всплывающее окно с двумя кодами установки. Не закрывайте эту вкладку, коды понадобятся для следующего шага.

Окно с кодами установки GTM контейнера

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

Важно перед тем как продолжить:

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

В админке WordPress перейдите в «Внешний вид → Редактор темы».

Меню Внешний вид, Редактор в админке WordPress

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

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

Файл header.php открыт в редакторе темы WordPress

Следуйте инструкции GTM: первый код, как можно выше в <head>, второй, сразу после открывающего тега <body>. В WordPress тег <body> обычно выглядит как <body <?php body_class(); ?>>.

Скопируйте первый код из GTM и вставьте его высоко в <head>.

Вставка первого кода GTM в секцию head файла header.php

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

Вставка второго кода GTM после открывающего тега body

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

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

Установка через плагин GTM4WP

GTM4WP (Google Tag Manager for WordPress, автор, DuracellTomi), самый популярный плагин для интеграции GTM в WordPress: более 700 000 активных установок, обновляется с 2013 года. Он не просто вставляет коды контейнера, но и добавляет data layer для WooCommerce, отслеживания контактов и других сценариев.

В админке WordPress перейдите в «Плагины → Добавить новый».

Меню Плагины, Добавить новый в админке WordPress

Введите «Google Tag Manager for WordPress» в строку поиска и нажмите «Установить сейчас».

Поиск плагина GTM4WP в репозитории WordPress

После установки нажмите «Активировать».

Кнопка активации плагина GTM4WP

Вверху экрана появится уведомление с предложением ввести GTM ID. Кликните ссылку в уведомлении.

Уведомление о необходимости ввести GTM ID после активации плагина

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

Идентификатор GTM контейнера в интерфейсе Google Tag Manager

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

Поле для вставки GTM ID в настройках плагина GTM4WP

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

Теперь, когда контейнер GTM на сайте, настроим сбор данных через Google Analytics 4.

Как подключить Google Analytics 4 через Google Tag Manager

Раньше в GTM использовался тег «Universal Analytics», он прекратил сбор данных в июле 2024 года. Сейчас единственный актуальный вариант, Google Analytics 4 (GA4). Настраивается он в три шага: создание тега, указание измерительного ID и привязка триггера.

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

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

Раздел Теги в боковом меню Google Tag Manager

Нажмите «Создать» (кнопка New).

Кнопка создания нового тега в интерфейсе GTM

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

Окно конфигурации нового тега в GTM

В списке типов тегов выберите «Google Analytics: GA4 Configuration». Именно GA4, не Universal Analytics. Интерфейс GTM регулярно обновляется, поэтому расположение пунктов может незначительно отличаться от скриншотов, но логика та же.

Выбор типа тега Google Analytics в GTM

Вы попадёте обратно в конфигурацию тега. В поле «Measurement ID» введите свой измерительный идентификатор GA4 (формат: G-XXXXXXXXXX). Чтобы не хардкодить его в каждом теге, создайте переменную, это лучшая практика GTM.

Выбор Page View как типа отслеживания GA4

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

Создание новой переменной для идентификатора GA4

Чтобы узнать свой Measurement ID, войдите в аккаунт Google Analytics, выберите нужный ресурс.

Выбор ресурса в аккаунте Google Analytics

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

Идентификатор отслеживания в настройках Google Analytics

Скопируйте Measurement ID, вставьте в поле переменной и нажмите «Сохранить».

Сохранение переменной с идентификатором GA4 в GTM

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

Секция выбора триггера в конфигурации тега GTM

Для отслеживания всех просмотров страниц выберите встроенный триггер «All Pages».

Выбор триггера All Pages в GTM

Нажмите «Сохранить», тег GA4 готов, но ещё не опубликован.

Тестирование и публикация тега

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

Кнопка предпросмотра в интерфейсе Google Tag Manager

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

Консоль отладки GTM с информацией о сработавших тегах

Чтобы убедиться, что данные доходят до GA4, откройте Google Analytics и перейдите в «Отчёты → В реальном времени». Там отобразится просмотр страницы, который вы только что сгенерировали перезагрузкой сайта.

Отчёт в реальном времени Google Analytics с активным просмотром

Данные идут. Ни одной строчки JS на сайте вы не добавили, всё обрабатывается внутри контейнера GTM.

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

Кнопка отправки контейнера в GTM

В появившемся окне дайте версии осмысленное название (например, «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 на каждой странице.