Пользовательские события

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

Типы событий

1. Действия пользователя

Отслеживайте клики, отправку форм, использование функций:

// Track button click
rum.trackEvent('button_click', {
  button_id: 'signup-cta',
  location: 'homepage-hero'
});

// Track form submission
rum.trackEvent('form_submit', {
  form_name: 'contact',
  fields_filled: 5,
  validation_errors: 0
});

// Track feature usage
rum.trackEvent('feature_used', {
  feature: 'export_pdf',
  user_tier: 'pro'
});

2. Бизнес-метрики

Отслеживайте конверсии, выручку, действия с корзиной:

// Track purchase
rum.trackEvent('purchase', {
  order_id: 'ORD-12345',
  total: 49.99,
  currency: 'USD',
  items: 3
});

// Track add to cart
rum.trackEvent('add_to_cart', {
  product_id: 'SKU-789',
  product_name: 'Widget Pro',
  price: 29.99,
  quantity: 1
});

// Track signup
rum.trackEvent('signup', {
  method: 'email',
  plan: 'free',
  referrer: 'google_ads'
});

3. Контрольные точки производительности

Отслеживайте пользовательские тайминг-метрики:

// Track API response time
const start = performance.now();
await fetch('/api/data');
const duration = performance.now() - start;

rum.trackTiming('api_call', duration, {
  endpoint: '/api/data',
  method: 'GET'
});

// Track feature render time
rum.trackTiming('dashboard_render', 245, {
  widgets: 12,
  data_points: 5000
});

Автоматическое отслеживание

Отслеживание кликов

Автоматически отслеживайте все клики:

const rum = new StatusRadarRUM({
  apiKey: 'your-api-key',
  appId: 'your-app-id',
  endpoint: 'https://rum.statusradar.dev/v1/ingest',

  trackInteractions: true,  // Enable auto-tracking
  trackClicks: {
    enabled: true,
    captureText: true,       // Include button/link text
    captureSelector: true,   // Include CSS selector
    ignoreSelectors: ['.ad', '.analytics']  // Ignore these
  }
});

Отслеживание навигации

Отслеживайте смену маршрутов в SPA:

// React Router
import { useLocation } from 'react-router-dom';

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

  useEffect(() => {
    rum.trackPageView({
      path: location.pathname,
      search: location.search,
      referrer: document.referrer
    });
  }, [location]);
}

// Manual tracking
window.addEventListener('popstate', () => {
  rum.trackPageView({
    path: window.location.pathname
  });
});

Отслеживание форм

Отслеживайте взаимодействия с формами:

rum.trackForms({
  enabled: true,
  captureValues: false,  // Don't capture input values (privacy)
  trackAbandonment: true,
  events: ['submit', 'abandon', 'error']
});

Свойства события

Стандартные свойства

Каждое событие включает:

event_type: тип события
timestamp: когда оно произошло
session_id: ID текущей сессии
page_url: текущая страница
user_agent: информация о браузере

Пользовательские свойства

Добавляйте собственные метаданные:

rum.trackEvent('video_play', {
  video_id: 'intro-2024',
  duration: 120,
  quality: '1080p',
  autoplay: false
});

Свойства пользователя

Связывайте события с данными пользователя:

// Set user context
rum.setUser({
  id: 'user-12345',
  email: '[email protected]',
  name: 'John Doe',
  plan: 'pro',
  signup_date: '2024-01-15'
});

// All subsequent events include user context
rum.trackEvent('feature_used', {
  feature: 'export'
});
// ^ Will include user_id, plan, etc.

Фильтрация событий

Фильтрация на стороне клиента

Фильтруйте события перед отправкой:

rum.configure({
  beforeSend: (event) => {
    // Don't send events from internal IPs
    if (event.ip_address?.startsWith('192.168')) {
      return null;  // Drop event
    }

    // Add extra context
    event.properties.environment = 'production';
    event.properties.version = '1.2.3';

    return event;  // Send modified event
  }
});

Фильтрация на стороне сервера

Настройте в Dashboard:

Dashboard → Observability → Apps → Settings
Раздел Event Filters
Добавьте правила фильтрации:
- Отбрасывать события по типу
- Отбрасывать события по свойству
- Применять выборку к конкретным типам событий

Агрегация событий

Метрики в Dashboard

Просматривайте агрегированные события:

Events → Timeline: события во времени
Events → Top Events: самые частые события
Events → Properties: распределение свойств событий

Пользовательские дашборды

Создавайте графики из данных событий:

-- In dashboard query builder
SELECT
  event_type,
  COUNT(*) as count,
  AVG(properties.duration) as avg_duration
FROM events
WHERE app_id = 'your-app-id'
  AND timestamp > NOW() - INTERVAL '24 hours'
