Как настроить теги в Google Tag Manager: подробное руководство

Google Tag Manager (GTM) — это система управления тегами, позволяющая маркетологам и веб-аналитикам быстро и легко развертывать и обновлять теги на веб-сайте или в мобильном приложении без необходимости изменять код.

Что такое теги и зачем они нужны?

Теги — это фрагменты кода (обычно JavaScript), предоставляемые сторонними сервисами (например, Google Analytics, Google Ads, Facebook). Они собирают данные о действиях пользователей на сайте и отправляют их в соответствующие системы аналитики или рекламные платформы.

Использование GTM централизует управление этими тегами, упрощает их добавление, удаление и изменение, снижает зависимость от разработчиков и минимизирует риск ошибок при ручном редактировании кода сайта. Это позволяет оперативно реагировать на маркетинговые задачи и повышать точность собираемых данных.

Основные типы тегов в GTM

Google Tag Manager поддерживает множество типов тегов, как встроенных, так и пользовательских. Наиболее распространенные:

• Google Analytics (GA4 и Universal Analytics): Для отслеживания посещаемости, поведения пользователей и конверсий.
• Отслеживание конверсий Google Ads: Для измерения эффективности рекламных кампаний Google Ads.
• Ремаркетинг Google Ads: Для создания аудиторий ремаркетинга.
• Facebook Pixel: Для отслеживания конверсий и создания аудиторий в Facebook и Instagram.
• Пользовательский HTML (Custom HTML): Для добавления любых произвольных скриптов, не имеющих встроенного шаблона.
• Теги других платформ: LinkedIn Insight Tag, Twitter Universal Website Tag, Яндекс.Метрика и многие другие.

Подготовка к настройке тегов: планирование и определение целей

Перед тем как приступить к настройке тегов, необходимо четко определить бизнес-цели и ключевые показатели эффективности (KPI), которые вы хотите отслеживать. Составьте план отслеживания (tracking plan), в котором задокументируйте:

1. Какие события и взаимодействия пользователей необходимо отслеживать (просмотры страниц, клики по кнопкам, отправки форм, покупки и т.д.).
2. Какие данные должны передаваться вместе с этими событиями (например, ID товара, сумма заказа, категория страницы).
3. В какие системы аналитики или рекламные платформы эти данные должны отправляться.
4. Как будут называться события и параметры в соответствии с принятыми стандартами именования (например, event_name, parameter_name).

Тщательное планирование позволяет избежать хаоса в настройках, обеспечить консистентность данных и упростить дальнейший анализ.

Настройка основных тегов в Google Tag Manager

Рассмотрим настройку наиболее востребованных тегов.

Установка тега Google Analytics (GA4): отслеживание просмотров страниц

Тег конфигурации GA4 является базовым и необходим для отправки данных в Google Analytics 4.

1. Создайте новый тег: В интерфейсе GTM перейдите в раздел «Теги» -> «Создать».
2. Выберите тип тега: «Google Analytics: конфигурация GA4».
3. Введите Идентификатор потока данных (Measurement ID): Найдите его в настройках вашего потока данных в интерфейсе Google Analytics 4 (формат G-XXXXXXXXXX).
4. Настройте параметры (опционально): Можно задать параметры конфигурации, которые будут отправляться со всеми событиями (например, user_id).
5. Выберите триггер: Для отслеживания просмотров всех страниц выберите встроенный триггер «All Pages» (Просмотр страницы).
6. Сохраните тег.

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

Настройка тегов отслеживания конверсий Google Ads

Отслеживание конверсий помогает понять, какие рекламные кампании приводят к желаемым действиям на сайте.

1. Создайте действие-конверсию в Google Ads: Получите «Идентификатор конверсии» (Conversion ID) и «Ярлык конверсии» (Conversion Label).
2. Создайте новый тег в GTM: Тип тега — «Google Ads: отслеживание конверсий».
3. Введите идентификатор и ярлык конверсии: Укажите полученные на шаге 1 значения.
4. Настройте параметры (опционально): Можно передавать ценность конверсии (value), код валюты (currency), идентификатор транзакции (transaction_id). Эти значения часто берутся из переменных уровня данных (Data Layer).
5. Выберите триггер: Создайте триггер, который активируется при выполнении целевого действия (например, посещение страницы благодарности после покупки, отправка формы заявки). Пример триггера: «Просмотр страницы», где Page Path содержит /thank-you.
6. Сохраните тег.

Не забудьте также настроить тег связывания конверсий (Conversion Linker), если он еще не установлен. Он необходим для корректного учета конверсий в условиях ограничений на использование сторонних cookie.

Настройка тегов Facebook Pixel

Facebook Pixel позволяет отслеживать действия пользователей для оптимизации рекламы в Facebook и Instagram.

1. Получите Pixel ID: В настройках Facebook Business Manager найдите идентификатор вашего пикселя.
2. Создайте новый тег в GTM: Тип тега — «Facebook Pixel».
3. Введите Pixel ID.
4. Выберите стандартное событие: Для базового отслеживания просмотров страниц выберите «PageView». Для других событий (например, AddToCart, Purchase) создаются отдельные теги.
5. Настройте параметры события (опционально): Для событий вроде Purchase необходимо передавать параметры value и currency, а также content_ids, content_type для динамического ремаркетинга. Данные обычно извлекаются из Data Layer.
6. Выберите триггер: Для PageView — триггер «All Pages». Для других событий — триггеры, соответствующие действиям пользователя (например, клик по кнопке «Добавить в корзину», посещение страницы подтверждения заказа).
7. Сохраните тег.

Добавление пользовательских HTML-тегов

Если для нужного вам сервиса нет встроенного шаблона тега, используйте «Пользовательский HTML».

1. Создайте новый тег: Тип тега — «Пользовательский HTML».
2. Вставьте HTML/JavaScript код: Скопируйте код, предоставленный сервисом, в поле HTML.
   Пример: Добавление скрипта для отслеживания кастомного события в сторонней системе аналитики.

   <script>
     /**
      * Отправляет данные о просмотре страницы в кастомную систему аналитики.
      * @param {string} pagePath - Путь к текущей странице.
      * @param {string} userSegment - Сегмент пользователя (если известен).
      */
     function trackCustomPageView(pagePath, userSegment) {
       // Предполагаем, что функция _customAnalyticsAPI.track уже существует
       if (typeof _customAnalyticsAPI !== 'undefined' && _customAnalyticsAPI.track) {
         _customAnalyticsAPI.track('pageview', {
           path: pagePath,
           segment: userSegment || 'unknown' // Используем 'unknown', если сегмент не передан
         });
         console.log('Custom pageview tracked:', pagePath, userSegment);
       } else {
         console.error('Custom Analytics API is not available.');
       }
     }

     // Вызываем функцию, передавая данные из переменных GTM
     // {{Page Path}} - встроенная переменная GTM
     // {{DL - userSegment}} - пользовательская переменная, извлекающая значение из Data Layer
     trackCustomPageView({{Page Path}}, {{DL - userSegment}});
   </script>

3. Настройте дополнительные параметры (при необходимости): Например, поддержку document.write (использовать с осторожностью).
4. Выберите триггер: Определите, когда этот скрипт должен выполняться (например, «All Pages» или при конкретном событии).
5. Сохраните тег.

Триггеры в Google Tag Manager: управление активацией тегов

Триггеры определяют условия, при которых теги должны активироваться (срабатывать).

Обзор типов триггеров: просмотр страницы, клик, отправка формы и другие

GTM предлагает разнообразные типы триггеров:

• Просмотр страницы (Page View): Срабатывает при загрузке страницы (DOM Ready, Window Loaded).
• Клик (Click): Отслеживает клики по ссылкам (Just Links) или любым элементам (All Elements).
• Доступность элемента (Element Visibility): Активируется, когда выбранный элемент появляется в области видимости.
• Отправка формы (Form Submission): Отслеживает отправку HTML-форм.
• Изменение в истории (History Change): Реагирует на изменения URL без перезагрузки страницы (актуально для SPA).
• Ошибка JavaScript (JavaScript Error): Срабатывает при возникновении неперехваченных ошибок JavaScript.
• Таймер (Timer): Активируется по истечении заданного интервала времени.
• Пользовательское событие (Custom Event): Срабатывает при передаче события в Data Layer (dataLayer.push({'event': 'customEventName'})).
• Глубина прокрутки (Scroll Depth): Отслеживает прокрутку страницы по вертикали или горизонтали.
• Видео YouTube (YouTube Video): Отслеживает взаимодействия с встроенными видео YouTube.

Создание и настройка триггеров для отслеживания конкретных событий

При создании триггера вы выбираете его тип и задаете условия активации. Например, для отслеживания кликов по кнопке «Добавить в корзину»:

1. Создайте новый триггер: Тип — «Клик — Все элементы».
2. Условие активации: «Некоторые клики».
3. Задайте условие: Выберите переменную, условие и значение. Например:
   • Click Element -> matches CSS selector -> .add-to-cart-button
   • Или Click Text -> equals -> Добавить в корзину
4. Сохраните триггер.

Используйте встроенные переменные типа Click... (Click Element, Click Classes, Click ID, Click Text, Click URL) для точной идентификации элемента, по которому был совершен клик.

Использование исключений триггеров для предотвращения нежелательных активаций тегов

Иногда тег должен срабатывать при выполнении одного условия, но не срабатывать при выполнении другого. Для этого используются исключения триггеров.

При настройке тега, помимо добавления триггеров активации, можно добавить «Исключения». Если срабатывает хотя бы один триггер-исключение, тег не будет активирован, даже если условия основного триггера выполнены.

Пример: Активировать тег на всех страницах (All Pages), кроме страницы входа (/login).

1. Основной триггер: All Pages.
2. Триггер-исключение: Создайте триггер типа «Просмотр страницы» с условием Page Path -> equals -> /login.
3. Добавьте этот триггер в секцию «Исключения» при настройке тега.

Переменные в Google Tag Manager: динамические данные для тегов и триггеров

