Эта страница переведена с помощью Cloud Translation API.

Измеряйте производительность с помощью web-vitals.js, Google Analytics и BigQuery.

1. Прежде чем начать

Что вы будете делать

В этом практическом занятии вы:

Свяжите свой ресурс в Google Analytics 4 с BigQuery.
Добавьте библиотеку web-vitals на веб-страницу.
Подготовьте и отправьте данные web-vitals в Google Analytics.
Выполняйте запросы к данным Core Web Vitals в BigQuery.
Создайте панель мониторинга в Google Data Studio для визуализации данных Core Web Vitals.

Что вам понадобится

Аккаунт Google Analytics со свойством GA4 .
Учетная запись Google Cloud.
Веб-браузер на основе Chromium, например Google Chrome или Microsoft Edge. (Более подробную информацию о том, почему вам нужен веб-браузер на основе Chromium, см. в разделе «Поддержка браузеров» .)
Текстовый редактор на ваш выбор, например, Sublime Text или Visual Studio Code.
Место для размещения тестовых страниц, чтобы проверить работу библиотеки web-vitals . (Вы можете использовать локальный сервер для доставки статических веб-страниц или разместить тестовые страницы на GitHub .)
Общедоступный сайт, где вы можете развернуть свой аналитический код. (Внедрение кода в рабочую среду делает примеры BigQuery и Data Studio в конце этого руководства более понятными.)
Знание HTML, CSS, JavaScript и инструментов разработчика Chrome .

Прежде чем начать

Во-первых, свяжите Google Analytics 4 с BigQuery, чтобы иметь возможность начать анализ производительности сразу после запуска вашего кода.

Чтобы связать свой ресурс GA4 с BigQuery, выполните действия, описанные в Справочном центре Google Analytics .

Теперь, когда ваш ресурс Google Analytics готов к экспорту данных о событиях в BigQuery, интегрируйте библиотеку web-vitals на свой сайт.

2. Добавьте библиотеку web-vitals и gtag на веб-страницу.

Сначала добавьте библиотеку web-vitals на веб-страницу.

Откройте шаблон страницы, куда вы хотите добавить библиотеку web-vitals . В этом примере мы будем использовать простую страницу:

базовый.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Вставьте исходный код в пустой файл в вашем текстовом редакторе.
Сохраните файл локально как basic.html .
Скопируйте этот скрипт модуля и вставьте его непосредственно перед закрывающим тегом </body> . Этот скрипт загружает библиотеку web-vitals из сети доставки контента.

базовый.html

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>

В результате код должен выглядеть примерно так.

базовый.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>
</body>
</html>

Сохраните файл.

Вы добавили библиотеку web-vitals на веб-страницу.

3. Измерьте основные показатели веб-страницы (Core Web Vitals).

Core Web Vitals — это показатель реального пользовательского опыта, получаемый с помощью Chrome или библиотеки web-vitals в браузерах Chromium. При запуске web-vitals в рабочую среду вы увидите широкий диапазон результатов в зависимости от скорости соединения пользователей, мощности устройства и того, как они взаимодействуют с вашим сайтом. Чтобы продемонстрировать возможности библиотеки web-vitals , мы смоделируем пользовательский опыт при медленном соединении.

Откройте сохранённый файл в веб-браузере.
Щелкните правой кнопкой мыши по веб-странице.
Нажмите «Просмотреть код элемента» , чтобы открыть инструменты разработчика Google Chrome.

Перейдите на вкладку «Консоль» > «Настройки консоли». .

Установите флажок «Сохранить журнал» , чтобы записи журнала сохранялись при обновлении веб-страницы.

Чтобы имитировать медленное сетевое соединение, перейдите во вкладку «Сеть» > «В сети» > «Медленный 3G» .

Перейдите на вкладку «Консоль» .
Щелкните в любом месте веб-страницы, чтобы принудительно вывести метрику Largest Contentful Paint (LCP).
Нажмите «Обновить эту страницу» чтобы принудительно вывести метрики для Cumulative Layout Shift (CLS) и Interaction to Next Paint (INP).

Чтобы имитировать высокоскоростное сетевое соединение, перейдите во вкладку «Сеть» > «В сети» > «Быстрый 3G» .
Перейдите на вкладку «Консоль» .
Щелкните в любом месте веб-страницы, чтобы принудительно повторно вывести метрику для LCP.

Нажмите «Обновить эту страницу» чтобы принудительно повторно вывести метрики для CLS и INP.

Вот и всё! Вы измерили основные параметры веб-страницы (Core Web Vitals).

4. Более детально изучите данные web-vitals.

Для каждого из измеряемых событий Core Web Vitals в возвращаемых данных содержится множество информации, которую можно использовать для отладки проблем с производительностью. Каждое событие web-vitals содержит массив entries с информацией о событиях, влияющих на текущее значение метрики.

`entries` CLS

Развернув свойство entries объекта, регистрируемого функцией onCLS() вы увидите список записей LayoutShift . Каждая LayoutShift содержит свойство value , отражающее оценку смещения макета , и массив sources , который можно использовать для определения того, какие элементы были смещены.

В этом примере произошло два изменения макета, в обоих случаях переместился элемент h1 на странице. Свойство currentRect показывает текущее положение элемента, а свойство previousRect — его предыдущее положение.

`entries` LCP

Развернув свойство entries объекта, регистрируемого функцией onLCP() мы видим, какие элементы были кандидатами на присвоение значения Largest Contentful Paint до того, как было сообщено окончательное значение.

В этом примере массив entries содержит список всех кандидатов на LCP в хронологическом порядке. В данном случае сначала был отрисован элемент h1 , а затем элемент img . Элемент img представлял собой Largest Contentful Paint (самый большой объект, отображаемый при отрисовке). Сообщаемый элемент LCP всегда является последним элементом в массиве.

`entries` INP

При развертывании свойства entries объекта, регистрируемого функцией onINP(), отображается массив, содержащий запись PerformanceEventTiming , определяющую время следующей отрисовки на странице.

Свойство name указывает, какой тип пользовательского ввода запустил таймер доступности основного потока. value , которое сообщает web-vitals — это задержка, заданная свойством duration элемента PerformanceEventTiming , преобразованная из микросекунд в миллисекунды. В данном случае измеренное значение INP составляет 48 миллисекунд.

5. Подготовьте и отправьте данные веб-статистики в Google Analytics 4.

Прежде чем отправлять данные web-vitals в Google Analytics 4, их необходимо преобразовать в формат, который GA4 может принимать.

Структурируйте отладочную информацию для каждого CWV.

Последний шаг перед отправкой этого кода в Google Analytics — структурирование информации из записей, включая информацию, возвращаемую указанными выше функциями.

диагностика.html

  function getDebugInfo(name, attribution) {
    // In some cases there won't be any entries (e.g. if CLS is 0,
    // or for LCP after a bfcache restore), so we have to check first.
    if (attribution) {
      if (name === 'LCP') {
        return {
          debug_url: attribution.url,
          debug_time_to_first_byte: attribution.timeToFirstByte,
          debug_resource_load_delay: attribution.resourceLoadDelay,
          debug_resource_load_time: attribution.resourceLoadTime,
          debug_element_render_delay: attribution.elementRenderDelay,
          debug_target: attribution.element || '(not set)',
        };
      } else if (name === 'INP') {
        return {
          debug_event: attribution.interactionType,
          debug_time: Math.round(attribution.interactionTime),
          debug_load_state: attribution.loadState,
          debug_target: attribution.interactionTarget || '(not set)',
          debug_interaction_delay: Math.round(attribution.inputDelay),
          debug_processing_duration: Math.round(attribution.processingDuration),
          debug_presentation_delay:  Math.round(attribution.presentationDelay),
        };
      } else if (name === 'CLS') {
        return {
          debug_time: attribution.largestShiftTime,
          debug_load_state: attribution.loadState,
          debug_target: attribution.largestShiftTarget || '(not set)',
        }
      }
    }
    // Return default/empty params in case there is no attribution.
    return {
      debug_target: '(not set)',
    };
  }
  
  function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
    gtag('event', name, {
      // Built-in params:
      value: delta, // Use `delta` so the value can be summed.
      // Custom params:
      metric_id: id, // Needed to aggregate events.
      metric_value: value, // Value for querying in BQ
      metric_delta: delta, // Delta for querying in BQ
      // Send the returned values from getDebugInfo() as custom parameters
        ...getDebugInfo(name, attribution)
    });
  }

Отправьте данные в Google Analytics.

Наконец, создайте функцию, которая принимает параметры из события web-vitals и передает их в Google Analytics.

диагностика.html

