Эта страница переведена с помощью 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 DevTools .

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

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

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

Теперь, когда ваш ресурс 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. Измерьте основные веб-показатели веб-страницы.

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

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

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

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

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

Откройте вкладку Консоль .
Щелкните в любом месте веб-страницы, чтобы принудительно распечатать метрику для наибольшего содержимого (LCP).
Нажмите «Обновить эту страницу». для принудительной печати показателей совокупного смещения макета (CLS) и взаимодействия с следующей отрисовкой (INP).

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

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

Вот и все! Вы измерили основные веб-показатели веб-страницы.

4. Более подробно изучите данные веб-показателей.

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

`entries` CLS

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

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

`entries` LCP

Расширение свойства записей объекта, зарегистрированного с помощью onLCP() показывает нам, какие элементы были кандидатами на наибольшую по содержанию отрисовку до того, как было сообщено окончательное значение.

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

`entries` ИЯФ

Когда вы расширяете свойство 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. Убедитесь, что данные веб-показателей заполняются в Google Analytics.

Чтобы гарантировать, что ваши события регистрируются вашим ресурсом Google Аналитики 4:

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

Выберите Реальное время.

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

Нажмите на любое имя события, чтобы просмотреть параметры, передаваемые с этими событиями.

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

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

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

7. Запросите свои данные в BigQuery.

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

Откройте Google Cloud Console и выберите свой проект в раскрывающемся меню вверху экрана.
Из меню навигации в левом верхнем углу экрана нажмите BigQuery под заголовком Analytics .
На панели Explorer разверните свой проект, чтобы увидеть набор данных 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. Визуализация результатов запроса в Студии данных

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

Исследуйте с помощью опции Data Studio в BigQuery

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

Линейный график ежедневных значений LCP в Студии данных

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

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

Использование собственного коннектора BigQuery в Студии данных

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 BI Engine, вы можете запускать оптимизированные функции и операторы SQL в этой таблице.

Вы можете напрямую запросить эту материализованную таблицу из пользовательского интерфейса BigQuery или использовать ее в Студии данных с помощью коннектора 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. Другие ресурсы

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

Дальнейшее чтение

На сайте web.dev есть множество статей и тематических исследований, посвященных стратегиям улучшения основных веб-показателей. Начните с оптимизации статей по каждому показателю:

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

Эта кодовая лаборатория во многом заимствована из двух статей на 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. Измерьте основные веб-показатели веб-страницы.

4. Более подробно изучите данные веб-показателей.

entries CLS

entries LCP

entries ИЯФ

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

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

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

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

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

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

6. Убедитесь, что данные веб-показателей заполняются в Google Analytics.

7. Запросите свои данные в BigQuery.

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

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

Найдите свои худшие страницы и элементы

Отладка других показателей

8. Визуализация результатов запроса в Студии данных

9. Материализация данных Web Vitals

Запускайте регулярные задания материализации

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

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

Навигация по панели управления

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

Дальнейшее чтение

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

`entries` CLS

`entries` LCP

`entries` ИЯФ