Переменные — это именованные значения, которые используются в тегах и триггерах для передачи динамической информации.

Что такое переменные и их типы (встроенные, пользовательские)

• Встроенные переменные: Предопределенные переменные, доступные по умолчанию (например, Page URL, Page Path, Click Text, Referrer). Их необходимо включить в разделе «Переменные» -> «Встроенные переменные» -> «Настроить».
• Пользовательские переменные: Переменные, которые вы создаете самостоятельно для извлечения специфической информации.

Использование переменных для получения данных о странице, пользователе и событиях

Переменные позволяют сделать настройку GTM гибкой. Вместо того чтобы жестко кодировать значения в тегах и триггерах, вы используете переменные:

• В тегах: Для передачи динамических данных (например, {{DL - transactionValue}} для передачи суммы покупки в тег конверсии).
• В триггерах: Для задания условий активации (например, активировать триггер, если {{Click URL}} содержит special-offer).

Создание пользовательских переменных: Data Layer и другие

Наиболее важным типом пользовательских переменных является «Переменная уровня данных» (Data Layer Variable). Она извлекает значения из объекта dataLayer — JavaScript-массива, который используется для передачи информации с вашего сайта в GTM.

Пример: Извлечение ID товара со страницы

1. Разработчики добавляют код на страницу товара:
   javascript
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'productView',
'productId': 'SKU12345' // Динамическое значение ID товара
});

2. Создание переменной в GTM:
   • Тип: «Переменная уровня данных».
   • Имя переменной уровня данных: productId.
   • Имя переменной в GTM (например): DL - productId.
3. Теперь вы можете использовать переменную {{DL - productId}} в тегах (например, для передачи ID товара в систему аналитики) или триггерах (например, активировать тег, если productId соответствует определенному шаблону).

Другие полезные типы пользовательских переменных:

• Константа: Фиксированное строковое значение.
• Собственный код JavaScript: Возвращает значение, вычисленное с помощью вашего JavaScript-кода.
• Элемент DOM: Извлекает текст или атрибут HTML-элемента.
• URL: Извлекает компоненты URL (протокол, хост, путь, параметр запроса).
• Таблица поиска (Lookup Table): Возвращает значение на основе значения другой переменной (аналог switch или if/else if).

Тестирование и отладка тегов в Google Tag Manager

Тщательное тестирование перед публикацией — ключ к корректной работе GTM и сбору точных данных.

Использование режима предварительного просмотра (Preview Mode)

Режим предварительного просмотра позволяет протестировать изменения в контейнере GTM в вашем браузере до их публикации.

1. Нажмите кнопку «Предварительный просмотр» в правом верхнем углу интерфейса GTM.
2. Введите URL вашего сайта.
3. Сайт откроется в новой вкладке с панелью отладки GTM (Tag Assistant) внизу.

Панель отладки показывает:

• События, произошедшие на странице (Page View, Click, Custom Event и т.д.).
• Теги, которые активировались или не активировались на каждом событии.
• Значения переменных на момент события.
• Состояние Data Layer.

Проверка активации тегов и передачи данных в соответствующие системы (Google Analytics, Facebook и т.д.)

В режиме предварительного просмотра:

1. Выполните действия на сайте, которые должны активировать ваши теги (просмотр страниц, клики, отправка форм).
2. В панели Tag Assistant выберите событие в левой колонке.
3. В разделе «Tags» проверьте, какие теги были активированы (Tags Fired) и почему (проверьте условия триггеров).
4. Кликните на активированный тег, чтобы увидеть детали: тип тега, переданные параметры и их значения (полученные из переменных).
5. Дополнительно проверяйте поступление данных в интерфейсах конечных систем (например, режим Realtime в Google Analytics, Test Events Tool в Facebook Events Manager).

Устранение распространенных ошибок при настройке тегов

• Тег не активируется: Проверьте условия триггера в режиме отладки. Убедитесь, что переменные, используемые в триггере, получают ожидаемые значения в нужный момент. Проверьте наличие триггеров-исключений.
• Тег активируется несколько раз: Возможно, триггер настроен слишком широко или на странице происходит несколько событий, удовлетворяющих условиям триггера. Уточните условия триггера или используйте опцию «Ограничение активации тега» (например, «Один раз на событие» или «Один раз на страницу»).
• Некорректные данные в переменных: Убедитесь, что Data Layer настроен правильно и передает нужные значения до того, как GTM пытается их прочитать (особенно актуально для событий Page View).
• Ошибки синтаксиса в Custom HTML/JavaScript: Проверяйте код на ошибки в консоли разработчика браузера.

Публикация контейнера: ввод изменений в действие

После успешного тестирования необходимо опубликовать изменения:

1. Нажмите кнопку «Отправить» в правом верхнем углу интерфейса GTM.
2. Укажите «Название версии» и добавьте подробное «Описание» внесенных изменений (это критически важно для истории версий и возможного отката).
3. Нажмите «Опубликовать».

Изменения станут активны для всех пользователей вашего сайта в течение нескольких минут.