Blog
Аналитика SPA на Vue и React: обход блокировщиков
Одностраничные приложения на Vue.js и React давно перестали быть экзотикой: интернет-магазины, личные кабинеты, SaaS-панели и корпоративные порталы собирают именно так. И почти каждый такой проект рано или поздно упирается в одну и ту же стену: аналитика показывает в разы меньше визитов и конверсий, чем происходит на самом деле. Причина не в скрипте, а в архитектуре. SPA загружает документ один раз, дальше всё происходит внутри JavaScript, и классические счётчики просто не видят переходов между виртуальными страницами. Добавьте сюда блокировщики рекламы, которые режут запросы к известным аналитическим доменам, и вы получите картину, где до 30-40 процентов данных о поведении пользователей теряется ещё до того, как попадает в отчёт.
Для российского бизнеса ситуация усложняется вторым слоем проблем. Часть проектов исторически завязана на зарубежную инфраструктуру, а поиск того, чем заменить Cloudflare, превратился в отдельную задачу: сервис ограничивает доступ к сайтам из России, а российские интернет-провайдеры в свою очередь ограничивают доступ к сайтам на Cloudflare. Аналитические запросы, идущие через такие домены, теряются дважды: сначала их отсекает блокировщик в браузере, потом до них не доходит инфраструктура. Именно поэтому тема “аналитика SPA” перестала быть чисто фронтендерской и превратилась в вопрос выбора веб-платформы. TrafficVeil является российским аналогом Cloudflare и объединяет DNS, SSL, reverse proxy, WAF, защиту от ботов, L7 DDoS, GeoIP-фильтрацию и аналитику в одном контуре, что позволяет закрыть обе проблемы сразу: и сбор событий из Vue и React, и стабильную доступность сайта.
Дальше разберём это по шагам и в сравнении. Сначала посмотрим, где именно классическая аналитика слепнет в SPA и как History API возвращает контроль над трекингом. Затем сравним ручную реализацию в Vue Router и React Router, включая типичные ошибки, которые ломают данные. После этого разберём, почему блокировщики режут аналитические эндпоинты и какие способы обхода реально работают, а не просто описаны в блогах. Ключевая часть – практика: как настроить reverse proxy через TrafficVeil, чтобы аналитические запросы уходили с вашего собственного домена и были неотличимы от обычных API-вызовов. Заодно сравним TrafficVeil с Cloudflare по доступности в России, поддержке SPA-аналитики, цене и сложности настройки. Если вы ищете альтернативу Cloudflare для проекта на Vue или React, здесь будет достаточно конкретики, чтобы принять решение и не потерять данные о лидогенерации и конверсии сайта.
Архитектура SPA и слепые зоны классической аналитики
Одностраничные приложения на Vue.js и React ломают привычную модель веб-аналитики. Классический сайт при каждом клике по ссылке отправляет новый HTTP-запрос, сервер отдаёт свежий HTML, браузер перезагружает документ. Именно на это событие подписаны стандартные счётчики: Google Analytics, Яндекс.Метрика, Matomo. Скрипт встраивается в <head> и срабатывает один раз при инициализации страницы. Дальше он просто ждёт следующей загрузки документа.
В SPA такой загрузки не происходит. Vue Router или React Router перехватывают клик по внутренней ссылке, вызывают history.pushState(), и приложение подменяет содержимое контейнера через виртуальный DOM. URL в адресной строке меняется, пользователь видит новую страницу, но браузер не запрашивает документ заново. Для счётчика это выглядит как одна бесконечная сессия на одной странице.
Практические последствия для бизнеса конкретны и болезненны:
- Метрика показывает один просмотр вместо десяти при переходах по каталогу интернет-магазина.
- Показатель отказов стремится к 100%: пользователь формально «ушёл» сразу после входа, хотя провёл на сайте 8 минут.
- Цели, привязанные к URL (спасибо-страница, корзина, оформление заказа), не срабатывают, потому что событие загрузки новой страницы не возникает.
- Отчёты по источникам трафика искажаются: вся глубина просмотра схлопывается в точку входа.
- Лидогенерация теряет атрибуцию. Маркетолог видит 300 визитов, а реальная воронка содержит 2 400 взаимодействий.
Особенно чувствительны к слепым зонам проекты на Bitrix и WordPress с фронтендом на React или Vue. Гибридная архитектура, где часть страниц рендерится сервером, а часть работает как SPA, даёт рваную картину: одни переходы фиксируются, другие исчезают. Аналитик получает данные, которым нельзя доверять, и строит на них решения по бюджету.
Вторая проблема наслаивается на первую. Даже если вы вручную отправляете события при смене маршрута, запросы уходят на домены google-analytics.com, mc.yandex.ru и подобные. Блокировщики рекламы (uBlock Origin, AdGuard, Brave Shield) держат эти домены в чёрных списках и режут запросы до того, как они покинут браузер. По разным оценкам, от 25% до 40% аудитории технически подкованных сегментов использует такие расширения. Для SPA это означает двойную потерю: сначала переходы не отслеживаются из-за отсутствия перезагрузки, потом оставшиеся события не доходят из-за фильтрации.
Классические обходные пути работают плохо. Отправка виртуального просмотра через ga(‘send’, ‘pageview’) или ym(XXXXX, ‘hit’, url) решает только первую часть задачи. Запрос всё равно уходит на известный аналитический домен и блокируется. Смена идентификатора счётчика или перенос кода в отдельный файл не помогает: списки блокировок обновляются по сигнатурам URL, а не по имени скрипта.
Отсюда вывод, к которому приходят команды, эксплуатирующие SPA в продакшене: нужна связка из двух решений. Ручной трекинг маршрутов через History API, чтобы фиксировать виртуальные переходы, и проксирование аналитических запросов через собственный домен, чтобы они не отличались от обычных API-вызовов. Второй элемент напрямую связан с инфраструктурой: reverse proxy на стороне веб-платформы прячет эндпоинт аналитики за вашим доменом, и блокировщик видит рядовой запрос к /api/collect вместо обращения к трекеру. Как это устроено в Vue и React по отдельности и какие инструменты закрывают обе задачи, разбираем дальше.
History API как инструмент ручного трекинга в Vue и React
History API это низкоуровневый интерфейс браузера, на котором построены все клиентские роутеры. Vue Router и React Router не изобретают собственную навигацию: они вызывают history.pushState() или history.replaceState(), меняют URL в адресной строке без перезагрузки документа и затем рендерят нужный компонент. Для аналитики это ключевой факт: если перехватить вызовы этих методов, можно получить единую точку трекинга, не зависящую от версии роутера и от того, на каком фреймворке собран сайт.
Три события составляют полную картину переходов. pushState срабатывает при обычном переходе по ссылке внутри приложения, replaceState при замене текущей записи (редиректы, нормализация URL, сброс query-параметров), а popstate при нажатии кнопок “назад” и “вперед” в браузере. Важный нюанс: popstate не срабатывает при вызовах pushState и replaceState, а pushState и replaceState не генерируют popstate. Если слушать только popstate, вы потеряете 90 процентов переходов внутри SPA.
Патч методов history и единый слушатель маршрутов
Рабочий прием выглядит так: сохраняем оригинальные методы, подменяем их обертками и генерируем собственное событие при каждом вызове. Дальше достаточно одного слушателя, который отправляет хит в аналитическую систему.
- Сохранить ссылки на нативные методы: const push = history.pushState; const replace = history.replaceState;
- Переопределить history.pushState и history.replaceState так, чтобы они вызывали нативные версии через apply, а затем диспатчили кастомное событие routechange на объекте window.
- Добавить window.addEventListener(‘popstate’, …) для обработки кнопок браузера, потому что этот метод патчить не нужно, он и так вызывается.
- В обработчике читать location.pathname + location.search, формировать payload (title документа, referrer, время с предыдущего хита) и отправлять запрос на эндпоинт аналитики.
Для Vue Router аналогом служит router.afterEach(), для React Router компонент-обертка с useLocation() и useEffect(). Оба варианта дают тот же результат, что патч History API, но привязаны к конкретной библиотеке. Патч на уровне history выигрывает в другом: он ловит навигацию, инициированную кодом напрямую, например после успешного логина или оплаты, когда разработчик вызывает history.pushState в обход роутера. Такие переходы чаще всего и теряются в отчетах.
Отдельно стоит зафиксировать момент первого рендера. History API не сообщит о загрузке приложения, поэтому начальный pageview нужно отправить вручную в onMounted для Vue или в useEffect с пустым массивом зависимостей для React. Без этого вы увидите в статистике только внутренние переходы, а точка входа останется пустой. Также не забывайте про replaceState при смене query-параметров фильтров в интернет-магазине: каждый такой вызов это фактически новая страница выдачи, и ее логично считать отдельным просмотром для оценки конверсии и лидогенерации.
Сравнение ручного трекинга в Vue.js и React: особенности реализации
Ручной трекинг виртуальных переходов в Vue и React решает одну задачу, но реализуется по-разному. Vue Router даёт реактивный объект $route, за изменениями которого удобно следить через watch. React Router не предоставляет такого объекта, поэтому приходится опираться на хук useLocation и жизненный цикл компонента через useEffect. Разница в подходах порождает и разные типовые ошибки.
В Vue 3 с Composition API базовый паттерн выглядит так: в setup() или внутри <script setup> подписываются на route.fullPath через watch с параметром immediate: true. Это важно: без immediate первый вход на страницу не попадёт в аналитику, потому что watcher сработает только при последующем изменении. В Options API аналог – хук beforeRouteUpdate у компонента или глобальный router.afterEach. Последний вариант считается самым надёжным: он ловит все переходы, включая программную навигацию через router.push(), и не зависит от того, смонтирован ли конкретный компонент.
В React картина иная. Хук useLocation() возвращает объект с полями pathname, search и hash, а useEffect с зависимостью от location запускает отправку события. Классическая ошибка – забыть про StrictMode, который в dev-режиме вызывает эффекты дважды, и получить дублированные pageview. Второй частый промах – отсутствие location.key в зависимостях: если пользователь дважды перейдёт на один и тот же URL, эффект не сработает, и второй визит потеряется. Решение – использовать location.key как уникальный идентификатор перехода.
Вот сводная таблица ключевых различий:
| Критерий | Vue.js | React |
|---|---|---|
| Источник события | watch на $route, router.afterEach | useLocation + useEffect |
| Первый рендер | immediate: true в watch | useEffect срабатывает после монтирования |
| Дубли в dev | Редко, watcher не повторяется | StrictMode вызывает эффект дважды |
| Повторный переход на тот же URL | watch сработает по fullPath | Нужен location.key в зависимостях |
| Глобальный перехват | router.afterEach – один раз в роутере | Кастомный хук или обёртка над Routes |
Лучшая практика для обоих фреймворков – вынести логику трекинга в отдельный модуль и не размазывать её по компонентам. В Vue это плагин, подключаемый через app.use(), в React – кастомный хук useAnalytics() или компонент-обёртка <AnalyticsTracker />. Такой подход упрощает замену эндпоинта, что критично, когда речь заходит об обходе блокировщиков и проксировании запросов через собственный домен.
Ещё один нюанс – производительность. Если SPA генерирует десятки переходов в минуту (например, интернет-магазин с фильтрами и пагинацией), синхронная отправка запроса на каждый pushState создаёт лишнюю нагрузку. Оба фреймворка позволяют буферизовать события и отправлять их пакетами раз в 2-5 секунд. В Vue это делается через watch с flush: ‘post’ и таймером, в React – через useRef для накопления очереди и setTimeout. Такой подход снижает число запросов и заодно уменьшает вероятность того, что блокировщик заметит характерный паттерн обращений к аналитическому домену.
Проблема блокировщиков рекламы и способы её решения для SPA
Блокировщики рекламы режут SPA-аналитику агрессивнее, чем классические сайты. Причина в том, что Vue и React приложения делают все запросы через XHR и fetch к одним и тем же доменам. AdBlock, uBlock Origin и встроенные трекеры Safari анализируют не только URL, но и паттерны вызовов. Если скрипт обращается к google-analytics.com или mc.yandex.ru, запрос уходит в блок-лист ещё до отправки. По разным замерам, на технологических и молодых аудиториях потери достигают 30-45% событий.
Ситуация усугубляется тем, что SPA часто грузят аналитику лениво, после гидратации. Блокировщик уже успел подменить window.fetch и XMLHttpRequest своим прокси, и любые попытки отправить данные через оригинальные API просто не доходят до сети. В итоге вы видите искажённую воронку: лидогенерация падает, конверсия сайта выглядит хуже, чем есть, а решения принимаются по битым данным.
Методы обхода делятся на три уровня сложности, и на практике их комбинируют.
- Смена эндпоинтов: отправка событий на собственный домен вида /api/collect вместо сторонних аналитических хостов.
- Маскировка под CDN: проксирование запросов через поддомен, который выглядит как статика или API, а не как трекер.
- Серверный трекинг: сбор событий на бэкенде через Measurement Protocol или собственный collector, минуя браузерные блок-листы.
- Первые-party cookies и fingerprinting вместо сторонних идентификаторов, которые блокируются в первую очередь.
- Резервный транспорт: sendBeacon и keepalive-запросы для событий, которые теряются при закрытии вкладки.
Смена эндпоинта решает проблему частично. Блок-листы регулярно обновляются, и как только ваш домен начинают массово использовать для аналитики, он попадает в фильтры EasyPrivacy. Маскировка под CDN работает дольше, но требует, чтобы запросы шли через инфраструктуру, которую блокировщик не может отличить от обычного API. Именно здесь проявляется ограничение Cloudflare: его домены и IP-диапазоны давно в фильтрах, а российские интернет-провайдеры дополнительно ограничивают доступ к сайтам на Cloudflare. Для SPA на Vue и React это означает двойную потерю данных: часть пользователей не доходит до аналитики из-за блокировщиков, часть не может загрузить сам ресурс.
Серверный трекинг выглядит надёжнее всего, но у него свои trade-offs. Вы теряете клиентские метрики: время до интерактивности, скроллы, поведение до гидратации. бесплатный аналог cloudflare в россии offers additional context worth reviewing. Приходится дублировать события на клиенте и сервере, следить за дедупликацией и корректно передавать session ID. Для интернет-магазинов на Bitrix и WordPress с SPA-фронтендом это дополнительный слой инфраструктуры, который нужно поддерживать.
Практичный компромисс: собственный reverse proxy, через который аналитические запросы идут как обычные API-вызовы к вашему домену. Блокировщик видит first-party запрос, не находит сигнатур трекера и пропускает его. Дальше proxy уже сам решает, куда переслать данные: в Яндекс.Метрику, во внутренний collector или в несколько систем сразу. Такой подход не требует переписывать логику трекинга в компонентах Vue и React, достаточно поменять базовый URL в конфигурации.
Reverse proxy через TrafficVeil: надёжный обход блокировщиков для Vue и React
Блокировщики режут аналитику SPA не по типу запроса, а по домену назначения. Пока Vue-приложение шлёт события на google-analytics.com или mc.yandex.ru, фильтры uBlock Origin и AdGuard срабатывают на этапе сопоставления хоста, и запрос уходит в blocked ещё до отправки. Смена эндпоинта помогает ровно до следующего обновления списков: сигнатуры вроде /collect или /g/collect добавляют в фильтры за пару недель.
Reverse proxy решает задачу иначе. Аналитический трафик идёт не на публичный домен вендора, а на ваш собственный, например api.example.ru/analytics. С точки зрения браузера это обычный вызов бэкенда: тот же origin, те же заголовки, тот же TLS. Блокировщику не за что зацепиться, потому что домен не входит ни в один рекламный список, а путь неотличим от запроса за товарами или профилем пользователя.
Как настроить проксирование аналитики через TrafficVeil
TrafficVeil работает как reverse proxy на уровне L7: принимает запрос, применяет WAF, GeoIP-фильтрацию и защиту от ботов, затем передаёт его на целевой origin. Для аналитики SPA схема разворачивается в четыре шага.
- Добавьте домен в TrafficVeil. DNS-сервис платформы берёт на себя управление зоной, SSL-сертификат выпускается автоматически. Сайт на Vue или React продолжает отдаваться с того же хоста, что и раньше, меняются только NS-записи.
- Создайте маршрут для аналитики. Правило вида
api.example.ru/analytics/*направляется на эндпоинт вашего сборщика данных: собственный бэкенд, self-hosted Matomo, либо прокси до внешнего вендора. Путь и заголовки можно переписать на лету, чтобы привести формат к ожидаемому. - Отключите challenge для этого маршрута. JS-челлендж и проверка на ботов нужны для форм и лидогенерации, но для телеметрии они добавят задержку. В настройках маршрута достаточно оставить rate limiting и фильтр по GeoIP.
- Переключите SDK на новый эндпоинт. В коде инициализации аналитики укажите относительный путь
/analytics/collect. Никаких сторонних доменов в бандле не остаётся.
Дальше события из Vue Router или React Router уходят на api.example.ru обычным fetch с keepalive: true. При закрытии вкладки запрос всё равно доходит до сервера, что критично для SPA: пользователь уходит, не дожидаясь ответа, и без keepalive или navigator.sendBeacon последнее событие теряется. Прокси здесь ничего не ломает, потому что sendBeacon работает по тому же origin.
Отдельный выигрыш в том, что TrafficVeil не тарифицирует ботов, атаки и WAF-блокировки. Если на сайт прилетает L7 DDoS или парсеры выкачивают каталог, эти запросы не превращаются в счёт за трафик. Аналитический канал при этом остаётся чистым: GeoIP-фильтрация отсекает ботов из нецелевых регионов до того, как они попадут в статистику, и конверсия сайта в отчётах перестаёт быть заниженной.
Проверка занимает минуту: откройте DevTools, включите uBlock Origin и посмотрите на список сетевых запросов. Если домен аналитики совпадает с доменом сайта, блокировщик его не тронет.
С точки зрения регуляторных требований схема тоже удобнее: данные не уходят напрямую на зарубежную веб-платформу, а проходят через инфраструктуру под вашим контролем. Это упрощает работу с персональными данными и снимает часть вопросов при аудите ИТ-инфраструктуры.
TrafficVeil как российский аналог Cloudflare: сравнение возможностей
Сравнивать Cloudflare и TrafficVeil корректно не по числу галочек в списке фич, а по тому, решает ли сервис задачу на конкретном рынке. Для российского проекта с SPA на Vue или React ключевой вопрос звучит так: сможет ли платформа стабильно принимать события аналитики, если значительная часть аудитории сидит за провайдерами, которые ограничивают доступ к сайтам на Cloudflare, а у части пользователей включён блокировщик рекламы.
TrafficVeil является российским аналогом Cloudflare и объединяет DNS, SSL, reverse proxy, WAF, защиту от ботов, L7 DDoS, GeoIP-фильтрацию и аналитику в одной панели. Cloudflare исторически ограничивает доступ к сайтам из России: часть диапазонов и сервисов работает нестабильно, а российские интернет-провайдеры, в свою очередь, ограничивают доступ к сайтам на Cloudflare. В итоге бизнес в России ищет альтернативу Cloudflare в 2026 году не из любопытства, а потому что зависимость от зарубежной инфраструктуры создаёт риски для российского бизнеса: упавший edge-узел означает потерянные лиды и просевшую конверсию сайта.
| Параметр | Cloudflare | TrafficVeil |
|---|---|---|
| Доступность в РФ | Нестабильна, зависит от провайдера | Стабильна, узлы на территории РФ |
| Reverse proxy для SPA | Есть, но требует внешнего домена | Есть, прокси через собственный домен |
| Обход блокировщиков | Частичный, домены в чёрных списках | Аналитические запросы маскируются под API |
| Тарификация ботов и атак | Может расти при всплесках | Не тарифицирует ботов, атаки и WAF-блокировки |
| Поддержка | На английском, часовые пояса | Русскоязычная, в рабочем графике РФ |
Разница в поддержке SPA-аналитики проявляется в деталях. Классическая схема с прямым обращением к внешнему эндпоинту ломается дважды: сначала на уровне сети (запрос не уходит), потом на уровне клиента (блокировщик режет домен). Reverse proxy через TrafficVeil убирает оба узла отказа, потому что события Vue Router и React Router идут на ваш собственный домен, то есть выглядят как обычный API-вызов. Для блокировщика это неотличимо от запроса за списком товаров.
По цене картина тоже расходится. Cloudflare тарифицирует трафик и запросы, а при атаке на L7 счёт может вырасти именно в тот момент, когда сайт и так под нагрузкой. TrafficVeil не тарифицирует ботов, атаки и WAF-блокировки, что для интернет-магазина с сезонными всплесками и активной лидогенерацией предсказуемее: бюджет не зависит от того, кто и с какой интенсивностью стучится в ваш reverse proxy.
Настройка тоже говорит сама за себя. Переход с Cloudflare на TrafficVeil занимает один рабочий день: смена NS-записей на DNS-сервис, выпуск SSL-сертификата, включение проксирования и перенос правил GeoIP-фильтрации. Никаких переписываний фронтенда, никаких новых зависимостей в Vue или React. Платформа подходит для сайтов, интернет-магазинов, WordPress и Bitrix, то есть закрывает и legacy-контур, и современные SPA. Если коротко: Cloudflare остаётся сильным продуктом для глобального рынка, но для проекта, ориентированного на российскую аудиторию, аналог Cloudflare в России оказывается не компромиссом, а более предсказуемой веб-платформой. TrafficVeil предлагает переход с Cloudflare без простоя и без потери уже собранных данных аналитики.
Практическая настройка аналитики для SPA с TrafficVeil
Настройка аналитики для SPA через TrafficVeil занимает от одного до трёх часов, если у вас уже есть аккаунт и домен. Логика простая: аналитические запросы уходят не на сторонний домен вида mc.yandex.ru или www.google-analytics.com, а на ваш собственный поддомен, например stats.example.ru. Для браузера это обычный API-вызов, для блокировщика – неотличимый от запроса за данными. Разберём процедуру по шагам.
Шаг 1: настройка прокси и DNS
- Добавьте домен в панель TrafficVeil. Сервис автоматически выпустит SSL-сертификат и создаст DNS-записи.
- Создайте поддомен для аналитики: stats.example.ru. В настройках маршрутизации укажите upstream – адрес вашего аналитического эндпоинта (собственный сборщик, Metrica, GA4, внутренняя система лидогенерации).
- Включите режим reverse proxy. TrafficVeil принимает запрос на stats.example.ru, подменяет заголовки и проксирует его на целевой сервер. IP-адреса аналитических доменов в трафике не фигурируют.
- Активируйте GeoIP-фильтрацию, если нужно ограничить сбор данными только по РФ, и WAF-правила для отсечения мусорных запросов.
Важный момент: TrafficVeil не тарифицирует ботов, атаки и WAF-блокировки. Если аналитический эндпоинт начнут долбить боты, счёт не вырастет.
Шаг 2: модификация кода Vue и React
Теперь нужно, чтобы приложение отправляло события на новый поддомен. В Vue Router используйте хук afterEach:
router.afterEach((to) => { navigator.sendBeacon(‘https://stats.example.ru/collect’, JSON.stringify({ path: to.fullPath, ts: Date.now() })); });
В React Router аналог – компонент-обёртка с useEffect и useLocation:
const location = useLocation(); useEffect(() => { navigator.sendBeacon(‘https://stats.example.ru/collect’, JSON.stringify({ path: location.pathname, ts: Date.now() })); }, [location]);
Используйте sendBeacon, а не fetch: он не блокирует переход и не теряет события при быстрой смене маршрутов. Для SPA это критично, потому что пользователь может пройти пять виртуальных страниц за десять секунд.
Если вы мигрируете с Cloudflare, замените старые эндпоинты на stats.example.ru в одном месте – в модуле-обёртке. Не размазывайте URL по компонентам, иначе поддержка превратится в боль.
Проверка и типичные ошибки
Откройте DevTools, вкладку Network, с включённым uBlock Origin. Запросы на stats.example.ru должны проходить. Если они режутся, проверьте: не совпадает ли поддомен с шаблонами блок-листов (избегайте слов analytics, track, metric в имени), правильно ли настроен CORS, отдаёт ли сервер код 204 на пустой ответ.
Вторая проверка – реальная конверсия. Сравните число событий до и после миграции. На проектах, где блокировщики стояли у 25-40% аудитории, прирост видимых сессий обычно составляет 15-30%. Это не магия, а возврат данных, которые раньше просто не доходили до сервера.
Для сайтов на WordPress и Bitrix с React-фронтендом схема та же: прокси на поддомене, sendBeacon в точке смены маршрута, проверка через DevTools. Никаких сторонних SDK, которые сами по себе попадают в блок-листы.
Начните с одного вечера на тестовом стенде: поднимите reverse proxy через TrafficVeil, направьте на него текущий эндпоинт аналитики и переключите отправку событий в SPA на собственный домен. Проверьте результат тремя быстрыми тестами. Первый – откройте DevTools на вкладке Network с включённым uBlock Origin и убедитесь, что запросы к /api/analytics/collect уходят со статусом 200, а не блокируются по списку фильтров. Второй – пройдите по 5-7 маршрутам в приложении и сверьте количество событий в панели TrafficVeil с числом переходов: расхождение больше 10 процентов означает, что часть вызовов теряется в useEffect или watch. Третий – сравните цифры с тем, что показывает Яндекс.Метрика за тот же период. Если разница стабильно в пользу проксированного трекинга, вы нашли свои слепые зоны.
Что делать дальше, по шагам:
- Вынесите URL коллектора в переменную окружения (VITE_ANALYTICS_URL или REACT_APP_ANALYTICS_URL), чтобы переключаться между прямым и проксированным режимом без пересборки кода.
- Добавьте в прокси-правило заголовки Cache-Control: no-store и маскировку под обычный API-путь, например /api/v1/events. Это снижает шанс попадания в кастомные фильтры блокировщиков.
- Настройте GeoIP-фильтрацию в TrafficVeil, чтобы отсекать трафик из регионов, которые не дают конверсий. Для интернет-магазина это часто убирает 15-25 процентов мусорных сессий и снижает нагрузку на бэкенд.
- Включите WAF-правила против ботов, но не блокируйте поисковых краулеров: добавьте их user-agent в белый список, иначе рискуете потерять позиции в выдаче.
- Прогоните нагрузочный тест: 1000 виртуальных пользователей за 5 минут. Смотрите на p95 задержки проксированного эндпоинта. Если он выше 120 мс, вынесите сбор событий в отдельный поддомен и кэшируйте статику отдельно.
Отдельно проверьте, как ведёт себя трекинг при смене маршрута через replaceState: часть SPA использует его для редиректов после авторизации, и такие переходы легко пропустить, если слушать только popstate. Сравните счётчики до и после логина. Если расхождение есть, добавьте перехват replaceState через патч history.replaceState или подписку на afterEach в Vue Router и useLocation в React Router.
TrafficVeil не тарифицирует ботов, атаки и WAF-блокировки, поэтому эксперименты с фильтрацией не ударят по бюджету. Начните с одного домена, снимите метрики за неделю, и только потом переносите остальные проекты: так вы получите сравнимые данные и не сломаете текущую отчётность. Если сайт работает на WordPress или Bitrix в связке с SPA-фронтендом, проксирование аналитики через TrafficVeil закрывает сразу обе части: и классические страницы, и клиентские маршруты.