Веб‑аналитика в SPA‑приложениях (React, Vue, Angular)

Современный интернет перестал быть набором отдельных страниц. Сегодня большинство веб-приложений — это одностраницные приложения (SPA), построенные на React, Vue или Angular. Они работают как мобильные приложения: загружаются один раз, а затем динамически обновляют содержимое без перезагрузки браузера. Это удобно для пользователей — интерфейс отзывчивый, плавный, быстрый. Но для маркетологов и владельцев бизнеса такой подход стал настоящим вызовом: как отслеживать поведение пользователей, если страница не меняется? Как понять, какие кнопки кликают чаще всего? Где люди уходят? Почему конверсия ниже, чем на обычном сайте? Ответ прост — традиционные методы веб-аналитики перестали работать. И если вы не настроили аналитику правильно, ваши данные — это иллюзия. В этой статье мы разберём, как настроить веб-аналитику в SPA-приложениях так, чтобы получать точные, полезные и действенные данные для роста бизнеса.

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

Представьте, что вы используете Google Analytics или Яндекс.Метрику на обычном сайте: пользователь переходит с главной страницы на страницу каталога — браузер делает полную перезагрузку, и аналитическая система фиксирует новый запрос. Это стандартный цикл: URL меняется → сервер отдаёт новую HTML-страницу → аналитика регистрирует просмотр. Но в SPA-приложении всё иначе. При переходе на «новую» страницу браузер не перезагружается. Вместо этого JavaScript загружает новые данные, меняет содержимое DOM-дерева — и URL может меняться только через History API. В результате аналитика не видит «новой страницы» — она думает, что пользователь всё ещё на той же странице. Вы получаете статистику, где 98% трафика приходится на главную страницу, а остальные разделы — просто «нули».

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

Важно понимать: проблема не в инструменте. Google Analytics и Яндекс.Метрика — мощные системы. Проблема в том, что они рассчитаны на классические многостраничные сайты (MPA). В SPA-приложениях нужно «подсказать» аналитике, что происходит внутри приложения. И это не сложно — если знать, как.

Как работает веб-аналитика в SPA: основные принципы

Чтобы анализировать поведение пользователей в SPA, нужно переосмыслить подход к сбору данных. Вместо того чтобы ждать перезагрузки страницы, мы должны отслеживать изменения в интерфейсе. Основная задача — отправлять события аналитике при каждом значимом изменении в пользовательском пути. Это называется «отслеживание маршрутов» (route tracking) или «виртуальные просмотры страниц».

Вот три ключевых принципа, которые нужно понимать:

1. Не ждите перезагрузки. В SPA-приложениях страница загружается один раз. Все последующие действия происходят без HTTP-запросов к серверу. Поэтому вы не можете полагаться на автоматическое отслеживание URL-адресов.
2. Отслеживайте изменения в маршруте. Когда пользователь переходит с /home на /products или /cart, это событие должно быть явно зафиксировано в аналитике. Это не «перезагрузка», а «смена контекста» — и её нужно обрабатывать как отдельную страницу.
3. Отслеживайте действия, а не только просмотры. В SPA-приложениях пользователи кликают, скроллят, открывают модальные окна — всё это важные действия. Их тоже нужно кодировать как события, чтобы понять поведение.

Чтобы реализовать это, вы используете «виртуальные просмотры страниц». Это — имитация стандартного поведения. Когда маршрутизатор SPA (например, React Router, Vue Router или Angular Router) меняет URL, вы вручную отправляете событие аналитике: «Пользователь перешёл на /products». Аналогично, когда пользователь нажимает «Добавить в корзину», вы отправляете событие «add_to_cart».

Вот простой пример: пользователь заходит на сайт, видит баннер с акцией, кликает — и попадает на страницу со скидками. В классическом сайте это был бы новый HTTP-запрос — и аналитика автоматически фиксировала переход. В SPA: браузер остаётся на той же странице, но JavaScript подгружает новый контент. Без ручной настройки аналитика увидит только одно событие — «посетитель пришёл на главную». А вы не узнаете, что пользователь заинтересовался акцией. Но если вы настроите отслеживание маршрутов, вы увидите: «пользователь перешёл на /promo» — и сможете оценить эффективность баннера.

Что такое виртуальный просмотр страницы

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

• Пользователь переходит с / на /catalog — вы вызываете функцию analytics.pageview(‘/catalog’);
• Пользователь переходит с /catalog на /product/123 — вы вызываете analytics.pageview(‘/product/123’);
• Пользователь открывает модальное окно с формой обратной связи — вы вызываете analytics.event(‘modal_open’, ‘contact_form’);

Важно: виртуальный просмотр должен содержать полный URL, включая параметры. Если пользователь попал на /products?category=shoes&sort=new, вы не должны отсылать только /products — нужно передавать всю строку. Это позволяет анализировать фильтры, сортировки и маркетинговые UTM-параметры.

Также важно: виртуальный просмотр должен отправляться после того, как DOM-контент полностью загрузился. Если вы отправляете событие слишком рано — аналитика зафиксирует пустую страницу. Например, в React вы используете useEffect с зависимостью от location, чтобы отправить событие только после рендера нового компонента.

Настройка веб-аналитики для React, Vue и Angular

Теперь перейдём к практической части. Мы рассмотрим, как настроить виртуальные просмотры и отслеживание событий в трёх популярных фреймворках. Суть одинакова, но реализация отличается.

React: настройка с помощью React Router

В React приложениях маршрутизация обычно реализуется через библиотеку React Router. Чтобы отслеживать переходы, вы можете использовать хук useLocation из React Router и эффект useEffect.

Пример кода:

«`jsx
import { useLocation } from ‘react-router-dom’;
import analytics from ‘./analytics’; // ваша аналитическая библиотека

function App() {
const location = useLocation();

useEffect(() => {
// Отправляем виртуальный просмотр при изменении пути
analytics.pageview(location.pathname + location.search);
}, [location]);

return (

{/* ваши маршруты */}

);
}
«`

Здесь location.pathname — это текущий путь (например, /product/123), а location.search — это строка параметров (например, ?utm_source=facebook). Вместе они дают полный URL. useEffect с зависимостью от location срабатывает каждый раз, когда маршрутизатор меняет URL — и именно тогда мы отправляем событие.

Важно: не забудьте отключить автоматическое отслеживание в Google Analytics или Яндекс.Метрике — оно будет дублировать события. В Google Analytics для SPA-сайтов рекомендуется отключить автоматический сбор страниц и использовать только виртуальные просмотры.

Vue: отслеживание с помощью Vue Router

В Vue.js маршрутизация реализуется через vue-router. Здесь вы можете использовать хуки маршрутизации — например, afterEach.

Пример кода:

«`js
import { createRouter, createWebHistory } from ‘vue-router’;
import analytics from ‘./analytics’;

const router = createRouter({
history: createWebHistory(),
routes: [
// ваши маршруты
]
});

router.afterEach((to, from) => {
// Отправляем виртуальный просмотр при смене маршрута
analytics.pageview(to.fullPath);
});
«`

Тут to.fullPath содержит полный URL с параметрами. Этот код помещается в файл инициализации маршрутизатора (обычно router/index.js). Он срабатывает автоматически при каждом переходе — и не требует вмешательства в компоненты.

Также вы можете отслеживать события, например, клики на кнопку «Купить»:

«`js
// В компоненте
methods: {
addToCart() {
analytics.event(‘add_to_cart’, { product_id: ‘123’ });
// логика добавления в корзину
}
}
«`

Angular: отслеживание через Router

В Angular вы можете подписаться на изменения маршрутов с помощью Router и NavigationEnd.

Пример кода в файле app.component.ts:

«`ts
import { Component, OnInit } from ‘@angular/core’;
import { Router, NavigationEnd } from ‘@angular/router’;
import * as analytics from ‘./analytics’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’
})
export class AppComponent implements OnInit {
constructor(private router: Router) {}

ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
// Отправляем виртуальный просмотр
analytics.pageview(event.urlAfterRedirects);
}
});
}
}
«`

Здесь event.urlAfterRedirects содержит окончательный URL после всех редиректов — это важно, если у вас есть перенаправления (например, с /home на /). Также вы можете отслеживать клики по кнопкам в компонентах, используя методы analytics.event().

Что делать с UTM-метками и рекламными кампаниями

В SPA-приложениях UTM-параметры (utm_source, utm_medium и т.д.) часто теряются после первой загрузки. Это критично — вы не сможете понять, из какой рекламной кампании пришёл пользователь. Решение: сохраняйте UTM-метки в localStorage или sessionStorage при первом заходе и передавайте их с каждым виртуальным просмотром.

Пример для React:

«`jsx
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
const utmSource = urlParams.get(‘utm_source’);

if (utmSource && !localStorage.getItem(‘utm_source’)) {
localStorage.setItem(‘utm_source’, utmSource);
}

analytics.pageview(location.pathname + location.search, {
utm_source: localStorage.getItem(‘utm_source’) || ‘direct’,
utm_medium: localStorage.getItem(‘utm_medium’) || ‘organic’
});
}, [location]);
«`

Так вы сохраните источник трафика на весь сеанс пользователя — даже если он перейдёт по внутренним ссылкам. Это позволяет точно определять ROI рекламных каналов.

Отслеживание пользовательских событий: кнопки, формы, модальные окна

Виртуальные просмотры — это только начало. В SPA-приложениях пользователь совершает множество действий, которые не связаны с изменением маршрута. Их тоже нужно отслеживать — иначе вы не сможете понять, что мешает конверсии.

Вот список ключевых событий, которые стоит отслеживать:

• Клики по кнопкам: «Добавить в корзину», «Заказать звонок», «Подписаться»
• Формы: отправка заявки, регистрация, вход в личный кабинет
• Взаимодействие с контентом: открытие аккордеона, скроллинг до конца статьи, просмотр видео
• Модальные окна: открытие чата, всплывающие формы, попапы с акциями
• Ошибки: 404, сетевые сбои, проблемы с загрузкой данных

Пример: вы запустили рекламную кампанию на новую линейку продуктов. Увеличился трафик, но конверсия в покупки не растёт. Что делать? Отслеживайте событие «add_to_cart». Если оно редко срабатывает — значит, проблема в цене или дизайне кнопки. Если событие есть, но пользователи не переходят к оплате — значит, проблема в корзине. Без отслеживания событий вы будете гадать на кофейной гуще. С ним — у вас есть данные для принятия решений.

Как правильно кодировать события

Все аналитические системы (Google Analytics, Яндекс.Метрика) используют структуру событий: категория — действие — метка — значение.

Рекомендации по структуре:

Примеры событий:

• Категория: «Кнопки», Действие: «click», Метка: «header_cart» — пользователь кликнул на корзину в шапке.
• Категория: «Формы», Действие: «submit», Метка: «contact_form» — пользователь отправил форму обратной связи.
• Категория: «Модальные окна», Действие: «open», Метка: «promo_popup» — пользователь открыл всплывающий баннер.

Важно: названия должны быть единообразными. Не пишите «click», «нажал», и «button_click» — выберите один стиль. Используйте нижний регистр и подчёркивания: «add_to_cart», а не «AddToCart».

Как проверить, что аналитика работает

Настройка — это только половина дела. Теперь нужно убедиться, что данные приходят правильно. Иначе вы рискуете принимать решения на основе ложных данных — и это может стоить вам десятков тысяч рублей.

Вот пошаговый чек-лист для проверки:

1. Откройте инструменты разработчика в браузере (F12).
2. Перейдите на вкладку Network и включите фильтр «XHR» или «Fetch».
3. Перейдите по внутренней ссылке в SPA (например, с /home на /products).
4. Найдите запрос к аналитике: в Google Analytics это будет /collect, в Яндекс.Метрике — hit.
5. Проверьте параметры запроса: в URL должны быть dl=.../products и dt=Продукты. В Яндекс.Метрике — r=.../products.
6. Проверьте события: нажмите кнопку «Добавить в корзину» — должен появиться запрос с ea=add_to_cart.
7. Откройте отчёт в Google Analytics или Яндекс.Метрике и проверьте, появляются ли новые страницы в разделе «Просмотры страниц».
8. Используйте Real-Time отчёт: перейдите на другую страницу — вы должны увидеть её в реальном времени.

Обратите внимание: если вы видите, что аналитика не фиксирует переходы — проверьте:

• Не отключена ли аналитика в блокировщике рекламы (AdBlock, uBlock)
• Не блокируется ли запрос к аналитике через CORS или Content Security Policy
• Не ошибка ли в коде — например, вы забыли импортировать библиотеку
• Не отправляется ли событие до того, как библиотека проинициализировалась

Для сложных случаев используйте Tag Assistant от Google — он покажет, какие события отправляются и почему некоторые из них не доходят.

Частые ошибки и как их избежать

Даже опытные команды допускают ошибки при настройке аналитики в SPA. Вот пять самых распространённых и как их исправить:

Ошибка 1: Отслеживание только URL без параметров

Вы отслеживаете /product, но не /product?id=123. В результате вы теряете данные о конкретных товарах.