function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
  gtag('event', name, {
    // Built-in params:
    value: delta, // Use `delta` so the value can be summed.
    // Custom params:
    metric_id: id, // Needed to aggregate events.
    metric_value: value, // Value for querying in BQ
    metric_delta: delta, // Delta for querying in BQ
    // Send the returned values from getDebugInfo() as custom parameters
      ...getDebugInfo(name, attribution)
  });
}

Зарегистрируйте функцию в каждой из функций web-vitals , и она будет срабатывать, когда браузер будет готов измерить каждое событие:

диагностика.html

onLCP(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onCLS(sendToGoogleAnalytics);

Отлично! Теперь вы отправляете события web-vitals в Google Analytics.

6. Убедитесь, что данные web-vitals отображаются в Google Analytics.

Чтобы ваши события регистрировались в вашем ресурсе Google Analytics 4:

Откройте свой ресурс Google Analytics 4 и перейдите в раздел «Отчеты» .

Выберите «В режиме реального времени».

Несколько раз обновите тестовую страницу и обязательно кликайте на нее между обновлениями, чтобы запустить события INP.
В интерфейсе обзора в реальном времени найдите раздел «Количество событий по названию события» . Вы должны увидеть события LCP, INP и CLS.

Щелкните по любому названию события, чтобы увидеть параметры, передаваемые вместе с этим событием.

Нажмите на эти параметры, чтобы просмотреть сводку значений, полученных Google Analytics.

Возможно, вам захочется добавить в отладочную информацию и другие данные, например, названия шаблонов страниц или другие события страниц, относящиеся к INP, которые обсуждались ранее в этом практическом занятии. Просто измените операторы return в функции getDebugInfo() .

Как только вы убедитесь, что данные, полученные с тестовых страниц, вас устраивают, разверните новый код Google Analytics на рабочем сайте и переходите к следующему шагу.

7. Выполняйте запросы к данным в BigQuery.

После того, как ваш код Google Analytics будет активирован в течение нескольких дней, вы можете начать запрашивать данные в BigQuery. Сначала убедитесь, что данные передаются в BigQuery.

Откройте консоль Google Cloud и выберите свой проект из выпадающего меню в верхней части экрана.
Из навигационного меню В левом верхнем углу экрана нажмите на BigQuery в разделе «Аналитика» .
В панели «Проводник» разверните свой проект, чтобы увидеть набор данных Google Analytics. Название набора данных — analytics_ за которым следует идентификатор вашего ресурса Google Analytics 4 (например, analytics_229787100) .
Разверните набор данных, и вы увидите таблицу events_ . Число в скобках — это количество дней, доступных для запроса.

Подзапрос для выбора только событий CWV

Чтобы запросить набор данных, включающий только наши события CWV, начните с подзапроса, который выбирает события LCP, CLS и INP за последние 28 дней. В частности, он ищет последнее зарегистрированное значение для каждого идентификатора события web-vitals используя ключ metric_id , чтобы убедиться, что вы не учитываете одни и те же события CWV более одного раза.

# Subquery all Web Vitals events from the last 28 days
WITH web_vitals_events AS (
 SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM
 (
   SELECT *
   , IF (ROW_NUMBER() OVER (
     PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
     ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
   ) = 1, true, false) AS is_last_received_value
   # Make sure to update your project ID and GA4 property ID here!
   FROM `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
   WHERE event_name in ('CLS', 'INP', 'LCP') AND
     _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
  )
  WHERE is_last_received_value
)

Это составляет основу всех ваших запросов к этому набору данных. Ваш основной запрос будет выполняться к временной таблице web_vitals_events .

Как структурированы события GA4

Данные каждого события Google Analytics 4 хранятся в STRUCT в столбце event_params . Каждый из параметров события, передаваемых в GA4 на вашем сайте, представлен своим ключом, а значение представляет собой STRUCT с ключом для каждого возможного типа данных. В приведенном выше примере ключ metric_value может иметь значение int_value или double_value , поэтому используется функция COALESCE() . Чтобы получить переданный ранее debug_target , выберите ключ string_value в debug_target .

...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...

Найдите страницы и элементы с наихудшими показателями производительности.

Параметр debug_target — это строковый селектор CSS, соответствующий элементу на странице, наиболее релевантному значению метрики.

В случае CLS, debug_target представляет собой наибольший элемент из наибольшего смещения компоновки, которое повлияло на значение CLS. Если смещение отсутствовало, значение debug_target равно null .

Приведенный ниже запрос отображает страницы в порядке убывания рейтинга (CLS) по 75-му процентилю, сгруппированные по параметру debug_target :

# Main query logic
SELECT
  page_path,
  debug_target,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS metric_p75,
  COUNT(1) as page_views
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
    *
  FROM web_vitals_events
  WHERE metric_name = 'CLS'
)
GROUP BY 1, 2
# OPTIONAL: You may want to limit your calculations to pages with a 
# minimum number of pageviews to reduce noise in your reports. 
# HAVING page_views > 50
ORDER BY metric_p75 DESC

Если вы знаете, какие элементы на странице смещаются, это значительно упростит выявление и устранение первопричины проблемы.

Имейте в виду, что элементы, о которых здесь сообщается, могут отличаться от тех, которые вы видите изменяющимися при локальной отладке страниц, поэтому так важно изначально собирать эти данные. Очень сложно исправить то, что вы не осознаете как проблему!

Отладка других метрик

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

# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'

8. Визуализация результатов запроса в Data Studio.

BigQuery предоставляет быстрый способ визуализации результатов любых запросов через Data Studio. Data Studio — это бесплатный инструмент для визуализации данных и создания дашбордов. Чтобы визуализировать результаты запроса после его выполнения в пользовательском интерфейсе BigQuery, нажмите «Исследовать данные» и выберите «Исследовать с помощью Data Studio» .

Используйте опцию Data Studio в BigQuery для проведения исследований.

Это создает прямую связь между BigQuery и Data Studio в режиме просмотра. В этом режиме вы можете выбрать поля для визуализации, типы диаграмм, настроить фильтры и создавать произвольные диаграммы для быстрого визуального анализа. На основе результатов приведенного выше запроса вы можете создать линейный график, чтобы увидеть динамику значений LCP с течением времени:

Линейный график ежедневных значений LCP в Data Studio

Благодаря прямой связи между BigQuery и Data Studio вы можете быстро создавать диаграммы на основе любых ваших запросов и проводить визуальный анализ. Однако, если вам нужен дополнительный анализ, вы можете просмотреть несколько диаграмм на интерактивной панели мониторинга, чтобы получить более целостное представление или иметь возможность углубиться в данные. Наличие удобной панели мониторинга означает, что вам не нужно каждый раз вручную писать запросы и создавать диаграммы, когда вы хотите проанализировать свои показатели.

Вы можете создать панель мониторинга в Data Studio, используя встроенный коннектор BigQuery . Для этого перейдите на сайт datastudio.google.com , создайте новый источник данных, выберите коннектор BigQuery и выберите набор данных, с которым хотите работать:

Использование встроенного коннектора BigQuery в Data Studio

9. Материализуйте данные Web Vitals.

При создании панелей мониторинга данных событий Web Vitals, как описано выше, использование набора данных экспорта Google Analytics 4 напрямую неэффективно. Из-за структуры данных GA4 и предварительной обработки, необходимой для метрик Web Vitals, части вашего запроса выполняются несколько раз. Это создает две проблемы: производительность панели мониторинга и затраты на BigQuery.

Вы можете бесплатно использовать песочницу BigQuery . В рамках бесплатного тарифа BigQuery первые 1 ТБ обрабатываемых данных в месяц предоставляются бесплатно. Для методов анализа, описанных в этой статье, если вы не используете значительно большой набор данных или не выполняете частые запросы к нему, вы сможете оставаться в пределах этого бесплатного лимита каждый месяц. Но если у вас веб-сайт с высокой посещаемостью и вы хотите регулярно отслеживать различные метрики с помощью быстрой интерактивной панели мониторинга, мы рекомендуем предварительно обрабатывать и материализовывать данные о важных показателях вашего веб-сайта, используя при этом функции повышения эффективности BigQuery, такие как секционирование, кластеризация и кэширование.

Следующий скрипт выполняет предварительную обработку ваших данных BigQuery (исходная таблица) и создает материализованную таблицу (целевая таблица).

# Materialize Web Vitals metrics from GA4 event export data

# Replace target table name
CREATE OR REPLACE TABLE YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.web_vitals_summary
  PARTITION BY DATE(event_timestamp)
AS
SELECT
  ga_session_id,
  IF(
    EXISTS(SELECT 1 FROM UNNEST(events) AS e WHERE e.event_name = 'first_visit'),
    'New user',
    'Returning user') AS user_type,
  IF(
    (SELECT MAX(session_engaged) FROM UNNEST(events)) > 0, 'Engaged', 'Not engaged')
    AS session_engagement,
  evt.* EXCEPT (session_engaged, event_name),
  event_name AS metric_name,
  FORMAT_TIMESTAMP('%Y%m%d', event_timestamp) AS event_date
FROM
  (
    SELECT
      ga_session_id,
      ARRAY_AGG(custom_event) AS events
    FROM
      (
        SELECT
          ga_session_id,
          STRUCT(
            country,
            device_category,
            device_os,
            traffic_medium,
            traffic_name,
            traffic_source,
            page_path,
            debug_target,
            event_timestamp,
            event_name,
            metric_id,
            IF(event_name = 'LCP', metric_value / 1000, metric_value) AS metric_value,
            user_pseudo_id,
            session_engaged,
            session_revenue) AS custom_event
        FROM
          (
            SELECT
              (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'ga_session_id')
                AS ga_session_id,
              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
                AS metric_id,
              ANY_VALUE(device.category) AS device_category,
              ANY_VALUE(device.operating_system) AS device_os,
              ANY_VALUE(traffic_source.medium) AS traffic_medium,
              ANY_VALUE(traffic_source.name) AS traffic_name,
              ANY_VALUE(traffic_source.source) AS traffic_source,
              ANY_VALUE(
                REGEXP_SUBSTR(
                  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'),
                  r'^[^?]+')) AS page_path,
              ANY_VALUE(
                (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'debug_target'))
                AS debug_target,
              ANY_VALUE(user_pseudo_id) AS user_pseudo_id,
              ANY_VALUE(geo.country) AS country,
              ANY_VALUE(event_name) AS event_name,
              SUM(ecommerce.purchase_revenue) AS session_revenue,
              MAX(
                (
                  SELECT
                    COALESCE(
                      value.double_value, value.int_value, CAST(value.string_value AS NUMERIC))
                  FROM UNNEST(event_params)
                  WHERE key = 'session_engaged'
                )) AS session_engaged,
              TIMESTAMP_MICROS(MAX(event_timestamp)) AS event_timestamp,
              MAX(
                (
                  SELECT COALESCE(value.double_value, value.int_value)
                  FROM UNNEST(event_params)
                  WHERE key = 'metric_value'
                )) AS metric_value,
            FROM
              # Replace source table name
              `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
            WHERE
              event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
            GROUP BY
              1, 2
          )
      )
    WHERE
      ga_session_id IS NOT NULL
    GROUP BY ga_session_id
  )
CROSS JOIN UNNEST(events) AS evt
WHERE evt.event_name NOT IN ('first_visit', 'purchase');

Этот материализованный набор данных имеет ряд преимуществ:

Структура данных упрощена, что облегчает выполнение запросов.
В нем сохраняются только события Web Vitals из исходного набора данных GA4.
Идентификатор сессии, тип пользователя (новый или повторный) и информация об участии в сессии доступны непосредственно в столбцах.
Таблица разделена по дате и сгруппирована по названию метрики. Это обычно уменьшает объем данных, обрабатываемых для каждого запроса.
Поскольку для запросов к этой таблице не требуется использовать подстановочные знаки, результаты запросов могут кэшироваться до 24 часов. Это снижает затраты, связанные с повторным выполнением одного и того же запроса.
При использовании механизма бизнес-аналитики BigQuery вы можете применять к этой таблице оптимизированные SQL-функции и операторы .

Вы можете напрямую запрашивать данные из этой материализованной таблицы в пользовательском интерфейсе BigQuery или использовать ее в Data Studio с помощью коннектора BigQuery.

Регулярно запускайте задания материализации.

Если вы выполните приведенный выше запрос без указания диапазона дат, он будет применяться ко всему вашему набору данных Google Analytics. Не стоит делать это каждый день, так как это приводит к повторной обработке больших объемов исторических данных. Вы можете обновить свой запрос, чтобы добавлять только данные за последний день, удалив оператор CREATE or REPLACE TABLE в начале запроса и добавив дополнительный критерий в предложение WHERE в подзапросе к таблице events_intraday_ :

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
  # The _TABLE_SUFFIX replaces the asterisk (*) in the table name
  # 
  AND _TABLE_SUFFIX = FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY)

Этот запрос возвращает только данные за вчерашний день. Затем вы можете использовать консоль BigQuery, чтобы запланировать выполнение запроса ежедневно .

10. Визуализируйте данные в Google Data Studio.

Google Data Studio изначально поддерживает чтение данных из Google BigQuery. Теперь, когда у вас есть данные web-vitals из Google Analytics 4, которые поступают в BigQuery, вы можете использовать коннектор Data Studio BigQuery для прямого чтения вашей материализованной таблицы.

Используйте коннектор Web Vitals.

Поскольку создание панели мониторинга с нуля занимает много времени, мы разработали готовое решение, которое создает для вас шаблон панели мониторинга. Сначала убедитесь, что вы материализовали свою таблицу Web Vitals, используя указанный выше запрос. Затем получите доступ к коннектору Web Vitals для Data Studio по этой ссылке: goo.gle/web-vitals-connector

После однократной авторизации вы должны увидеть следующий экран настроек:

Экран авторизации Web Vitals Connector

Укажите идентификатор материализованной таблицы BigQuery (т.е. целевой таблицы) и идентификатор вашего проекта выставления счетов BigQuery. После нажатия кнопки «ПОДКЛЮЧИТЬ » Data Studio создаст новую панель мониторинга на основе шаблона и свяжет с ней ваши данные. Вы можете редактировать, изменять и делиться панелью мониторинга по своему усмотрению. Если вы создали панель мониторинга один раз, вам не нужно будет снова переходить по ссылке на коннектор, если только вы не захотите создать несколько панелей мониторинга из разных наборов данных.

Перейдите на панель управления.

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

На вкладке «Анализ пользователей» вы можете выбрать показатель и получить разбивку по процентилям показателя, а также по количеству пользователей в зависимости от различных показателей использования и бизнес-показателей.

Вкладка «Анализ путей страниц» помогает выявить проблемные области на вашем веб-сайте. Здесь вы можете выбрать метрику для общего обзора, а также увидеть диаграмму рассеяния всех путей страниц с процентильным значением по оси Y и количеством записей по оси X. Диаграмма рассеяния может помочь выявить страницы с более низкими, чем ожидалось, значениями метрик. После выбора страниц вы можете более детально изучить проблемную область с помощью диаграммы рассеяния таблицы путей страниц или просмотрев таблицу отладки целей.

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

11. Другие ресурсы

Отлично справились с этим практическим заданием! Теперь вы сможете отслеживать показатели Core Web Vitals на вашем сайте с высокой степенью детализации. Вы также сможете выявлять конкретные типы страниц и элементы на вашем сайте, которые вызывают высокие показатели CWV, чтобы сосредоточить усилия на оптимизации.

Дополнительная информация

На сайте web.dev представлено множество статей и примеров из практики со стратегиями улучшения показателей Core Web Vitals. Начните с статей по оптимизации каждого показателя:

Справочная документация

Данный практический пример в значительной степени заимствован из двух статей web.dev:
Статья об измерении показателей Web Vitals в полевых условиях .
В статье об использовании данных Web Vitals GA4 в BigQuery приведено множество других примеров запросов, которые вы можете использовать.
Если вам нужна дополнительная информация об интеграции GA4 > BigQuery Export, пожалуйста, обратитесь в Справочный центр Google Analytics .

Измеряйте производительность с помощью web-vitals.js, Google Analytics и BigQuery.

1. Прежде чем начать

Что вы будете делать

Что вам понадобится

Прежде чем начать

2. Добавьте библиотеку web-vitals и gtag на веб-страницу.

базовый.html

базовый.html

базовый.html

3. Измерьте основные показатели веб-страницы (Core Web Vitals).

4. Более детально изучите данные web-vitals.

entries CLS

entries LCP

entries INP

5. Подготовьте и отправьте данные веб-статистики в Google Analytics 4.

Структурируйте отладочную информацию для каждого CWV.

диагностика.html

Отправьте данные в Google Analytics.

диагностика.html

диагностика.html

6. Убедитесь, что данные web-vitals отображаются в Google Analytics.

7. Выполняйте запросы к данным в BigQuery.

Подзапрос для выбора только событий CWV

Как структурированы события GA4

Найдите страницы и элементы с наихудшими показателями производительности.

Отладка других метрик

8. Визуализация результатов запроса в Data Studio.

9. Материализуйте данные Web Vitals.

Регулярно запускайте задания материализации.

10. Визуализируйте данные в Google Data Studio.

Используйте коннектор Web Vitals.

Перейдите на панель управления.

11. Другие ресурсы

Дополнительная информация

Справочная документация

`entries` CLS

`entries` LCP

`entries` INP