Создание управление тегами сайт

Забудьте про хаос в коде. Наше управление тегами сайта дарит полный контроль маркетологу без вызова разработчика. Настройте аналитику и пиксели за один кофе!

Бесплатная консультация юриста

+7 (800) 301-07-30

Реклама jurik.ru

Актуально на:

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

Что такое Google Tag Manager и зачем он нужен?

Ключевые преимущества использования GTM

  • Централизованное управление: В одном аккаунте может храниться большое количество контейнеров (папок с тегами). Это удобно для специалистов, которые управляют множеством проектов.
  • Независимость от разработчиков: После первичной установки кода контейнера на сайт, маркетолог или аналитик может добавлять, редактировать и отключать теги самостоятельно, не ожидая деплоя от IT-отдела.
  • Безопасность и контроль версий: Каждая публикация контейнера создает новую версию. Если что-то пошло не так, можно мгновенно откатиться к предыдущей рабочей версии.
  • Встроенная отладка: Режим предпросмотра (Preview Mode) позволяет проверить срабатывание тегов на сайте до публикации изменений.
  • Гибкость настроек: Поддержка триггеров (правил активации), переменных (динамических данных) и слоя данных (Data Layer) для сложных сценариев отслеживания.

Потенциальные недостатки и риски

Несмотря на очевидные плюсы, у GTM есть нюансы, о которых нужно знать:

  • Порог входа для продвинутых задач: Для установки кода GTM на сайт и более гибких настроек (например, пользовательских тегов, работа с Data Layer, сложные триггеры) необходимо знание HTML, JavaScript и DOM (Document Object Model).

Структура аккаунта: Аккаунт, Контейнер, Рабочая область

  1. Аккаунт (Account): Верхний уровень. Обычно один на компанию/организацию.
  2. Контейнер (Container): Набор тегов, триггеров и переменных для конкретного ресурса (сайт, iOS-приложение, Android-приложение, AMP-страницы). Для каждого сайта нужно создать уникальный контейнер.
  3. Рабочая область (Workspace): Изолированная среда для внесения изменений. Позволяет нескольким пользователям работать параллельно без конфликтов.

Пошаговая установка GTM на сайт

Шаг 1: Создание аккаунта и контейнера

  1. Перейдите на сайт https://tagmanager.google.com.
  2. Войдите в аккаунт Google (или создайте новый, если его нет).
  3. Нажмите «Создать аккаунт». Укажите название (обычно название компании), страну;
  4. Создайте контейнер: укажите название (URL сайта), выберите целевую платформу — Веб.
  5. Примите условия использования.

Шаг 2: Установка кода контейнера на сайт (Критически важный этап)

После создания контейнера вы увидите окно с двумя фрагментами кода (ID контейнера выглядит как GTM-XXXXXXX).

Инструкция Google:
Первую часть кода вставьте в <head>, как можно ближе к открывающему тегу <head>, а вторую — в тело страницы сразу после тега <body>.

Варианты установки в зависимости от CMS/платформы:

Установка через плагины (WordPress, Joomla, OpenCart, Bitrix и др.)

На сайтах с CMS код Google Tag Manager устанавливается через специальные плагины. Эту установку вы можете выполнить самостоятельно или обратившись к техническому специалисту.

  • WordPress: Плагины GA Google Analytics, GTM4WP, Site Kit или просто вставка кода в header.php дочерней темы / через плагин Insert Headers and Footers.
  • В настройках плагина достаточно указать ID контейнера (GTM-XXXXXXX).
Установка на Tilda (Тильда)

Для установки диспетчера тегов GTM на сайте укажите идентификатор контейнера в настройках сайта на Тильде (раздел «Аналитика & SEO»). Отдельно вставлять код в хэдер/боди не требуется, платформа делает это автоматически.

В том же разделе настроек вашей CMS (часто называется «Сторонний код», «Head/Body коды», «Counter code»):

  • Вставьте первую часть кода в поле «Код в <head>» или «Перед закрывающим тегом </head>».
  • Вставьте вторую часть в поле «Код после <body>» или «Сторонний код сразу после открывающегося тега BODY».

Шаг 3: Проверка установки

После сохранения настроек сайта и очистки кэша:

  1. Откройте сайт в браузере.
  2. В GTM нажмите кнопку Предварительный просмотр (Preview).
  3. Введите URL сайта. Откроется сайт в новом окне с панелью отладки Tag Assistant внизу.
  4. Если на панели отладки появился контейнер и тег «Container Loaded» — установка прошла успешно.

Настройка базовых тегов: Google Analytics 4 (GA4) и Google Ads

Сейчас основным сценарием является настройка Тега Google (Google Tag) — единого тега для продуктов Google.

Сценарий А: Настройка через GA4 (Рекомендуемый для аналитики)

  1. В GTM: Теги → Создать → Конфигурация тега → Google Analytics: GA4.
  2. Введите ID измерения (Measurement ID) (выглядит как G-XXXXXXXXXX). Его можно найти в GA4: Администратор → Потоки данных → Ваш поток.
  3. Триггер: All Pages (Все страницы).
  4. Сохраните тег (например, назовите «GA4 — Base Config»)

Сценарий Б: Интеграция с Google Рекламой (Google Ads)

