Стандартный сценарий выглядит как бюрократический ад: маркетолог пишет многостраничное техническое задание (ТЗ) на проектирование слоя данных (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 должен выполнить строго заданную последовательность действий: