← Назад

Отслеживание электронной коммерции с помощью Яндекс тег менеджера/YTM.

Отслеживание электронной коммерции с помощью Яндекс тег менеджера/YTM.

Отслеживание электронной коммерции (Ecommerce) с помощью Яндекс Тег Менеджера

В современных реалиях интернет-маркетинга и e-commerce эффективное управление интернет-магазином невозможно без глубокой сквозной аналитики. Простого подсчета отправленных форм «Спасибо за заказ» давно недостаточно. Чтобы бизнес стабильно рос, распределял рекламные бюджеты в Яндекс Директе с максимальной окупаемостью и масштабировал прибыль, необходимо видеть полную картину взаимодействия пользователя с товарами: какие позиции чаще всего просматривают в каталоге, какие продукты добавляют в корзину, на каком этапе оформления заказа отваливаются покупатели и какова реальная чистая выручка от конкретных рекламных кампаний.

Инструмент «Электронная коммерция» (Ecommerce) в Яндекс Метрике решает эти задачи на высшем уровне. Однако классический способ его внедрения — прямая интеграция кода разметки в исходный код сайта силами программистов — часто превращается в затяжной, дорогостоящий и полный ошибок процесс. Ситуация кардинально меняется, когда в игру вступает Яндекс Тег Менеджер (YTM). С помощью этой системы управления тегами маркетолог или аналитик получает возможность развернуть комплексный e-commerce мониторинг самостоятельно, полностью контролируя сбор данных через удобный визуальный интерфейс.

Архитектура и логика Ecommerce Яндекса

Прежде чем приступать к кликанью по кнопкам в интерфейсах, необходимо четко понять, как именно данные о покупках и товарах попадают с вашего сайта в отчеты Яндекс Метрики через Тег Менеджер.

Яндекс Метрика поддерживает отслеживание четырех ключевых этапов взаимодействия пользователя с товаром во время его движения по воронке продаж:

  • Просмотр товара (detail): фиксирует момент, когда пользователь заходит на детальную страницу карточки товара.
  • Добавление товара в корзину (add): клик по кнопке «Купить» или «Добавить в корзину».
  • Удаление товара из корзины (remove): фиксирует отказ пользователя от покупки конкретной позиции.
  • Покупка / Успешный заказ (purchase): финальный триумф воронки, передающий ID транзакции, перечень выкупленных товаров и итоговую сумму выручки.

Самостоятельная настройка без программистов: парсинг данных со страниц сайта через YTM

Главное преимущество Яндекс Тег Менеджера — возможность развернуть отслеживание Ecommerce вообще без привлечения разработчиков и правок в бэкенде сайта. Поскольку вся необходимая информация о товарах (названия, цены, артикулы) уже отображается на страницах вашего интернет-магазина, мы можем самостоятельно «собрать» её прямо из интерфейса браузера пользователя.

Ваша задача как маркетолога или аналитика — настроить в YTM автоматический перехват этих данных в момент, когда пользователь совершает целевое действие. Чтобы Яндекс Метрика приняла наши данные, мы должны упаковать переменные с экрана сайта в валидные JS-структуры. Ниже представлены эталонные структуры коммерческих объектов, которые мы будем собирать и генерировать с помощью Тег Менеджера на трех ключевых этапах воронки согласно официальной спецификации Яндекса.

1. Настройка для страницы карточки товара (Событие «Просмотр детальной информации» — detail)

Данный e-commerce объект будет автоматически собираться силами YTM и отправляться в Метрику в момент полной загрузки страницы карточки товара (на триггер DOM Ready):

{
  "ecommerce": {
    "currencyCode": "RUB",
    "detail": {
      "products": [
        {
          "id": "SKU-98765", // Сюда YTM автоматически подставит артикул с экрана
          "name": "Беспроводные наушники SoundPro X1", // Сюда подставится заголовок h1
          "price": 12990.00, // Сюда подставится очищенная цена
          "brand": "SoundPro",
          "category": "Электроника/Аудио/Наушники" // Метрика сама распарсит косую черту
        }
      ]
    }
  }
}

2. Настройка для кнопки добавления в корзину (Событие add)

Этот объект будет формироваться Тег Менеджером динамически прямо в момент клика пользователя по кнопке «Добавить в корзину», без перезагрузки страницы:

{
  "ecommerce": {
    "currencyCode": "RUB",
    "add": {
      "products": [
        {
          "id": "SKU-98765",
          "name": "Беспроводные наушники SoundPro X1",
          "price": 12990.00,
          "brand": "SoundPro",
          "category": "Электроника/Аудио/Наушники",
          "quantity": 1 // Количество забираем из счетчика количества на фронтенде
        }
      ]
    }
  }
}

3. Настройка для страницы «Спасибо за заказ» (Событие «Покупка» — purchase)

Этот сложный финансовый объект будет генерироваться при успешной загрузке страницы подтверждения заказа, считывая номер транзакции и итоговую выручку прямо с финального экрана:

{
  "ecommerce": {
    "currencyCode": "RUB",
    "purchase": {
      "actionField": {
        "id": "ORDER-2026-1142", // Номер транзакции парсим с экрана успеха
        "revenue": 26480.00 // Итоговую сумму чека считываем из итогов DOM
      },
      "products": [
        {
          "id": "SKU-98765",
          "name": "Беспроводные наушники SoundPro X1",
          "price": 12990.00,
          "brand": "SoundPro",
          "category": "Электроника/Аудио/Наушники",
          "quantity": 2,
          "coupon": "SUMMER_SALE_2026" // Промокод привязываем строго к конкретному товару!
        }
      ]
    }
  }
}

Создание переменных для сбора данных с экрана (Элементов DOM)

Чтобы Тег Менеджер мог автоматически подставлять актуальные значения в эти структуры, нам нужно научить его парсить страницу сайта и собирать данные прямо с неё. Перейдите в раздел «Переменные» и в блоке «Пользовательские переменные» нажмите кнопку «Создать». Нам понадобятся три базовые переменные:

Переменные в ytm
  1. Переменная для названия товара (ecom_name):
    • Название: ecom_name
    • Шаблон переменной: выберите строго пункт «Элемент DOM».
    • Метод выбора: в появившихся настройках укажите «Селектор CSS».
    • Селектор элемента: введите CSS-путь к заголовку товара на странице (например, h1.product-title).
    • Название атрибута: оставьте поле абсолютно пустым. В этом случае YTM автоматически заберет чистый внутренний текст (innerText) элемента.
  2. Переменная для цены товара (ecom_price):
    • Название: ecom_price
    • Шаблон переменной: выберите «Элемент DOM».
    • Метод выбора: «Селектор CSS».
    • Селектор элемента: укажите CSS-селектор стоимости (например, .current-price).
    • Название атрибута: оставьте поле пустым, чтобы система считала текстовое значение цены с экрана.
  3. Переменная для артикула/ID товара (ecom_id):
    • Название: ecom_id
    • Шаблон переменной: выберите «Элемент DOM».
    • Метод выбора: «Селектор CSS».
    • Селектор элемента: укажите CSS-селектор артикула товара.
    • Название атрибута: если ID написан текстом на экране, оставьте поле пустым. Если он спрятан внутри кода тега (например, <div class="goods" data-product-id="SKU-98765">), то в поле «Название атрибута» впишите строго имя этого атрибута — data-product-id.

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

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

  • Для просмотра карточки (detail): создайте триггер типа «DOM Ready». В блоке условий переключите тумблер на «Некоторые события» и выберите проверку URL (например, условие: URL страницы содержит /product/). Тег сработает ровно в момент, когда страница полностью отрисуется в браузере.
  • Для добавления в корзину (add): перейдите в раздел «Триггеры» -> «Создать». Выберите тип триггера «Клик» (или «Клик по элементу»). Установите переключатель условий активации триггера на «Некоторые события» и задайте уникальный признак вашей кнопки добавления (например, выбрав проверку класса элемента: Класс элемента содержит btn-add-to-cart или по тексту на кнопке: Текст элемента равен Добавить в корзину).
  • Для успешной покупки (purchase): создайте триггер типа «Просмотр страницы», установив в условиях активации «Некоторые события», где URL экрана успешного оформления заказа содержит значение /checkout/success или /thank-you.

Создание и конфигурация тега «Фронтенд — Ecommerce Пуш»

Поскольку мы собираем данные вручную из интерфейса сайта, стандартный предустановленный шаблон тега «Яндекс Метрика» в режиме автоматического Ecommerce нам не подойдет — он рассчитн только на готовый массив dataLayer. Наша задача — склеить новые DOM-переменные в правильную структуру самостоятельно.

