Стандартный сценарий выглядит как бюрократический ад: маркетолог пишет многостраничное техническое задание (ТЗ) на проектирование слоя данных (DataLayer), отправляет его ИТ-директору, задача падает в бэклог, неделями согласуются форматы передачи переменных, а затем бренд ждет планового деплоя. Если сайт собран на React, Vue или тяжелом фреймворке с закрытым бэкендом, процесс интеграции аналитики может затянуться на квартал.

MarTech-подход полностью меняет эти правила игры. Главный принцип MarTech-лида — максимальная автономность от ИТ-отдела. Если фронтенд сайта отдает данные пользователю на экран, значит, эти данные уже находятся в оперативной памяти браузера. MarTech-специалист способен самостоятельно перехватить их, структурировать и сгенерировать правильный DataLayer.push прямо на фронтенде с помощью Яндекс Тег Менеджера (YTM).

В этой статье мы подробно и пошагово разберем, как залезть под капот кастомного SPA-сайта, вытащить скрытые переменные из интерфейса, написать безотказный фронтенд-парсер каталога и запустить полноценный e-commerce трекинг для Яндекс Директа без привлечения программистов.

1. Где прячутся данные товара на React-сайте: открываем консоль

Перед тем как писать скрипт автоматизации, нам нужно понять, откуда мы будем забирать данные. Когда пользователь находится на карточке товара динамического сайта, вся необходимая нам информация (ID товара, цена, название, скидка, категория) уже отрендерена в DOM-дереве.

Откройте консоль разработчика в браузере и изучите вкладку Elements:

• Текстовые узлы интерфейса: Название товара чаще всего лежит внутри тега <h1>, цена — внутри определенного <span> или <div>.
• Скрытые data-атрибуты: Часто разработчики для своих нужд выводят ID товара в атрибуты элементов, например <div class="product-card" data-id="12345">.
• Глобальные JS-объекты: На многих современных сайтах данные о текущем товаре или составе корзины хранятся в глобальном состоянии приложения (Window state), к которому можно напрямую обратиться через консоль, введя, например, window.__INITIAL_STATE__.

Наша задача — написать легковесный JavaScript-код, который в момент клика по кнопке «В корзину» моментально соберет эти разрозненные строки, переведет их в нужные типы данных (строки в текст, цены в числа) и упакует в стандартный массив.

2. Логика работы фронтенд-парсера в Яндекс Тег Менеджере

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

1. Поймать событие инициализации: Скрипт срабатывает в момент клика пользователя по элементу «Добавить в корзину». Слушатель клика мы настраиваем по текстовому узлу или дата-атрибутам, чтобы обойти динамические хэши.
2. Спозиционировать поиск: Скрипт определяет, на какую именно кнопку нажал пользователь, и начинает подниматься вверх по DOM-дереву к родительскому контейнеру карточки товара. Это гарантирует сбор данных именно того товара, с которым взаимодействует клиент.
3. Спарсить переменные: Внутри блока карточки скрипт считывает текст цены, артикула и названия.
4. Очистить данные: Скрипт очищает строки от лишнего мусора (символов валюты, пробелов, знаков рубля), преобразуя цену в чистый формат Float.
5. Сгенерировать стандартный push: Собранные данные упаковываются в официальный синтаксис Яндекса для Ecommerce и принудительно отправляются в window.dataLayer.

3. Технический хардкор: Кастомный генератор DataLayer на чистом JS

Создайте в Яндекс.Тег Менеджере тег типа «Пользовательский HTML». Настройте триггер активации на клик по кнопке добавления товара. Ниже представлен пример кода фронтенд-парсера, который на лету собирает данные карточки товара и самостоятельно пушит их в слой данных: