Настройка Session Replay (LogRocket/FullStory) для сайта

Настройка Session Replay (LogRocket/FullStory) для сайта

Ваш клиент сообщает о баге, который невозможно воспроизвести. Логов и скриншотов недостаточно. Вы тратите часы на дебаг, а проблема может быть в редком сценарии. Session Replay решает это: вы буквально смотрите через плечо пользователя, видя каждый клик, скролл и сетевой запрос. За 10 минут вы находите то, на что ушли бы дни.

Мы внедрили Session Replay на 50+ проектах — от интернет-магазинов до SaaS-платформ. Знаем, где спотыкаются даже опытные команды: утечка PII, просадка производительности, неочевидные настройки маскировки. Ниже — проверенные подходы, которые экономят время и нервы.

Почему стоит интегрировать Session Replay с Sentry?

Связка LogRocket + Sentry даёт суперсилу: на каждую ошибку мы получаем видео сессии пользователя. Это сокращает время отладки в 5–10 раз по сравнению с традиционным логгированием. Для интеграции используем вызов LogRocket.getSessionURL, который возвращает прямую ссылку на запись, и сохраняем её в контексте ошибки: Sentry.configureScope(scope => scope.setExtra('sessionURL', sessionURL)). Теперь любой баг можно расследовать с полным контекстом действий пользователя.

Как организовать маскировку данных?

Перед продакшном обязательно скрыть пароли, платёжные данные, персональные поля. В LogRocket для этого используется параметр inputSanitizer: true — все текстовые поля маскируются. Гибкая настройка через requestSanitizer позволяет скрыть заголовки авторизации. Если нужно спрятать конкретные элементы, добавляем CSS-класс lr-hide. В FullStory также есть API-методы для маскировки — по селекторам или атрибутам. На практике маскировка всех PII-полей занимает около 30 минут.

Сравнение инструментов

LogRocket vs FullStory

Open-source альтернатива с self-hosting — OpenReplay. Он уступает по удобству, но даёт полный контроль над данными.

OpenReplay vs LogRocket

LogRocket лучше подходит для отладки сложных багов, а FullStory — для UX-аналитики. По нашим наблюдениям, команды, использующие LogRocket, находят корень проблемы в среднем на 60% быстрее.

Техническая реализация

Установка LogRocket

import LogRocket from 'logrocket';
LogRocket.init('your-app/project-id');

// Идентификация пользователя
LogRocket.identify(user.id, {
  name: user.name,
  email: user.email,
  plan: user.subscriptionPlan
});

Для React добавляется logrocket-react для отслеживания компонентов:

import setupLogRocketReact from 'logrocket-react';
setupLogRocketReact(LogRocket);

Маскировка чувствительных данных

Обязательно перед продакшном — пароли, платёжные данные, персональные поля:

LogRocket.init('app/id', {
  dom: {
    inputSanitizer: true, // скрывает все inputs
    textSanitizer: false
  },
  network: {
    requestSanitizer: request => {
      if (request.headers['Authorization']) {
        request.headers['Authorization'] = '[redacted]';
      }
      return request;
    }
  }
});

Либо через CSS-класс lr-hide на конкретных элементах.

Привязка к ошибкам Sentry

LogRocket.getSessionURL(sessionURL => {
  Sentry.configureScope(scope => {
    scope.setExtra('sessionURL', sessionURL);
  });
});

Теперь в каждой ошибке Sentry есть прямая ссылка на запись сессии пользователя, в которой баг воспроизошёл.

Как мы настраиваем Session Replay

Процесс настройки под ключ

Мы выполняем работу в несколько этапов: аналитика текущей архитектуры → проектирование интеграции → реализация (установка, маскировка, кастомные фильтры) → тестирование на стейджинге → деплой в продакшн. В результате вы получаете готовый инструмент с настроенными дашбордами и алертами.

Что входит в нашу работу

• Установка и настройка LogRocket/FullStory
• Маскировка PII (пароли, email, платежи)
• Интеграция с Sentry/Datadog/Bugsnag
• Настройка фильтров сессий (по браузерам, событиям, пользователям)
• Создание дашбордов для UX-аналитики
• Документация по использованию и доступам
• Обучение команды (1 час онлайн)

Сроки и стоимость

Сроки зависят от сложности интеграции: от 1 до 5 дней. Стоимость рассчитывается индивидуально — оценим ваш проект бесплатно. Экономия времени команды может достигать 40 часов в месяц при использовании интеграции с Sentry. Свяжитесь с нами для консультации.

Почему нам доверяют

Мы занимаемся настройкой аналитических инструментов более 5 лет. Реализовали 50+ проектов по Session Replay для интернет-магазинов, SaaS-платформ и корпоративных порталов. Гарантируем корректную работу и полное соблюдение privacy-стандартов. Закажите настройку Session Replay у нас.

Настройка веб-аналитики: GA4, GTM, Яндекс.Метрика и Amplitude