Перейдите в раздел «Теги» и нажмите кнопку «Создать». Выберите шаблон тега «Кастомный HTML» (Custom HTML) и вставьте в текстовое поле следующий JavaScript-код:

  (function() {
    // Формируем чистый e-commerce объект для Яндекса из DOM-переменных
    var ecomObject = {
      "currencyCode": "RUB",
      "detail": {
        "products": [
          {
            "id": "{{ecom_id}}",        // Наша DOM-переменная для артикула
            "name": "{{ecom_name}}",    // Наша DOM-переменная для названия
            "price": parseFloat("{{ecom_price}}".replace(/[^0-9.]/g, "")), // Очистка цены от валюты и пробелов до числа
            "brand": "Не указан"
          }
        ]
      }
    };

    // Отправляем собранные данные напрямую в счетчик Яндекс Метрики
    if (window.ym) {
      ym(XXXXXX, 'ecommerce', ecomObject); // Обязательно замените XXXXXX на реальный ID вашего счетчика
    }
  })();

В нижней части конфигуратора тега откройте блок «Триггеры активации» и привяжите к нему созданные нами на Шаге 2 триггеры. Нажмите кнопку «Сохранить».

Включение опции Ecommerce на стороне Яндекс Метрики

Прежде чем приступать к тестированию и отладке, необходимо активировать соответствующий функционал внутри аналитической панели Метрики. По умолчанию в стандартных счетчиках сбор коммерческих данных выключен.

Зайдите в личный кабинет Яндекс Метрики, выберите нужный счетчик и перейдите в раздел «Настройки» (иконка шестеренки в левом сайдбаре). На вкладке «Счетчик» найдите блок основных настроек и переведите тумблеры напротив пунктов «Электронная коммерция» и «Тег менеджер» в активное положение «Вкл», как показано на изображении ниже.

Включение Электронной коммерции и Тег Менеджера в Яндекс Метрике

Экран настроек счетчика. Активированы функции Ecommerce (контейнер dataLayer) и встроенный Тег Менеджер с разрешением на Пользовательский HTML.

Обязательно убедитесь, что чекбокс «Пользовательский HTML» нажат — это критически важно, иначе созданный нами на Шаге 3 кастомный тег с e-commerce структурой будет заблокирован системой безопасности Яндекса. После этого пролистайте страницу вниз и нажмите финальную кнопку «Сохранить».

Отладка системы и верификация передачи данных

Публикация непроверенного контейнера Тег Менеджера на работающем e-commerce проекте — огромный риск. Ошибка в одной букве имени переменной или неверно указанный CSS-селектор могут полностью разрушить сбор финансовой статистики. К счастью, Яндекс Тег Менеджер предоставляет удобный инструмент тестирования данных в реальном времени прямо в интерфейсе браузера.

В правом верхнем углу интерфейса YTM нажмите кнопку «Предварительный просмотр» (Preview). В открывшейся вкладке введите точный URL-адрес вашего интернет-магазина и нажмите кнопку «Connect». Сайт откроется в новой вкладке, а в углу экрана появится служебный интерактивный виджет отладчика.

Алгоритм проверки воронки Ecommerce через встроенный модуль:

  1. Совершите целевое действие на сайте: откройте карточку товара или кликните по кнопке добавления в корзину.
  2. В левой панели хронологии отладчика YTM выберите событие, на котором сработал наш кастомный HTML-тег (например, DOM Ready или Click).
  3. В верхнем горизонтальном меню отладчика переключитесь с вкладки «Tags» на специальную выделенную вкладку «E-commerce».
  4. Что вы должны увидеть: вместо сырого программного кода отладчик покажет наглядную структурированную таблицу Яндекса. В ней отобразится четкий перечень товаров, их ID, названия {{ecom_name}} и цены {{ecom_price}}, которые Тег Менеджер успешно извлек из DOM-элементов страницы благодаря настроенному парсингу и передал напрямую в Метрику.

Если на всех этапах данные подтягиваются без ошибок, вернитесь в главное окно Яндекс Тег Менеджера и нажмите фиолетовую кнопку «Опубликовать» в верхнем правом углу. Задайте имя новой версии контейнера (например, «Релиз Ecommerce интеграции — Июнь 2026») и подтвердите действие. С этого момента сбор коммерческих данных запущен для 100% реальных посетителей вашего сайта.

Анализ коммерческих отчетов в интерфейсе Яндекс Метрики

После того как данные начнут поступать в систему (обычно первые транзакции появляются в интерфейсе аналитики в течение 10–30 минут после реальной покупки на сайте), вам откроется доступ к специализированному аналитическому блоку. В левом меню Яндекс Метрики перейдите в раздел «Отчеты» -> «Электронная коммерция».

Давайте подробно разберем, какие бизнес-инсайты можно извлечь из четырех ключевых стандартных отчетов Яндекса:

  • Отчет «Доход и заказы»: фундаментальный дашборд для владельца бизнеса и директора по маркетингу. Он отображает макропоказатели эффективности интернет-магазина в динамике: общую сумму полученного дохода, средний чек одной транзакции и количество оформленных заказов. Этот отчет позволяет проводить верхнеуровневый экономический аудит. Вы можете мгновенно оценить, какой канал трафика (например, контекстная реклама в Директе или органический SEO-трафик из поиска) приносит реальные живые деньги, а не просто пустые клики.
  • Отчет «Популярные товары»: инструмент для категорийных менеджеров и специалистов по закупкам. Таблица отчета структурирована по конкретным товарным позициям и артикулам (SKU). Для каждого товара выводятся количество просмотров карточки, добавления в корзину, реальные выкупы и итоговый доход. Лайфхак для маркетолога: сопоставляя количество просмотров товара с количеством его добавлений в корзину, вы можете рассчитать внутренний CTR карточки. Если у товара тысячи просмотров, но нулевые добавления в корзину — это явный сигнал о проблеме с ценой или оформлением.
  • Отчет «Товары в корзине»: показывает промежуточное состояние вашего интернет-магазина. Здесь собирается информация о товарах, которые прямо сейчас находятся в корзинах пользователей, а также статистика по брошенным корзинам. Это идеальная база данных для настройки триггерных цепочек писем или запуска узконаправленных кампаний ретаргетинга в Яндекс Директе с предложением индивидуальной скидки на заброшенный товар.
  • Отчет «Популярные категории и бренды»: позволяет подняться над точечными товарами и оценить эффективность глобального дерева категорий вашего сайта. Вы видите финансовую результативность целых разделов каталога (например, вся категория «Электроника» в сравнении с категорией «Одежда»). Отчет незаменим при планировании глобальной маркетинговой стратегии компании, помогая понять, какие товарные направления являются локомотивами бизнеса.

Технические лимиты и правила работы Ecommerce

При проектировании e-commerce систем аналитики необходимо строго соблюдать технические регламенты и ограничения платформы Яндекса. Нарушение этих правил приведет к частичной или полной потере коммерческих пакетов данных:

Сущность системы Действующее ограничение / Жесткий лимит
Максимальное количество товаров в рамках одного пуша (products) Не более 100 уникальных позиций в одном массиве события.
Лимит на длину текстовых полей товара (имя, бренд, variant) До 255 символов на одно поле. Избыточный текст обрезается!
Максимальная вложенность категорий товаров (category) До 5 уровней вложенности, разделенных символом слэша (/).
Поддерживаемые типы валют в поле currencyCode ISO 4217 (например: RUB, USD, EUR, KZT, BYN).

Важное правило: Поля стоимости товаров (price) и общего дохода от транзакции (revenue) должны передаваться строго в формате числовых значений с плавающей точкой (тип данных Number или Float), например: 12990.00. Категорически запрещено передавать цены в виде строк с использованием кавычек, пробелов-разделителей или знаков валют ("12 990 руб.") — Метрика не сможет распознать такую конструкцию, и финансовые отчеты останутся пустыми. Именно поэтому в нашем кастомном HTML-теге на Шаге 3 мы применили регулярное выражение для принудительного очищения строки до числа.

Как это использовать на практике для кратного роста прибыли?

Внедрение электронной коммерции через Яндекс Тег Менеджер — это не просто дань моде на красивую инфографику в отчетах. Это мощнейший рычаг для управления прибылью вашего интернет-магазина. Как только сквозной сбор коммерческих данных заработает на 100%, вы сможете поднять эффективность вашего маркетинга на принципиально новый уровень:

  1. Автоматическая оптимизация рекламы по ROI / ДРР. В настройках стратегий Яндекс Директа вы сможете отказаться от кликовых оптимизаций и переключить алгоритмы в режим «Оптимизация рентабельности» или «Целевая доля рекламных расходов». ИИ-алгоритмы Яндекса начнут автоматически анализировать e-commerce данные из Метрики и самостоятельно повышать ставки на тех пользователей, которые склонны совершать дорогие покупки с максимальным чеком, отсекая нецелевой мусорный трафик.
  2. Гиперсегментированный ретаргетинг. Вы сможете создавать кастомные аудиторные сегменты на основе коммерческого поведения. Например: «собрать в группу всех пользователей, которые за последние 7 дней просмотрели товары бренда SoundPro на сумму более 20 000 рублей, добавили их в корзину, но не совершили покупку». Нацелив на этот сегмент эксклюзивное рекламное объявление с промокодом, вы получите взрывной рост конверсии в повторные продажи.