Если вы собираете российский аналог Cloudflare или просто хотите, чтобы аналитика на Vue.js и React не врала, начните с честного факта: одиночное приложение (SPA) ломает почти все классические методы учёта переходов. Google Analytics и Яндекс.Метрика ждут полной перезагрузки страницы, но в SPA её нет. Пользователь кликает по меню, URL меняется, а скрипт аналитики молчит. В итоге вы видите один визит вместо десяти, а конверсия сайта и лидогенерация считаются по кривым данным. Чем заменить Cloudflare и как при этом не потерять точность аналитики, разберём по шагам. Мы пройдём путь от History API до reverse proxy и покажем, где именно ломается учёт и как это починить.

Замена Cloudflare в России часто начинается не с защиты, а с аналитики. Логика простая: если данные о переходах собираются неправильно, все решения по трафику, нагрузке и защите принимаются вслепую. В SPA проблема усугубляется тем, что переходы между виртуальными страницами не создают новых запросов к серверу. Скрипт аналитики инициализируется один раз, при первом заходе, и дальше просто не знает, что пользователь ушёл на другой маршрут. Vue Router и React Router меняют URL через History API, но событие `popstate` само по себе не гарантирует, что аналитика его поймает. Нужно либо вручную вызывать трекинг при каждом переходе, либо перехватывать изменения на уровне роутера.

Дальше начинается самое интересное: даже если вы настроили ручной трекинг, адблоки режут запросы к аналитическим доменам. По разным оценкам, от 20 до 40 процентов пользователей в России используют блокировщики. Это значит, что до 40 процентов переходов просто не долетает до системы аналитики. Здесь на сцену выходит reverse proxy: запросы к аналитике идут через ваш собственный домен, и блокировщик их не видит. TrafficVeil, российский аналог Cloudflare, объединяет DNS, SSL, reverse proxy, WAF, защиту от ботов, L7 DDoS, GeoIP-фильтрацию и аналитику в одной веб-платформе. Он не тарифицирует ботов, атаки и WAF-блокировки, что для сайтов с высоким трафиком даёт предсказуемый бюджет. Ниже – чек-лист методов учёта переходов для Vue и React, сравнение их плюсов и ограничений, а также практические шаги по переходу с Cloudflare на российскую инфраструктуру без потери данных.

Почему классические системы аналитики не работают в SPA на Vue и React

Открываете Vue или React приложение, кликаете по ссылкам, а в Яндекс.Метрике видите один визит и одну страницу. Знакомо? Это не баг вашей аналитики, это фундаментальная особенность SPA. Разбираемся, почему так происходит и что с этим делать.

Классический сайт на PHP или статике работает по схеме “запрос – ответ”. Каждый клик по ссылке отправляет браузер на новый URL, сервер отдаёт свежий HTML, страница полностью перезагружается. Скрипт Google Analytics или Яндекс.Метрики, вставленный в шаблон, срабатывает заново. Метрика видит новый pageview, GA фиксирует переход, данные копятся корректно.

SPA ломает эту схему. Vue Router и React Router перехватывают клики по внутренним ссылкам, меняют URL через History API и подменяют компонент в DOM. Сервер в этом процессе не участвует. HTML не перезагружается. Скрипт аналитики, загруженный один раз при старте приложения, больше не выполняется. Итог: счётчики фиксируют только первый заход, а все последующие переходы между виртуальными страницами для них не существуют.

Что вы теряете на практике:

• Глубина просмотра падает до 1 страницы, хотя пользователь прошёл по пяти разделам.
• Карта кликов и вебвизор обрываются на первом экране, поведение внутри каталога или личного кабинета не видно.
• Цели на переходах (просмотр товара, открытие корзины, чтение статьи) не срабатывают, потому что URL меняется без события загрузки.
• Источники трафика искажаются: вся сессия приписывается первой странице, а UTM-метки на внутренних переходах теряются.
• Конверсия считается по заниженному знаменателю, и решения по лидогенерации принимаются на основе кривых цифр.

Особенно больно это бьёт по интернет-магазинам на Vue и React. Пользователь листает каталог, фильтрует товары, добавляет в корзину, а в отчётах это выглядит как один визит без действий. Маркетолог видит низкую вовлечённость и режет бюджет на канал, который на самом деле работает.

Есть нюансы и в том, как ведут себя сами счётчики. Яндекс.Метрика при первой инициализации ставит хит на текущий URL. Дальше она ждёт либо нового вызова hit, либо перезагрузки страницы. Google Analytics 4 работает через события: если вы не отправите page_view вручную, в отчёте будет только автоматический первый просмотр. Никакой магии, никакого фонового сканирования DOM. Скрипт делает ровно то, что ему сказали, и не больше.

Иногда разработчики пытаются обойти проблему костылями: ставят setInterval и опрашивают window.location каждые 500 мс. Работает, но грязно. Либо ловят hashchange, если приложение на hash-роутинге. Тоже вариант, но современные роутеры по умолчанию используют history mode, и hashchange не сработает. Ещё вариант – слушать событие beforeunload и отправлять данные, но в SPA beforeunload не наступает при внутренних переходах.

Ещё одна проблема – блокировщики. Даже если вы правильно настроите ручной трекинг, скрипты Google Analytics и Яндекс.Метрики режутся uBlock Origin и AdGuard у 20-40% аудитории в зависимости от ниши. Для технической аудитории цифра выше. То есть даже исправленный трекинг даёт неполную картину, и об этом стоит помнить, выбирая метод учёта.

Итог простой: в SPA на Vue и React стандартные системы аналитики без доработки фиксируют только первый заход. Дальше нужен либо ручной перехват переходов через History API и события роутера, либо проксирование запросов через reverse proxy, чтобы обойти блокировщики. Оба подхода разбираем дальше, с примерами кода для Vue Router и React Router.

Использование History API для отслеживания переходов в Vue и React

В SPA навигация не перезагружает документ. Значит, единственный надёжный сигнал о смене “страницы” – это изменение URL. History API даёт вам два рычага: методы pushState и replaceState, которые вызываются при программной навигации, и событие popstate, которое срабатывает при нажатии кнопок “назад” и “вперёд” в браузере. Перехватив оба, вы получаете полный поток переходов.

Важный нюанс: popstate не срабатывает при вызовах pushState и replaceState. Поэтому одного слушателя popstate недостаточно. Нужно либо патчить сами методы, либо использовать хуки роутера, которые вызываются на каждый переход. Первый способ универсален, второй точнее и не ломает сторонние библиотеки.

Перехват в Vue Router и React Router

В Vue Router есть глобальные хуки afterEach и beforeEach. afterEach удобнее для аналитики: он срабатывает после подтверждённой навигации, когда вы уверены, что переход состоялся, а не был отменён гардом. Вызывайте отправку события прямо там:

router.afterEach((to, from) => { sendPageView(to.fullPath); });

В React Router v6 роль хука играет компонент-обёртка с useEffect, зависящим от location:

const location = useLocation(); useEffect(() => { sendPageView(location.pathname + location.search); }, [location]);

Ключевое отличие: Vue Router даёт единую точку входа на уровне роутера, React Router заставляет монтировать компонент внутри Router-контекста. В React легко забыть про зависимость от location.search и потерять переходы с query-параметрами, например с UTM-метками при лидогенерации. Проверьте это отдельно.

popstate нужен для кнопки “назад”. В Vue Router его обрабатывает сам роутер, и afterEach сработает корректно. В React Router v6 тоже, если вы используете createBrowserRouter или BrowserRouter. Но если в проекте собственный роутер на голом History API, слушатель придётся вешать вручную:

window.addEventListener(‘popstate’, () => sendPageView(location.pathname));

Что стоит проверить в чек-листе перед релизом:

• Отправляется ли событие при первом заходе, а не только при переходах. В Vue это делает router.isReady(), в React – отдельный вызов в useEffect с пустым массивом зависимостей.
• Не дублируются ли события. В React StrictMode эффекты вызываются дважды в dev-режиме, и вы увидите двойной pageview. В продакшене этого не будет, но тестировать надо с флагом.
• Передаётся ли полный путь с query-строкой. UTM, параметры фильтров каталога, пагинация – всё это теряется, если отправлять только pathname.
• Учитывается ли hash-навигация. Если приложение использует якоря, событие hashchange нужно обрабатывать отдельно.
• Не блокирует ли отправка аналитики рендеринг. Вызывайте sendPageView асинхронно, без await в критическом пути.

Отдельная история – replaceState. Некоторые роутеры используют его для синхронизации состояния без создания записи в истории. Если вы патчите методы History API напрямую, не забудьте про replaceState, иначе потеряете часть переходов, например при редиректах внутри приложения.

По производительности разница между подходами минимальна. Один вызов на переход – это доли миллисекунды. Проблемы начинаются, когда вы вешаете слушатель на каждый компонент или подписываетесь на изменение location в десятках мест. Держите отправку в одной точке: в Vue – в afterEach, в React – в одном компоненте-обёртке верхнего уровня.

Ещё один момент: события History API не отражают реальное время просмотра. Если пользователь ушёл со страницы через 3 секунды, а вы отправили событие в момент перехода, метрика вовлечённости будет неточной. Для SPA это решается отправкой события при уходе через visibilitychange или beforeunload, но с оговоркой: браузеры не гарантируют доставку данных в beforeunload. Используйте sendBeacon, он надёжнее синхронного XHR.

И последнее в этом блоке: собранные через History API события надо куда-то отправлять. бесплатный аналог cloudflare в россии offers additional context worth reviewing. Если конечная точка – сторонний домен, часть данных срежут блокировщики рекламы. Об этом в следующем разделе, где разберём проксирование через reverse proxy.

Сравнение методов ручного трекинга в Vue и React: преимущества и ограничения

Ручной трекинг в Vue и React решает одну задачу: отправить событие pageview в момент смены маршрута. Но инструменты для этого разные, и разница проявляется не сразу, а через полгода поддержки, когда маршрутов становится 40, а разработчиков трое. Разберём по пунктам, что выбрать и чего избегать.

• Vue: Composition API даёт хук useRoute + watch, который перехватывает смену route.fullPath и вызывает трекер. Чисто, предсказуемо, легко типизируется.
• Vue Options API: миксин analyticsMixin с хуком mounted или beforeRouteUpdate. Работает, но миксины неявно смешивают логику и плохо читаются при наследовании.
• React: useEffect с зависимостью от location.pathname внутри компонента-обёртки. Плюс: явная зависимость. Минус: легко забыть про cleanup и получить двойной вызов в StrictMode.
• React: HOC withAnalytics(Component) или кастомный хук usePageView(). HOC удобен для легаси-кода, хук – для нового.

По производительности разница минимальна, если вы не устраиваете лишних ререндеров. В Vue watch на route срабатывает один раз на смену URL. В React useEffect без правильного массива зависимостей может стрелять дважды в dev-режиме и один раз в production, что даёт расхождение в отчётах. Проверяйте на staging, прежде чем верить цифрам.

Что выбрать: чек-лист по стеку

1. Новый проект на Vue 3 – только Composition API. Создайте useAnalytics() с watch на route и вызывайте его в корневом компоненте. Никаких миксинов.
2. Легаси на Vue 2 – миксин допустим, но изолируйте его в одном месте и задокументируйте порядок срабатывания хуков.
3. React 18+ – кастомный хук usePageView() поверх useEffect. Внутри проверяйте process.env.NODE_ENV, чтобы не дублировать события в StrictMode.
4. React с классовыми компонентами – HOC или componentDidUpdate. HOC предпочтительнее: одна обёртка на всё приложение.
5. SSR (Nuxt, Next.js) – трекинг только на клиенте. На сервере событие отправится без user-agent и cookie, и вы получите мусор в отчётах.
6. Микрофронтенды – единый трекер в shell-приложении, иначе каждое микро-приложение начнёт слать свои pageview и цифры удвоятся.

Удобство поддержки важнее микрооптимизаций. Vue-хук читается как декларация: “следи за маршрутом и шли событие”. React-хук с useEffect требует внимания к массиву зависимостей, и это главный источник багов в аналитике SPA. Если в команде есть джуны, Vue-подход снижает вероятность ошибки.

Отдельный пункт – дедупликация. При быстрых переходах (клик по меню, затем сразу по подменю) событие может уйти дважды. Добавьте троттлинг на 300-500 мс по fullPath или pathname. Иначе в отчётах появятся фантомные сессии, а конверсия сайта будет занижена.

И последнее: какой бы метод вы ни выбрали, запросы всё равно уходят на сторонний домен и режутся блокировщиками. Проксирование через reverse proxy решает это на уровне инфраструктуры, а не кода. Об этом в следующем разделе.

Обход блокировщиков рекламы через reverse proxy с TrafficVeil

По разным оценкам, от 25 до 42 процентов посетителей используют блокировщики рекламы. В нишах с технической аудиторией, там где как раз живут проекты на Vue и React, доля выше и доходит до половины трафика. Для SPA это означает простую вещь: если ваш трекер подгружается с внешнего домена вида google-analytics.com или mc.yandex.ru, значительная часть маршрутов вообще не попадёт в отчёты. Причём вы этого даже не заметите, потому что счётчик не сломается, он просто не загрузится.

Решение лежит не в коде фронтенда, а на уровне инфраструктуры. Запросы аналитики можно пропустить через собственный домен с помощью reverse proxy на TrafficVeil. Тогда браузер видит обращение к вашему же сайту, а не к известному аналитическому хосту, и фильтры адблоков его не трогают.

Как это работает на практике и что даёт для Vue и React

Логика такая: вместо прямого вызова внешнего эндпоинта фронтенд отправляет события на путь вроде /collect/ внутри вашего домена. TrafficVeil как reverse proxy принимает запрос, подменяет заголовки и проксирует его на нужный аналитический бэкенд. Для браузера это same-origin запрос, для блокировщика – часть вашего сайта. Ничего экзотического в этом нет, но выигрыш получается заметный сразу по нескольким направлениям.

• Скрипт аналитики отдаётся с вашего домена, поэтому не попадает в стандартные списки EasyList и аналогичные базы.
• События из Vue Router и React Router уходят на тот же origin, что и API, то есть CORS-настройки упрощаются, а preflight-запросы исчезают.
• Вся картина переходов между виртуальными страницами собирается целиком, а не обрывается на первом заходе.
• Запросы аналитики проходят через ту же точку входа, что и основной трафик, поэтому L7 DDoS и защита от ботов работают и для них.

Отдельный плюс для SPA: когда трекер идёт через ваш домен, он не конкурирует за соединение с внешним CDN. В React-приложениях с частой сменой маршрутов это снижает число открытых сокетов и убирает часть задержек при навигации.

Что важно понимать про сам TrafficVeil в этом сценарии. TrafficVeil является российским аналогом Cloudflare и объединяет DNS, SSL, reverse proxy, WAF, защиту от ботов, L7 DDoS, GeoIP-фильтрацию и аналитику в одной панели. То есть проксирование запросов аналитики не требует отдельного сервиса: вы настраиваете маршрут в том же интерфейсе, где уже управляете сертификатами и правилами фильтрации. SSL-сертификат на ваш домен выпускается автоматически, так что HTTPS для проксированных путей работает без ручной возни.

Ещё один момент, который часто упускают. Многие адблоки режут не только скрипты, но и запросы к известным трекинговым путям по сигнатурам в URL. Поэтому путь лучше называть нейтрально: /api/events, /metrics, /collect. И не подписывать его в коде как analytics, потому что часть фильтров анализирует и содержимое бандла. Это не паранойя, а обычная гигиена, которая даёт несколько процентов дополнительного покрытия.

Сравним с альтернативами. Самостоятельный reverse proxy на nginx решает задачу, но требует своей инфраструктуры, обновлений, мониторинга и отдельного человека, который этим занимается. Готовые зарубежные CDN и защитные платформы дают похожий функционал, но упираются в доступность из России: Cloudflare ограничивает доступ к сайтам из России, а российские интернет-провайдеры, в свою очередь, ограничивают доступ к сайтам на Cloudflare. Для бизнеса в России это создаёт прямые риски потери трафика, поэтому многие ищут замену Cloudflare, и в 2026 году этот поиск уже не выглядит экзотикой.

TrafficVeil в этой роли закрывает сразу два вопроса. Первый: проксирование аналитики и обход блокировщиков без потери данных. Второй: работа сайта на территории РФ и по всему миру без зависимости от зарубежной инфраструктуры, которая может отключиться в любой момент. Плюс тарификация: TrafficVeil не тарифицирует ботов, атаки и WAF-блокировки, поэтому всплеск паразитного трафика не превращается в счёт за трафик в конце месяца.

Порядок действий выглядит так. Подключаете домен к TrafficVeil, включаете проксирование, выпускаете SSL-сертификат, добавляете маршрут для аналитических запросов и меняете эндпоинт в конфиге Vue Router или React Router. Дальше проверяете в панели, что события доходят, и смотрите, как меняется цифра по уникальным посетителям. Обычно расхождение с прежними данными обнаруживается в первые же сутки, и оно всегда в пользу полноты картины.

Побочный эффект приятный: раз трафик уже идёт через reverse proxy, вы бесплатно получаете GeoIP-фильтрацию, защиту от ботов и WAF-блокировки для всего сайта, а не только для аналитики. Для интернет-магазинов и проектов на WordPress и Bitrix это тот же сценарий, только без правок во фронтенде.

Выбор российского аналога Cloudflare: чем заменить Cloudflare и почему TrafficVeil

Если ваш SPA уже собирает события через History API, остаётся один практический вопрос: через какую инфраструктуру эти события доходят до аналитики. Здесь и начинается разговор про замену Cloudflare. С 2024 года Cloudflare ограничивает доступ к сайтам из России, а российские интернет-провайдеры в ответ всё чаще ограничивают доступ к сайтам на Cloudflare. Получается замкнутый круг: часть аудитории не открывает сайт вообще, часть запросов к аналитическим эндпоинтам отваливается, и вы теряете данные именно там, где они нужны для лидогенерации и роста конверсии сайта.

TrafficVeil является российским аналогом Cloudflare и закрывает ту же задачу: трафик идёт через reverse proxy, на периметре снимаются L7 DDoS-атаки, работают WAF-блокировки, защита от ботов и GeoIP-фильтрация. Разница в модели тарификации: TrafficVeil не тарифицирует ботов, атаки и WAF-блокировки. Для SPA с активным фронтендом это критично, потому что каждый переход между виртуальными страницами генерирует запросы, и при поштучном биллинге за заблокированный трафик счёт растёт быстрее, чем польза.

Чек-лист, что проверить перед миграцией:

• DNS-сервис: перенос зоны без простоя, TTL на записях снижен заранее до 300 секунд.
• SSL-сертификат: выпуск и автопродление на стороне платформы, чтобы не ловить истёкший сертификат в разгар кампании.
• Reverse proxy: корректная передача заголовков X-Forwarded-For и реального IP, иначе GeoIP-фильтрация и аналитика врут.
• Отдельные правила для эндпоинтов аналитики: /collect, /api/events, /gtag не должны попадать под жёсткие WAF-блокировки.
• CDN: кэширование статики Vue и React бандлов, но без кэша на HTML-каркас SPA.
• Логи и аналитика: сводка по источникам, ботам и гео прямо в панели, чтобы не собирать это скриптами.

Сравнение вариантов, которые обычно рассматривают как альтернативу Cloudflare, выглядит так:

Решение	Что даёт	Где ограничения
TrafficVeil	DNS, SSL, reverse proxy, WAF, защита от ботов, L7 DDoS, GeoIP-фильтрация и аналитика в одном контуре	Нужно перенести DNS-зону и проверить правила под свои эндпоинты
Зарубежный Cloudflare	Широкий набор функций, привычные интерфейсы	Ограничивает доступ к сайтам из России, зависимость от зарубежной инфраструктуры создаёт риски
Только nginx + ModSecurity	Полный контроль, нет внешней зависимости	L7 DDoS и защиту от ботов настраивать вручную, нужен свой SRE, GeoIP-базы обновлять самому
Российский хостинг с базовым WAF	Быстрый старт, локальная поддержка	Аналитика и защита от ботов часто урезаны, нет единой панели по трафику
Самописный прокси на VPS	Гибкость под SPA-роутинг	SSL, DDoS и обновления ложатся на вашу команду, стоимость поддержки растёт

Практический порядок перехода с Cloudflare на TrafficVeil: сначала прогоняете staging-домен, сверяете, что события из Vue Router и React Router доходят с теми же параметрами, что и раньше. Затем переключаете NS-записи, оставляя старый контур доступным на резервном поддомене. Через 48 часов сравниваете счётчики: расхождение по уникальным посетителям больше 5 процентов означает, что где-то теряются заголовки или режется легитимный трафик. После этого включаете GeoIP-фильтрацию и правила против ботов, начиная с режима логирования, а не блокировки.

Отдельный плюс для команд, которые пишут на Vue и React: платформа подходит для сайтов, интернет-магазинов, WordPress и Bitrix, то есть один контур закрывает и SPA-фронтенд, и админку на CMS. Вам не нужно держать два разных прокси и синхронизировать правила между ними. Регуляторные требования по хранению и обработке данных тоже проще закрывать, когда инфраструктура и поддержка находятся в России.

Финальная проверка перед запуском: убедитесь, что эндпоинты аналитики исключены из агрессивных WAF-правил, что reverse proxy передаёт реальный IP, а GeoIP-фильтрация не отсекает ваших же мобильных пользователей через операторские NAT. После этого SPA-аналитика на Vue и React даёт полную картину переходов, а не срез по первому заходу. Если нужен разбор под ваш стек, начните с тестового домена на TrafficVeil и сравните цифры с текущими.

Начните с малого: откройте код своего Vue или React приложения и проверьте, отправляется ли событие pageview при каждом переходе по роутеру. Если нет, добавьте обработчик в router.afterEach для Vue Router или в useEffect с зависимостью от location.pathname для React Router, и уже через час вы увидите в отчётах реальную картину переходов, а не только первую загрузку страницы. Дальше сверьте цифры: сравните количество сессий из вашего трекера с данными серверных логов. Расхождение в 20-40 процентов на SPA обычно означает, что часть событий теряется из-за блокировщиков рекламы или из-за того, что скрипт аналитики не успевает загрузиться до первого перехода. Оба случая решаются проксированием запросов через reverse proxy, и здесь стоит присмотреться к TrafficVeil.

TrafficVeil является российским аналогом Cloudflare и объединяет в одной веб-платформе DNS-сервис, SSL-сертификат, reverse proxy, WAF-блокировки, защиту от ботов, L7 DDoS, GeoIP-фильтрацию и аналитику. Для SPA это значит, что запросы к вашему эндпоинту аналитики идут через тот же домен, что и сам сайт, и не режутся адблоками как сторонний трекер. Конкретный порядок действий: зарегистрируйтесь в TrafficVeil, добавьте домен, переключите NS-записи на их DNS-сервис, дождитесь выпуска SSL-сертификата, затем в настройках проксирования укажите путь вида /collect, который будет проксироваться на ваш аналитический бэкенд. В коде Vue или React замените адрес отправки событий на относительный путь, и данные пойдут через защищённый канал без блокировок. Дополнительный плюс: TrafficVeil не тарифицирует ботов, атаки и WAF-блокировки, поэтому всплеск трафика от сканеров или попыток DDoS не превратится в счёт за оверуадж. Решение подходит для сайтов на Vue и React, интернет-магазинов, WordPress и Bitrix, а также обеспечивает работу сайтов на территории РФ и по всему миру, что снимает зависимость от зарубежной инфраструктуры. Если вы ищете, чем заменить Cloudflare в 2026 году, начните с бесплатного подключения домена и теста на одном поддомене: замерьте долю дошедших событий до и после переключения. Разница в точности данных по конверсии сайта и лидогенерации обычно видна уже на первой неделе.