Решение: всегда используйте полный URL: window.location.pathname + window.location.search.

Ошибка 2: Дублирование событий

Вы отправляете виртуальный просмотр при загрузке страницы и ещё раз при смене маршрута. Итог: один пользователь — три просмотра главной.

Решение: отключите автоматическое отслеживание в аналитике. Используйте только ручные вызовы.

Ошибка 3: Нет отслеживания ошибок

Пользователь не может оформить заказ — и вы этого не знаете. Почему? Потому что ошибка в консоли браузера, а не в аналитике.

Решение: добавьте отслеживание ошибок JavaScript: window.addEventListener('error', ...) или используйте Sentry, LogRocket.

Ошибка 4: Игнорирование мобильных пользователей

Вы настраиваете аналитику только для десктопа. А мобильные пользователи уходят в 2 раза чаще — и вы не знаете почему.

Решение: тестируйте аналитику на мобильных устройствах. Проверяйте, как работает отслеживание при быстрых переключениях и тормозящих соединениях.

Ошибка 5: Отсутствие тестирования

Вы настроили аналитику, но не проверяете её после каждого релиза. И вдруг — через неделю выясняется, что все события перестали отправляться.

Решение: добавьте аналитику в процесс тестирования. Создайте чек-лист: «Проверить, что маршруты и события отслеживаются после каждого изменения в роутинге».

Заключение: аналитика как инструмент роста

Веб-аналитика в SPA-приложениях — это не «техническая задача», которую можно отдать разработчикам и забыть. Это стратегический инструмент, который определяет, насколько эффективно ваш бизнес работает. Если вы не знаете, куда уходят пользователи, почему они отказываются от покупки или как проходит их путь — вы не можете улучшать продукт. Вы просто гадаете.

Настройка аналитики в React, Vue или Angular требует внимания к деталям. Но это того стоит. После её реализации вы получите:

• Точную картину поведения пользователей
• Понимание, какие страницы и кнопки работают лучше всего
• Возможность тестировать гипотезы на реальных данных
• Информацию для оптимизации рекламных бюджетов
• Повышение конверсии за счёт данных, а не догадок

Не ждите, пока «всё само настроится». Начните сегодня: выберите один SPA-проект, добавьте отслеживание маршрутов и одно ключевое событие (например, «добавить в корзину»). Через неделю вы увидите разницу. И начнёте принимать решения не на основе «я думаю», а на основе «данные показывают».

Веб-аналитика — это не про технические хаки. Это про понимание людей. И если вы хотите, чтобы ваш бизнес рос — не игнорируйте эту область. Ваша аудитория уже в SPA-приложении. Теперь нужно понять, что они там делают.

FAQ

Как выбрать аналитическую систему для SPA: Google Analytics или Яндекс.Метрика?

Обе системы поддерживают виртуальные просмотры и события. Google Analytics 4 более гибкий, но сложнее в настройке. Яндекс.Метрика проще и лучше понимает русскоязычную аудиторию. Выбирайте в зависимости от целевой аудитории: если вы продвигаетесь в России — Яндекс.Метрика, если хотите международный охват — Google Analytics 4.

Стоит ли использовать Tag Manager в SPA?

Да, особенно если у вас много событий и вы не хотите вмешиваться в код приложения. Google Tag Manager позволяет управлять аналитикой через интерфейс — и добавлять события без правок кода. Но для SPA-приложений нужно использовать кастомные триггеры — например, «History Change» в GTM.

Что делать, если аналитика не видит пользователей на мобильных устройствах?

Проверьте, не блокируется ли аналитика мобильными браузерами. Убедитесь, что вы используете HTTPS и корректно настроены CORS-заголовки. Также протестируйте работу в Safari и Chrome для iOS — там часто возникают проблемы с localStorage.

Как отслеживать время на странице в SPA?

Используйте таймер. При смене маршрута фиксируйте время входа, при переходе — вычисляйте разницу. Отправляйте событие «time_on_page» с значением в секундах.

Нужно ли отключать автоматическое отслеживание в аналитике?

Да. В SPA-приложениях автоматическое отслеживание создаёт дубли и искажает данные. Включайте только виртуальные просмотры и события — так вы получите точную картину.

Как часто нужно проверять аналитику?

Проверяйте её после каждого релиза. Добавьте пункт в чек-лист: «Проверить, что маршруты и события отслеживаются». Если вы делаете обновления раз в неделю — проверяйте каждый понедельник. Данные должны быть надёжными всегда.