Аналитика для e-commerce без доступа к исходникам

Заказчик владел интернет-магазином на Vue.js. Сайт работал, приносил заказы, но была серьёзная проблема: исходный код отсутствовал. Предыдущий подрядчик передал только собранный проект — минифицированные JS-бандлы без документации и без репозитория. Бизнесу нужна была полноценная аналитика: отслеживание кликов по кнопкам, добавление в корзину, оформление заказа, просмотр товаров — вся воронка. Яндекс.Метрика стояла, но считала только просмотры страниц. Без событий аналитика была бесполезна.

Первая идея — использовать Яндекс Tag Manager (или Google Tag Manager). В теории он позволяет навешивать события на элементы страницы без доступа к коду: находишь кнопку по CSS-селектору, привязываешь событие. На практике это не сработало.

Причина: сайт использовал две версии компонентов — десктопную и мобильную. Это не адаптивная вёрстка, а два разных набора компонентов с разными именами классов, разной структурой DOM и разными обработчиками. Кнопка «Купить» на десктопе и кнопка «Купить» на мобильном — это два совершенно разных элемента с разными селекторами.

Мог ли Tag Manager реально работать в этой ситуации? Технически — да, но ценой огромного количества дублирующих правил: на каждое событие нужно два триггера (десктоп + мобильная версия), причём CSS-классы в скомпилированном Vue содержат хеши, которые могут измениться при любом обновлении. Такая настройка хрупкая, трудозатратная в поддержке и ломается при каждом деплое. По сути, Tag Manager проектировался для сайтов со стабильной и предсказуемой разметкой, а не для SPA с двойным набором динамических компонентов.

Единственная точка, которую можно было редактировать — index.html. Туда мы подключили собственную JS-библиотеку-перехватчик.

Библиотека работала на двух уровнях:

1. Перехват API-вызовов. Через обёртку над fetch и XMLHttpRequest отслеживались все запросы к серверу: добавление в корзину, оформление заказа, авторизация. По URL и телу запроса определялось событие и его параметры — товар, количество, сумма.

2. Перехват DOM-событий. MutationObserver + делегирование событий на document позволяли отлавливать клики по любым элементам независимо от их класса или структуры. Идентификация происходила не по CSS-селекторам (которые нестабильны), а по контексту: тексту кнопки, data-атрибутам товара, структуре ближайшего родительского блока.

Оба потока данных нормализовались в единый формат и отправлялись в Яндекс.Метрику через ym() с нужными целями и параметрами. Библиотека не зависела от внутренней структуры Vue-приложения — она работала на уровне браузера.

Полная воронка e-commerce в Яндекс.Метрике: просмотр каталога, карточка товара, добавление в корзину, оформление заказа. Все события приходят с параметрами: название товара, цена, категория. Любые изменения в аналитике — добавить цель, поменять параметры, отслеживать новый элемент — делаются правкой одного JS-файла, без пересборки приложения и без доступа к Vue-коду.