Если вы работаете и с Google Рекламой, и с Google Аналитикой, настройте тег в одном из этих сервисов, а второй добавьте как целевой в настройках тега.

  • В теге «Google Ads: Конверсия» или «Google Ads: Ремаркетинг» есть поле «ID связанного тега Google» / «Tag ID».
  • Или настройте Тег Google (Google Tag) отдельно, указав ID Google Ads (AW-XXXXXXXX) и/или GA4 (G-XXXXXXXX) в списке «Destination IDs».

Подробнее о том, как настроить тег Google в Google Рекламе / Настройте тег Google в Google Аналитике, чтобы отслеживать посетителей сайта и их действия.

Работа с Триггерами, Переменными и Data Layer

Тег не сработает без Триггера (правила).

Основные типы триггеров:

  • All Pages (Все страницы): Базовый триггер для GA4, пикселей ремаркетинга.
  • Page View (Просмотр страницы) / DOM Ready / Window Loaded: Этапы загрузки страницы.
  • Click — All Elements / Just Links: Отслеживание кликов по кнопкам, ссылкам, карточкам товаров.
  • Form Submission: Отправка форм (требует проверки, часто конфликтует с AJAX).
  • Custom Event (Пользовательское событие): Самый мощный тип. Срабатывает при dataLayer.push({'event': 'event_name'}). Используется для отслеживания покупок, добавлений в корзину, логинов, шагов чекаута.

Переменные (Variables):

Позволяют передавать динамические значения в теги (ID товара, сумму заказа, текст кнопки, URL страницы).

  • Встроенные: Page URL, Page Hostname, Click Element, Click Text, Form ID и т.д. (нужно включить в меню «Переменные → Настроить»).
  • Пользовательские (Data Layer Variable): Чтение значений из dataLayer (например, ecommerce.value, user_id).
  • JavaScript Variable / Custom JS: Для сложной логики извлечения данных со страницы.

Публикация и версионирование

После создания и проверки тегов в режиме предпросмотра:

  1. На главной странице рабочей области нажмите Отправить (Submit).
  2. Выберите «Опубликовать и создать версию».
  3. Дайте понятное название версии (например, «Добавлен трекинг кнопки «Купить» + GA4 ecommerce»).
  4. Добавьте описание изменений.
  5. Нажмите Опубликовать.

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

Продвинутые сценарии и Best Practices

Настройка Enhanced Ecommerce (Расширенная электронная торговля) для GA4

Требует передачи событий в dataLayer разработчиками сайта:

  • view_item, add_to_cart, remove_from_cart, begin_checkout, add_payment_info, purchase.
  • В GTM создаются теги GA4 Event с триггерами Custom Event, соответствующими названиям событий в dataLayer.
  • Переменные Data Layer Variable читают параметры (items, value, currency, transaction_id).

Consent Mode v2 (Режим согласия) — Обязательно для ЕС/РФ (152-ФЗ / GDPR)

Настройте тег «Google Consent Mode» или используйте CMP (Cookie Bot, Usercentrics, Cookiebot и др.), который пушит в dataLayer команды consent (granted/denied для ad_storage, analytics_storage, ad_user_data, ad_personalization). Теги Google должны иметь встроенную проверку согласия (Built-in Consent Check).

Серверный контейнер (Server-side GTM)

Для повышения точности данных, обхода блокировщиков рекламы (ITP/ETP) и защиты PII (персональных данных) рекомендуется перенести критические теги (GA4, Ads, CAPI) в Server-side контейнер, развернутый на собственном поддомене (например, metrics.*.ru). Это отдельная сложная тема, требующая облачной инфраструктуры (GCP Cloud Run, AWS, Docker).

Организация порядка в контейнере

  • Соглашения об именовании: Используйте префиксы: GA4 — Event — Purchase, ADS — Conv ─ Lead_Form, HTML — Chat Widget.
  • Константы (Constant Variables): Вынесите ID измерений (G-XXXX, AW-XXXX) в переменные типа «Константа». При смене ID меняете в одном месте.

Чек-лист аудита контейнера GTM (раз в квартал)

  1. Нет ли дублирующихся тегов (например, два GA4 base config)?
  2. Все ли теги имеют понятные названия?
  3. Включены ли нужные встроенные переменные (Click, Form, Video, Scroll, Visibility)?
  4. Работают ли триггеры исключений (Exception Triggers) для тестового трафика (IP офиса, dev-домены)?
  5. Соответствует ли Consent Mode требованиям законодательства?
  6. Проверен ли Data Layer на ключевых страницах (корзина, чекаут, спасибо) через консоль браузера (dataLayer).
  7. Удалены ли неиспользуемые теги/триггеры/переменные (очистка мусора).

Google Tag Manager — это фундамент современной цифровой аналитики. Грамотная создание и управление тегами сайта через GTM экономит сотни часов разработки, снижает риск ошибок в коде сайта и дает маркетологам полный контроль над сбором данных.

Главные правила успеха:

  • Начинайте с планирования структуры именования и папок.
  • Обязательно используйте режим предпросмотра (Preview) перед каждой публикацией.
  • Инвестируйте время в настройку Data Layer — это язык, на котором сайт говорит с GTM.
  • Следите за версионированием и документируйте изменения в описании версий.

Настроенный правильно GTM становится «мозговым центром» вашего маркетингового стека, обеспечивая чистые, полные и своевременные данные для принятия бизнес-решений.