GROUP BY event_type
ORDER BY count DESC

Соображения о производительности

Пакетная отправка событий

События автоматически группируются в пакеты и отправляются каждые 10 секунд:

rum.configure({
  batchSize: 50,          // Send when 50 events collected
  batchInterval: 10000,   // Or every 10 seconds
  maxQueueSize: 1000      // Drop old events if queue full
});

Выборка

Применяйте выборку к высокочастотным событиям:

// Track only 10% of clicks
rum.trackEvent('click', data, {
  sampleRate: 0.1
});

// Or configure per event type
rum.configure({
  sampleRates: {
    'click': 0.1,
    'page_view': 1.0,
    'error': 1.0
  }
});

Валидация событий

Валидация схемы

Определите ожидаемую схему события:

rum.defineEvent('purchase', {
  properties: {
    order_id: { type: 'string', required: true },
    total: { type: 'number', required: true },
    currency: { type: 'string', required: true },
    items: { type: 'number', required: false }
  }
});

// This will warn if properties don't match schema
rum.trackEvent('purchase', {
  order_id: 'ORD-123',
  total: '49.99'  // ⚠️  Warning: total should be number
});

Типобезопасность (TypeScript)

interface PurchaseEvent {
  order_id: string;
  total: number;
  currency: string;
  items?: number;
}

rum.trackEvent<PurchaseEvent>('purchase', {
  order_id: 'ORD-123',
  total: 49.99,
  currency: 'USD',
  items: 3
});

Отладка событий

Логирование в консоль

Включите режим отладки:

rum.configure({
  debug: true  // Log all events to console
});

// Or manually log events
rum.on('event', (event) => {
  console.log('RUM Event:', event);
});

Инспекция сети

Проверьте вкладку network на наличие:

POST к rum.statusradar.dev/v1/ingest
Статус 202 (Accepted)
Ответ: {"status":"ok","received":50}

Проверка в Dashboard

Поток событий в реальном времени:

Dashboard → Observability → Apps → [Your App]
Вкладка Events
Включите «Live Stream»
Наблюдайте события по мере их поступления

Продвинутые паттерны

Иерархия событий

Группируйте связанные события:

// User journey
rum.trackEvent('checkout.started');
rum.trackEvent('checkout.shipping_entered');
rum.trackEvent('checkout.payment_entered');
rum.trackEvent('checkout.completed');

// Query in dashboard with prefix
events.where(event_type LIKE 'checkout.%')

Последовательности событий

Отслеживайте многошаговые сценарии:

const flowId = generateId();

rum.trackEvent('signup.started', { flow_id: flowId });
rum.trackEvent('signup.email_entered', { flow_id: flowId });
rum.trackEvent('signup.password_entered', { flow_id: flowId });
rum.trackEvent('signup.completed', { flow_id: flowId });

// Analyze funnel conversion in dashboard

Контекст ошибки

Добавляйте контекст к ошибкам:

rum.on('error', (error) => {
  rum.trackEvent('error_context', {
    error_message: error.message,
    user_action: 'submitting_form',
    form_data: { fields: 5, validation_passed: false }
  });
});

Управление квотами

События учитываются в месячной квоте. Оптимизируйте с помощью:

Выборки высокочастотных событий (клики, движения мыши)
Фильтрации избыточных событий (дублирующиеся просмотры страниц)
Пакетной отправки событий перед отправкой
Мониторинга квоты в dashboard

См.: Управление квотами

Лучшие практики

СТОИТ ✅

Используйте описательные имена событий: checkout_completed, а не event123
Включайте релевантный контекст в свойства
Задавайте контекст пользователя для персонализированной аналитики
Применяйте выборку к высокочастотным событиям
Валидируйте схемы событий на этапе разработки

НЕ СТОИТ ❌

Отправлять PII (email, номера телефонов) в событиях
Отслеживать каждый отдельный клик (используйте выборку)
Отправлять крупные payload (>100 КБ на событие)
Жёстко прописывать чувствительные данные в свойствах событий
Забывать тестировать отслеживание событий в staging

Справочник по API

// Track custom event
rum.trackEvent(eventType: string, properties?: object, options?: object)

// Track timing
rum.trackTiming(name: string, duration: number, properties?: object)

// Track page view
rum.trackPageView(properties?: object)

// Set user context
rum.setUser(userProperties: object)

// Update user properties
rum.updateUser(properties: object)

// Clear user context
rum.clearUser()

// Listen to events
rum.on('event', callback)
rum.on('error', callback)
rum.on('pageview', callback)

Дальнейшие шаги

Отслеживание ошибок — отладка production-проблем
Session Replay — просмотр пользовательских сессий
Observability-приложения — конфигурация приложения

On this page