1. Введение: Почему GA4 и GTM — это стандарт
Для эффективного маркетинга и оптимизации сайта необходим точный сбор данных. Google Analytics 4 (GA4) — это инструмент, который собирает и обрабатывает эти данные, фокусируясь на действиях пользователя (событиях). Google Tag Manager (GTM) — это бесплатный сервис, который позволяет управлять всеми кодами (тегами) на сайте (GA4, Яндекс.Метрика, Facebook Pixel) через единый веб-интерфейс, устраняя необходимость каждый раз править код сайта.
Использование GTM для установки GA4 дает два ключевых преимущества:
- Гибкость: Мгновенное добавление или изменение кодов без помощи разработчиков.
- Точность: Упрощенная настройка отслеживания событий (клики, просмотры видео и т.д.).
2. Шаг 1: Создание счетчика Google Analytics 4 (GA4)
Для начала вам нужен уникальный идентификатор, который GA4 использует для сбора данных с вашего сайта.
2.1. Создание ресурса GA4
- Зайдите в аккаунт Google Analytics и нажмите Администратор (Admin).
- В столбце “Ресурс” (Property) нажмите Создать ресурс.
- Введите имя ресурса (например, “Мой Сайт GA4”) и выберите часовой пояс и валюту.
2.2. Настройка потока данных (Data Stream)
После создания ресурса, вам нужно настроить “Поток данных” для вашего сайта.
- В настройках ресурса перейдите в раздел Потоки данных (Data Streams).
- Выберите тип Веб (Web).
- Введите URL своего сайта (например,
https://www.mysite.ru) и название потока (например, “Основной сайт”). - Нажмите Создать поток.
2.3. Получение идентификатора отслеживания
После создания потока вы получите Идентификатор измерения (Measurement ID), который выглядит как G-XXXXXXXXX. Это ключ, который вы будете использовать в GTM. Сохраните его.
- Важно: Убедитесь, что в настройках потока включена функция “Расширенная статистика” (Enhanced Measurement). Она автоматически отслеживает просмотры страниц, прокрутки, клики по внешним ссылкам и другие базовые события.
3. Шаг 2: Установка контейнера Google Tag Manager (GTM)
GTM — это посредник, который будет загружать код GA4 на ваш сайт.
3.1. Создание аккаунта и контейнера GTM
- Зайдите на сайт Google Tag Manager и нажмите Создать аккаунт.
- Введите название аккаунта (например, название вашей компании).
- Создайте Контейнер (Container) и выберите целевую платформу Веб (Web).
- После создания GTM покажет вам два фрагмента кода.
3.2. Установка кода GTM на сайт
Эти два фрагмента кода должны быть установлены на каждой странице вашего сайта. Это единственный раз, когда вам понадобится помощь разработчика (если вы не можете сделать это сами).
- Первый фрагмент: Поместите как можно выше в раздел
<head>(желательно сразу после открывающего тега<head>). - Второй фрагмент: Поместите сразу после открывающего тега
<body>.
Примечание: Если вы используете CMS (например, WordPress, Tilda, Bitrix), часто есть готовые поля или плагины для вставки ID контейнера GTM (выглядит как GTM-XXXXXX), что упрощает этот шаг.
4. Шаг 3: Связывание GA4 и GTM
Теперь, когда GTM установлен на сайте, нужно настроить его для отправки данных в GA4.
4.1. Создание переменной для Measurement ID
Чтобы не вводить G-XXXXXXXXX каждый раз, когда вы создаете тег GA4, сохраните его как переменную.
- В GTM перейдите в раздел Переменные (Variables).
- В разделе Пользовательские переменные (User-Defined Variables) нажмите Создать.
- Выберите тип Константа (Constant).
- В поле Значение (Value) вставьте ваш Идентификатор измерения GA4 (G-XXXXXXXXX).
- Назовите переменную, например,
ga4_measurement_id.
4.2. Настройка тега конфигурации GA4 (GA4 Configuration Tag)
Это основной тег, который инициирует сбор данных GA4 на вашем сайте.
- В GTM перейдите в раздел Теги (Tags) и нажмите Создать.
- Настройка тега:
- Тип тега (Tag Type): Google Аналитика: Конфигурация GA4.
- Идентификатор потока данных (Measurement ID): Выберите созданную вами переменную
{{ga4_measurement_id}}.
- Настройка триггера (Trigger):
- Выберите триггер All Pages (Все страницы). Это гарантирует, что GA4 загрузится на каждой странице.
4.3. Публикация изменений
Чтобы тег заработал, необходимо опубликовать контейнер GTM.
- В правом верхнем углу GTM нажмите Отправить (Submit).
- Присвойте версии имя (например, “Первичная установка GA4”) и нажмите Опубликовать (Publish).
Через несколько минут после публикации GA4 начнет собирать базовые данные (просмотры страниц) с вашего сайта.
5. Шаг 4: Настройка отслеживания событий (Event Tracking)
Сила GTM заключается в отслеживании пользовательских действий, которые не регистрируются автоматически. Рассмотрим пример отслеживания клика по кнопке “Отправить заявку”.
5.1. Создание триггера (Trigger)
Триггер определяет, когда должен сработать тег.
- В GTM перейдите в Триггеры (Triggers) и нажмите Создать.
- Тип триггера: Клик – Все элементы (Click – All Elements).
- Условия активации: Выберите “Некоторые клики” (Some Clicks) и задайте условие:
Click IDравноbtn-submit(или другое уникальное свойство вашей кнопки).
5.2. Создание тега события (GA4 Event Tag)
Тег отправляет информацию о событии в GA4.
- В GTM перейдите в Теги (Tags) и нажмите Создать.
- Тип тега: Google Аналитика: Событие GA4.
- Тег конфигурации: Выберите созданный ранее тег конфигурации GA4.
- Название события (Event Name): Придумайте понятное название, например,
generate_lead(стандартное название для GA4). - Параметры события (Event Parameters, опционально): Вы можете добавить дополнительные данные, например:
parameter_name:form_locationvalue:footer
- Триггер активации: Выберите триггер, созданный на шаге 5.1.
5.3. Тестирование и отладка
Перед публикацией всегда тестируйте изменения.
- Нажмите Предварительный просмотр (Preview) в GTM.
- Откроется новое окно Tag Assistant. Введите URL своего сайта.
- Совершайте действия на сайте (например, кликните по кнопке).
- В окне Tag Assistant вы увидите, какие теги сработали (сработал ли тег
generate_lead) и какие данные были отправлены. - Данные также можно увидеть в отчете GA4 “В реальном времени” (Realtime).
6. Роль Data Layer в сложной автоматизации
Для передачи в GA4 информации о покупках, цене, товарах и ID пользователя (например, при транзакциях) используется Уровень данных (Data Layer).
Data Layer — это временное хранилище данных на странице. Разработчик должен добавить код, который “выталкивает” информацию о событии в GTM.
Ниже приведен пример кода JavaScript, который нужно выполнить на странице после успешной покупки. Он передает событие purchase (покупка) и детали транзакции в GTM.
7. Чек-лист по проверке интеграции
- GTM код установлен: Два фрагмента кода GTM находятся в
<head>и<body>. - GA4 Configuration Tag: Тег конфигурации настроен с правильным
G-XXXXXXXXXи срабатывает на всех страницах (All Pages). - Тестирование: В режиме Предварительного просмотра GTM и отчете GA4 “В реальном времени” видны просмотры страниц.
- События: Все ключевые события (заявки, покупки, звонки) настроены и корректно отображаются в отчетах GA4.