Мы часто видим: конверсия 1.2 %, трафик растёт, а конверсия стоит. Маркетолог смотрит в Google Analytics и говорит: «пользователи уходят с шага 2 оформления заказа». Разработчик открывает тот же шаг — ошибок нет, в Sentry тишина. Значит, дело не в JS-баге, а в UX или в кривых данных, которые показывает аналитика. Аналитика ломается незаметно: событие перестало трекаться после редеплоя — никто не заметил; GTM-тег стреляет дважды — данные задвоились; фильтр GA4 исключает бота, который на самом деле — реальный трафик с корпоративного прокси. Закажите аудит текущих тегов — мы найдём причину за неделю.

После правильной настройки экономия рекламного бюджета может достигать 150 000 ₽ в месяц — это реальный кейс интернет-магазина с 50 000 сессий в день, где дедупликация purchase вернула 20 % неверно приписанных конверсий.

Почему события GA4 дублируются и как это исправить?

Universal Analytics закрыт, его место заняла событийная модель GA4. В ней нет фиксированных хитов страниц и транзакций — только события с параметрами. Это гибче, но требует правильного дизайна событий.

Автоматические события GA4 собирает сам: page_view, scroll, click, session_start. Рекомендуемые события нужно реализовать самостоятельно: purchase, add_to_cart, begin_checkout, view_item. Google ожидает конкретную схему параметров — если передать product_id вместо item_id, данные попадут в GA4, но не в стандартные отчёты e-commerce. Кастомные события для специфики проекта: filter_applied, video_progress, form_step_completed. Кастомные параметры необходимо зарегистрировать в GA4 Admin → Custom definitions, иначе они не будут доступны в отчётах.

Частая ошибка — событие purchase с дублями. Причина: тег срабатывает на странице /thank-you, пользователь обновляет страницу — второй purchase уходит в GA4. Решение: на бэкенде генерируем уникальный transaction_id и передаём в событие. GA4 de-duplicates по нему (в теории — проверяйте через DebugView). Правильная атрибуция экономит до 20 % рекламного бюджета, который раньше уходил на неверно приписанные конверсии.

Как настроить data layer, чтобы не потерять данные?

GTM — инструмент для управления тегами без деплоя кода. Но «без кода» не значит «без архитектуры». Data Layer — основа всего. Передаём данные из приложения в GTM через dataLayer.push(). Структура: event + контекстные данные. Для e-commerce: перед открытием страницы продукта — push с данными товара. GTM-тег читает из dataLayer, не из DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Название товара',
      price: 1990.00,
      currency: 'RUB'
    }]
  }
});

Плохая практика: GTM-тег парсит DOM — ищет цену в span.price, название в h1. Это ломается при любом изменении верстки. Хорошая практика: всегда dataLayer. Используем Preview Mode для отладки и GTM Server-Side для чувствительных данных — отправка с сервера, не с браузера, обходит блокировщики рекламы, не теряет данные.

Как Яндекс.Метрика дополняет веб-аналитику?

Для российской аудитории Метрика обязательна — особенно Вебвизор. Запись сессии пользователя, который бросил корзину, часто даёт ответ быстрее, чем неделя анализа воронки. Цели в Метрике: событийные (через ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) или автоматические (клик по кнопке, посещение страницы). Связка с CRM через Метрика Плюс — передача офлайн-конверсий. Наш опыт: в 8 из 10 проектов после настройки Метрики находили скрытые баги в UX, которые не показывали другие системы.

Что даёт product analytics в Amplitude?

Amplitude — продуктовый инструмент, в отличие от маркетинговых GA4 и Метрики. Он заточен под анализ поведения пользователей внутри продукта: воронки, ретеншн, user paths. Amplitude подходит для SaaS-продуктов, мобильных приложений и любых сервисов с зарегистрированными пользователями, где важно понять, как проходят онбординг, на каком шаге уходят, какие фичи используют чаще. Ключевые концепции: identify (связать анонимного пользователя с userId после авторизации), group (аккаунт в B2B SaaS), когорты для удержания. Amplitude Chart — воронка шагов за последние 30 дней с разбивкой по источнику.

Мониторинг качества данных

Аналитика без мониторинга — чёрный ящик. Настраиваем:

• GA4 Realtime — проверяем после каждого деплоя, что ключевые события приходят
• Alerting в GA4 — аномалия в количестве событий purchase (резкое падение = что-то сломалось)
• GTM Preview в staging-окружении перед продакшеном
• Ручные тесты воронок раз в неделю — просто пройти путь покупателя и проверить, что всё трекается

Что проверяем после каждого деплоя

• Все ли рекомендуемые события присутствуют в DebugView
• Нет ли задвоений (считаем количество purchase на 100 сессий)
• Не изменилась ли структура dataLayer после обновления фронтенда

Что входит в работу

Процесс и сроки

1. Аудит текущих тегов и данных (2 дня)
2. Дизайн событийной схемы (2 дня)
3. Разработка Data Layer и настройка тегов (3–5 дней)
4. QA в Preview Mode и на staging (2 дня)
5. Деплой и настройка дашбордов (1 день)

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

Wikipedia: Веб-аналитика — подробнее о методах и метриках. Официальная документация по событийной модели GA4 доступна в Google Analytics 4.