Отправка в Google Analytics 4

Web Vitals — это набор ключевых метрик производительности веб-страниц, которые помогают измерять качество пользовательского опыта. Основные показатели: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS) и дополнительные метрики, такие как Interaction to Next Paint (INP). Для интеграции этих данных с Google Analytics 4 (GA4) необходимо использовать официальную библиотеку web-vitals и события GA4.

Установка библиотеки

Для начала необходимо установить пакет web-vitals через npm:

npm install web-vitals

Если используется CDN, можно подключить библиотеку напрямую в HTML:

<script src="https://unpkg.com/web-vitals/dist/web-vitals.iife.js"></script>

Инициализация и сбор метрик

Библиотека предоставляет функции для каждой метрики: getLCP, getFID, getCLS, getINP. Каждая функция принимает колбэк, который получает объект метрики с полями:

  • name — название метрики (LCP, FID, CLS, INP и др.).
  • value — численное значение метрики.
  • delta — изменение значения с момента предыдущего измерения.
  • id — уникальный идентификатор метрики.
  • entries — массив PerformanceEntry, связанных с измерением (если применимо).

Пример базового сбора данных:

import { getLCP, getFID, getCLS } from 'web-vitals';

function sendToGA4({name, value, id}) {
  gtag('event', name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? value * 1000 : value), // преобразование CLS
    event_label: id,
    non_interaction: true
  });
}

getLCP(sendToGA4);
getFID(sendToGA4);
getCLS(sendToGA4);

Преобразование значений метрик

Некоторые метрики требуют масштабирования для правильной передачи в GA4:

  • CLS: умножается на 1000, так как GA4 ожидает целые числа.
  • FID и LCP: округляются до целых миллисекунд.

Пример корректного преобразования:

const adjustedValue = metric.name === 'CLS' ? metric.value * 1000 : metric.value;

Настройка GA4 для приёма Web Vitals

В GA4 события должны содержать следующие параметры:

  • event_name — совпадает с названием метрики (LCP, FID, CLS).
  • event_category — рекомендуется использовать "Web Vitals".
  • value — численное значение метрики.
  • event_label — уникальный идентификатор метрики (metric.id).
  • non_interaction — true, чтобы событие не влияло на показатели отказов.

Использование gtag.js:

function gtagSend(metric) {
  gtag('event', metric.name, {
    event_category: 'Web Vitals',
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
    event_label: metric.id,
    non_interaction: true
  });
}

Отслеживание на одностраничных приложениях (SPA)

SPA требуют дополнительных настроек, так как переходы между маршрутами не обновляют страницу, и метрики могут собираться некорректно. Рекомендуется:

  1. Сбрасывать состояние метрик при каждом изменении маршрута.
  2. Вызывать функции getLCP, getCLS, getFID заново на новом экране.
  3. Использовать PerformanceObserver для наблюдения за Layout Shift на каждом рендере.

Пример перезапуска метрик при смене маршрута:

function trackVitalsForRoute() {
  getLCP(gtagSend);
  getFID(gtagSend);
  getCLS(gtagSend);
}

// вызов при инициализации приложения и смене маршрута
trackVitalsForRoute();

Рекомендации по сбору данных

  • Отправка только после загрузки страницы: метрики LCP и CLS корректны только после рендеринга ключевого контента.
  • Дебаунс отправки CLS: для SPA может быть несколько Layout Shift, поэтому рекомендуется отправлять событие с небольшим таймаутом после последнего изменения.
  • Сохранение уникальности ID: metric.id гарантирует, что одно событие Web Vitals не будет считаться несколько раз.

Интеграция с Google Tag Manager (GTM)

Для отправки Web Vitals через GTM можно использовать пользовательский HTML-тег с тем же кодом:

<script>
  import { getLCP, getFID, getCLS } from 'web-vitals';

  function sendToGTM(metric) {
    dataLayer.push({
      event: 'web_vitals',
      metric_name: metric.name,
      metric_value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
      metric_id: metric.id
    });
  }

  getLCP(sendToGTM);
  getFID(sendToGTM);
  getCLS(sendToGTM);
</script>

Это позволяет отслеживать метрики как стандартные события GA4 через GTM и использовать их для анализа производительности.

Дополнительные возможности

  • Отправка нестандартных метрик: можно использовать getTTFB или getINP аналогично стандартным.
  • Фильтрация событий: для уменьшения нагрузки на GA4 можно отправлять события только при превышении определенного порога.
  • Сбор демо-данных: использовать navigator.connection.effectiveType для сегментации по скорости сети.

Метрики Web Vitals в связке с GA4 позволяют получать объективные данные о пользовательском опыте, выявлять узкие места производительности и оптимизировать скорость и стабильность веб-приложений.

Оглавление