Business метрики

Бизнес-метрики отражают ценность пользовательских действий для продукта: конверсия, удержание, доход, вовлечённость, скорость достижения цели. Во фронтенде на Lit эти показатели формируются на уровне компонентов и потоков событий, где каждое взаимодействие может быть измерено, агрегировано и передано в аналитические системы. Архитектура Lit — декларативный рендеринг, реактивные свойства и жизненный цикл Web Components — позволяет встроить измерения без нарушения изоляции и повторного использования компонентов.

Типы бизнес-метрик и их представление в UI

Событийные метрики

  • клики, отправки форм, подтверждения действий;
  • шаги воронок (onboarding, checkout);
  • пользовательские ошибки, отмены.

Состояний и атрибутов

  • статус подписки, тариф;
  • доступность функций;
  • выполнение SLA (время отклика, завершённость операций).

Агрегированные показатели

  • CR (conversion rate);
  • ARPU/LTV (через связку с бэкендом);
  • время до ценного действия (TTFV).

Во фронтенде метрика — это структурированное событие с контекстом: кто, где, что и при каких условиях. Lit-компонент — оптимальное место для формирования контекста.

Инструментирование компонентов Lit

Lit строится вокруг реактивных свойств и шаблонов. Метрики следует привязывать к:

  • изменениям свойств;
  • пользовательским событиям;
  • этапам жизненного цикла.

Базовый слой трекинга

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

export const track = (event, payload = {}) => {
  window.dispatchEvent(new CustomEvent('metric', {
    detail: { event, payload, ts: Date.now() }
  }));
};

Компоненты используют трекер, не зная о конечном получателе данных.

Метрики через жизненный цикл компонента

connectedCallback / disconnectedCallback Фиксируется факт появления или исчезновения бизнес-блока (например, показ платного оффера).

connectedCallback() {
  super.connectedCallback();
  track('offer_view', { offerId: this.offerId });
}

firstUpdated Подходит для измерения времени до готовности критичного UI.

firstUpdated() {
  track('checkout_ready', {
    renderTime: performance.now()
  });
}

updated(changedProperties) Используется для метрик перехода состояний.

updated(changed) {
  if (changed.has('status') && this.status === 'paid') {
    track('payment_success', { orderId: this.orderId });
  }
}

Реактивные свойства как источник метрик

Каждое реактивное свойство Lit — потенциальный сигнал бизнес-логики. При проектировании компонентов свойства делятся на:

  • визуальные (не влияют на бизнес-метрики);
  • бизнес-значимые (влияют на доход, конверсию, удержание).

Явное документирование бизнес-значимых свойств снижает риск потери данных при рефакторинге.

static properties = {
  status: { type: String },      // бизнес-состояние
  loading: { type: Boolean }     // техническое
};

События компонентов и воронки

Lit активно использует CustomEvent. Это естественный механизм построения воронок на уровне UI.

this.dispatchEvent(new CustomEvent('step-complete', {
  detail: { step: 'address' },
  bubbles: true,
  composed: true
}));

Контейнерные компоненты или роутер перехватывают события и формируют последовательность шагов, не внедряя аналитику в каждый атомарный элемент.

Контекст метрик и композиция компонентов

Компоненты Lit часто вложены и переиспользуются. Для бизнес-метрик важен контекст:

  • экран;
  • продуктовая зона;
  • эксперимент (A/B);
  • сегмент пользователя.

Контекст передаётся:

  • через свойства;
  • через контекст API (@lit/context);
  • через глобальный стор.
track('cta_click', {
  screen: this.screen,
  experiment: this.experimentId
});

Композиция контекста происходит на уровне родительских компонентов, атомарные элементы остаются универсальными.

Эксперименты и A/B-метрики

Lit-компоненты хорошо подходят для экспериментов за счёт инкапсуляции.

Подход:

  1. Экспериментальный флаг приходит из конфига.
  2. Компонент выбирает вариант UI.
  3. Метрика фиксирует вариант и результат.
render() {
  return this.variant === 'B'
    ? html`<new-offer @click=${this._onClick}></new-offer>`
    : html`<old-offer @click=${this._onClick}></old-offer>`;
}

_onClick() {
  track('offer_click', { variant: this.variant });
}

Производительность как бизнес-метрика

Метрики производительности напрямую связаны с доходом и удержанием:

  • LCP;
  • TTI;
  • задержки интеракций.

Lit минимизирует лишние перерисовки, но измерения необходимы.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    track('web_vital', {
      name: entry.name,
      value: entry.startTime
    });
  });
});

observer.observe({ type: 'largest-contentful-paint', buffered: true });

Ошибки как бизнес-сигнал

Ошибки UI — это потерянные конверсии. Lit позволяет централизовать обработку.

window.addEventListener('error', (e) => {
  track('ui_error', {
    message: e.message,
    stack: e.error?.stack
  });
});

На уровне компонентов фиксируются:

  • ошибки загрузки данных;
  • таймауты;
  • недоступные функции.

Связь с бэкендом и консистентность данных

Фронтенд-метрики должны коррелировать с серверными:

  • идентификаторы сущностей (orderId, userId);
  • единый таймстамп;
  • идемпотентность событий.

Lit-компоненты получают идентификаторы через свойства или контекст и обязаны передавать их в каждом бизнес-событии.

Тестирование бизнес-метрик в компонентах

Юнит-тесты Lit проверяют не только DOM, но и факт отправки метрик.

it('tracks success event', async () => {
  const el = await fixture(html`<pay-button></pay-button>`);
  el.click();
  expect(track).toHaveBeenCalledWith(
    'payment_attempt',
    expect.any(Object)
  );
});

Метрика становится частью контракта компонента, а не побочным эффектом.

Антипаттерны при работе с метриками

  • жёсткая привязка к конкретному аналитическому SDK внутри компонента;
  • дублирование событий в родителе и дочернем компоненте;
  • измерение визуальных состояний без бизнес-ценности;
  • отсутствие версионирования событий.

Архитектурная схема

  • Компоненты Lit — генерация событий и контекста.
  • Трекер — нормализация и маршрутизация.
  • Аналитический слой — хранение, агрегация, отчёты.

Такое разделение сохраняет чистоту компонентов и обеспечивает масштабируемость метрик при росте продукта.

Оглавление