Как установить Google Tag Manager на WordPress через GTM4WP

В этой статье пошагово показано, как добавить Google Tag Manager на сайт WordPress с помощью плагина GTM4WP. Материал включает подготовку, установку, отладку, рекомендации по совместимости и контроль качества. Подойдёт администраторам сайтов, маркетологам и разработчикам сопровождения.

Важно: перед началом убедитесь, что у вас есть права администратора WordPress и доступ к аккаунту Google.

Перед началом: что нужно знать

• Понятие GTM: инструмент для управления тегами (скриптами) на сайте без правки исходного кода. Одна строка кода — контейнер — загружает остальные теги.
• GTM4WP: бесплатный плагин WordPress, который автоматически добавляет код контейнера и предоставляет дополнительные переменные и триггеры для WordPress-событий.
• Google Analytics и GTM: не взаимозаменяемы. GTM упрощает добавление Google Analytics, но сам по себе не собирает все метрики.

Короткий глоссарий:

• Контейнер: набор тегов и триггеров в GTM, идентифицируемый ID формата GTM-XXXXXX.
• Тег: скрипт (например, Google Analytics, пиксель Facebook).
• Триггер: условие, при котором срабатывает тег.

Создание аккаунта и контейнера в Google Tag Manager

1. Перейдите на страницу Google Tag Manager.
2. Нажмите Create Account (Создать аккаунт).
3. Введите название аккаунта и выберите страну.

4. На шаге Container Setup в поле Container name укажите домен в формате www.mywebsite.com и отметьте платформу Web.

5. Нажмите Create и согласитесь с условиями использования.

6. Вы попадёте в Workspace, где появится окно с кодом контейнера. Скопируйте ID контейнера (пример GTM-XXXXXX) и при необходимости сохраните оба фрагмента кода.

Примечание: для базовой работы с GTM достаточно вставить ID в плагин GTM4WP. Полные фрагменты кода понадобятся только при ручной установке или для валидации некоторых сервисов.

Установка плагина GTM4WP в WordPress

1. Войдите в админ-панель WordPress под аккаунтом с правами администратора.
2. В меню слева выберите Плагины → Добавить новый.

3. В поле поиска введите GTM4WP.
4. Нажмите Install Now рядом с плагином GTM4WP, затем Activate.

Важно: если плагин отсутствует в каталоге, скачайте его с официального репозитория WordPress и загрузите вручную.

Вставка кода GTM в настройки GTM4WP

1. В админке WordPress выберите Плагины → Установленные плагины.

2. Найдите GTM4WP и нажмите Settings.

3. Вкладка General: вставьте ваш Google Tag Manager ID в поле Google Tag Manager ID в формате GTM-XXXXXX.

4. Включите Container code ON/OFF в положение On.

5. Настройте совместимость второго фрагмента контейнера (Container code compatibility mode):

• Off — GTM4WP сам разместит второй код. Подходит, если вы хотите, чтобы плагин управлял вставкой.
• Footer — второй код будет вставлен в footer. Учтите, что это может помешать верификации сайта в Google Search Console.
• Manually coded — вы самостоятельно вставляете второй фрагмент кода в тему/шаблон.

6. Нажмите Save Changes.

Совет: если используете кэш-плагины или CDN, очистите кэш после изменений.

Проверка и отладка подключения GTM

1. В Google Tag Manager нажмите Preview рядом с контейнером.
2. В открывшемся Tag Assistant вставьте URL вашего сайта и нажмите Connect.
3. На сайте появится отладочная панель, где видно, какие теги сработали и какие триггеры сработали.

Если Tag Assistant показывает Connected и ваши теги отмечены как сработавшие, всё в порядке.

Чеклист при проверке:

• На странице виден ID контейнера (GTM-XXXXXX).
• В режиме Preview отображаются активные теги.
• Нет JavaScript-ошибок, связанных с загрузкой контейнера.

Частые проблемы и способы их решения

• Проблема: Tag Assistant не подключается.
  • Решение: проверьте, не блокирует ли расширение браузера (adblock) загрузку скриптов. Очистите кэш и повторите.
• Проблема: Google Search Console не подтверждает сайт.
  • Решение: выберите режим Footer или Manually coded и проверьте, что код размещён в согласно инструкции Google.
• Проблема: события WordPress (покупка, заполнение формы) не передаются.
  • Решение: активируйте встроенные переменные и dataLayer-события в настройках GTM4WP или реализуйте отправку dataLayer вручную.

Альтернативы и когда GTM4WP не подходит

Альтернативные плагины:

• Google Tag Manager от George Stephanis
• Metronet Tag Manager

Когда плагин может не подойти:

• Сайт использует кастомную тему с сильно изменённой разметкой и требует ручной интеграции.
• Вам нужен точный контроль размещения скриптов для соответствия политике безопасности контента (CSP).

В таких случаях рассмотрите ручную вставку фрагментов кода или разработайте собственный lightweight-скрипт для загрузки контейнера.

Рекомендации по безопасности и конфиденциальности

Важно соблюдать требования конфиденциальности и законодательства (например, GDPR) при отправке данных в сторонние сервисы через теги.

Рекомендации:

• Минимизируйте передачу персональных данных (PII) в теги.
• Установите согласие пользователей (consent management) и интегрируйте его с GTM, чтобы блокировать теги до получения согласия.
• Документируйте, какие теги активны на сайте и какие данные они собирают.

Роли и чеклист для команды

Для малого проекта распределение ролей и задачи:

• Владелец продукта/маркетолог: определяет, какие теги нужны (Analytics, ремаркетинг и т. д.).
• Админ WordPress: устанавливает плагин и вносит ID контейнера.
• Разработчик: проверяет совместимость темы, при необходимости встраивает второй фрагмент кода вручную.
• QA/аналитик: проверяет режим Preview, тестирует события и SLI.

Короткий чеклист перед релизом:

• Плагин установлен и активирован.
• ID контейнера правильно вставлен.
• Режим совместимости выбран и сохранён.
• Теги в GTM протестированы в Preview.
• Кеш очищен и CDN синхронизирован.

Маленькая методология настройки событий

1. Определите ключевые события (подписка, покупка, отправка формы).
2. Создайте dataLayer-события в коде или используйте встроенные события GTM4WP (woocommerce, forms).
3. В GTM создайте теги, триггеры и переменные для каждого события.
4. Тестируйте в Preview и публикуйте контейнер.

Модель зрелости отслеживания (уровни)

• Уровень 0 — нет тегов.
• Уровень 1 — базовый GTM с Google Analytics pageview.
• Уровень 2 — базовые события (контакты, клики, формы).
• Уровень 3 — eCommerce, пользовательские переменные, интеграции маркетинга.
• Уровень 4 — автоматизированные тесты, SLO/SLI для аналитики, управление согласием.

Диаграмма принятия решения (Mermaid)

flowchart TD
  A[Есть доступ к админке WordPress?] -->|Нет| B[Получите права администратора]
  A -->|Да| C[Есть готовый GTM аккаунт?]
  C -->|Нет| D[Создайте аккаунт и контейнер в GTM]
  C -->|Да| E[Установите GTM4WP плагин]
  E --> F[Вставьте GTM-идентификатор в настройки]
  F --> G[Выберите режим совместимости]
  G --> H[Тест в Preview/Tag Assistant]
  H --> I{Тест пройден?}
  I -->|Да| J[Публикация и мониторинг]
  I -->|Нет| K[Исправьте ошибки и повторите тест]

Критерии приёмки

• Контейнер GTM успешно подключён (ID GTM-XXXXXX виден на сайте).
• В режиме Preview теги срабатывают согласно ожиданиям.
• Основные события (заполнение формы, транзакции) отправляют данные в dataLayer.
• Политика конфиденциальности обновлена, и согласие пользователей у учёта.

Часто задаваемые вопросы

Есть ли другие плагины для Google Tag Manager?

Да. Помимо GTM4WP вы можете использовать Google Tag Manager от George Stephanis или Metronet Tag Manager. Выбор зависит от функционала и совместимости с вашей темой.

Как проверить, что GTM работает?

Запустите Preview в Google Tag Manager. Откройте сайт через Tag Assistant и проверьте, что контейнер подключён и теги срабатывают. Также можно посмотреть исходный код страницы на наличие ID контейнера.

Нужен ли Google Analytics, если использую GTM?

Нет, Google Analytics не обязателен. GTM — это инструмент для управления тегами, включая Google Analytics. Вы можете использовать только GTM или сочетать оба сервиса.

Краткое резюме

GTM4WP упрощает подключение Google Tag Manager к WordPress. Основные шаги: создать аккаунт GTM, установить плагин, вставить ID и протестировать в режиме Preview. Обратите внимание на настройку второго фрагмента кода и на соблюдение требований конфиденциальности.

Примечание: изображения в статье иллюстрируют интерфейсы Google Tag Manager и WordPress для наглядности.

Image credit: Pixabay All screenshots by Natalie dela Vega.