使用 web-vitals.js、Google Analytics（分析）和 BigQuery 衡量效果

1. 准备工作

实践内容

在此 Codelab 中，您将要：

  • 将您的 Google Analytics（分析）4 媒体资源关联到 BigQuery。
  • 将 web-vitals 库添加到网页中。
  • 准备 web-vitals 数据并将其发送到 Google Analytics（分析）。
  • 在 BigQuery 中查询核心网页指标数据。
  • 在 Google 数据洞察中构建一个信息中心来直观呈现您的核心网页指标数据。

所需条件

  • 拥有 Google Analytics（分析）帐号并且该帐号包含 GA4 媒体资源。
  • 拥有 Google Cloud 帐号。
  • 拥有基于 Chromium 的网络浏览器，例如 Google Chrome 或 Microsoft Edge（如需详细了解为何需要使用基于 Chromium 的网络浏览器，请参阅浏览器支持）。
  • 选择一个文本编辑器，例如 Sublime Text 或 Visual Studio Code。
  • 确定一个托管测试页面的位置，以便查看 web-vitals 库的运行情况。（您可以使用本地服务器提供静态网页，或在 GitHub 上托管测试页面。）
  • 确定一个可部署分析代码的公共网站。（将您的代码发布到生产环境后，此 Codelab 末尾的 BigQuery 和数据洞察示例将更易于理解。）
  • 了解 HTML、CSS、JavaScript 和 Chrome 开发者工具。

准备工作

首先，将 Google Analytics（分析）4 关联到 BigQuery，确保您可以在代码发布后立即开始分析效果。

按照 Google Analytics（分析）帮助中心列出的步骤将您的 GA4 媒体资源关联到 BigQuery。

现在，您的 Google Analytics（分析）媒体资源已可以将事件数据导出到 BigQuery 了，请在您的网站上集成 web-vitals 库。

2. 将 web-vitals 库和 gtag 添加到网页中

首先，将 web-vitals 库添加到网页中。

  1. 打开要在其中添加 web-vitals 库的网页模板。在本示例中，我们将使用一个简单的页面：

basic.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>
  1. 在文本编辑器中将源代码粘贴到空白文件。
  2. 在本地将该文件另存为 basic.html。
  3. 复制此模块脚本，并将其粘贴到 </body> 结束标记之前（紧贴此标记粘贴）。此脚本会从内容分发网络加载 web-vitals 库。

basic.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

最终代码应如下所示。

basic.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 {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>
  1. 保存文件。

您已将 web-vitals 库添加到网页中。

3.衡量网页的核心网页指标

核心网页指标用于衡量真实用户体验，此类指标通过 Chrome 或 Chromium 浏览器中的 web-vitals 库获取。将 web-vitals 发布到生产环境后，您可以基于用户的连接速度、设备电耗以及他们与您网站的互动方式看到各种结果。为了演示 web-vitals 库的功能，我们将模拟连接速度较慢时的用户体验。

  1. 在网络浏览器中打开已保存的文件。
  2. 右键点击相关网页。
  3. 点击检查以打开 Google Chrome 开发者工具。

1d60156133044215.png

  1. 依次点击控制台标签页 > 控制台设置 b5c716ebfacfd86.png。

a310e2b6e03891a1.png

  1. 选中保留日志复选框，即可在您刷新网页时保留日志。

cdfbcd3315aa45cd.png

  1. 依次点击网络标签页 > 在线 > 低速 3G，以模拟慢速网络连接。

b1fab3d167d032f0.png

  1. 点击控制台标签页。
  2. 点击网页上的任意位置以强制输出 Largest Contentful Paint (LCP) 和 First Input Delay (FID) 指标。
  3. 点击重新加载此页图标 acaaa8c0fdd33b1.png，以强制输出 Cumulative Layout Shift (CLS) 指标。

e18b530e48108a4.png

  1. 依次点击网络标签页 > 在线 > 高速 3G，以模拟快速网络连接。
  2. 点击控制台标签页。
  3. 点击网页上的任意位置，再次强制输出 LCP 和 FID 指标。

e5d5ca555ded9f7a.png

  1. 点击“重新加载此页”图标 acaaa8c0fdd33b1.png，再次强制输出 CLS 指标。

e8bde4594a01021b.png

大功告成！您已衡量了该网页的核心网页指标。

4.查看更加详细的网页指标数据

对于要衡量的每个核心网页指标事件，所返回的数据中都包含大量信息，您可以使用这些信息来调试性能瓶颈。每个 web-vitals 事件都包含一个 entries 数组，其中的信息解释了哪些事件促成了当前的指标值。

CLS entries

展开 getCLS() 所记录对象的 entries 属性会显示 LayoutShift 条目列表。每个 LayoutShift 都包含一个反映布局偏移得分的 value 属性，以及一个可反映哪些元素已偏移的 sources 数组。

355f0ff58e735079.png

此示例中发生了两次布局偏移，都是在页面上移动了 h1 元素。currentRect 属性指示元素的当前位置，previousRect 元素指示元素之前的位置。

LCP entries

展开 getLCP() 所记录对象的条目属性会显示在报告最终值之前，Largest Contentful Paint 曾有过哪些候选元素。

737ebf826005dbe7.png

在此示例中，entries 数组包含一个按时间顺序排序的所有 LCP 候选项的列表。根据该顺利将依次渲染 h1 元素和 img 元素。img 是 Largest Contentful Paint。报告的 LCP 元素始终是数组中的最后一项。

FID entries

当您展开 getFID(), 所记录对象的 entries 属性时，它会显示一个数组，其中包含页面上的首次用户输入的 PerformanceEventTiming 条目。

a63ef33575c3218d.png

name 属性表明了是哪种类型的用户输入触发了主线程可用性计时器。web-vitals 报告的 value 是 PerformanceEventTiming 条目的 startTime 和 processingStart 属性之间的延迟时间（从微秒转换为毫秒）。在此例中，测量到的 FID 为 2 毫秒。

5. 准备网页指标数据并将其发送到 Google Analytics（分析）4

您需要先将 web-vitals 数据转换为 Google Analytics（分析）4 可以接收的格式，然后才能将其发送到 Google Analytics（分析）4。您还需要添加一些实用性函数来提取有价值的诊断信息。

生成选择器以帮助识别条目目标节点

首先，在脚本块中添加一个函数，用于生成类似于 CSS 选择器格式的字符串来表示节点及其在 DOM 中的位置。此函数的输出结果有助于确定是页面的哪些元素导致产生了相应的 CWV 值。

diagnostics.html

function getSelector(node, maxLen = 100) {
 let sel = '';
 try {
   while (node && node.nodeType !== 9) {
     const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + (
       (node.className && node.className.length) ?
       '.' + Array.from(node.classList.values()).join('.') : '');
     if (sel.length + part.length > maxLen - 1) return sel || part;
     sel = sel ? part + '>' + sel : part;
     if (node.id) break;
     node = node.parentNode;
   }
 } catch (err) {
   // Do nothing...
 }
 return sel;
}

检索 LayoutShift 信息

记录发生的每次布局偏移可能会产生大量数据。以下函数仅关注最大的 LayoutShift 条目以及其中最大的 LayoutShiftSource。这样一来，您就可以专注于优化对网站上的布局偏移影响最大的因素。当您确定布局偏移的原因并设法尽可能消除这些因素后，报告中的布局偏移来源会发生变化并显示新的影响最大的因素。

diagnostics.html

function getLargestLayoutShiftEntry(entries) {
 return entries.reduce((a, b) => a && a.value > b.value ? a : b);
}

function getLargestLayoutShiftSource(sources) {
 return sources.reduce((a, b) => {
   return a.node && a.previousRect.width * a.previousRect.height >
       b.previousRect.width * b.previousRect.height ? a : b;
 });
}
  • getLargestLayoutShiftEntry() 仅返回页面浏览生命周期中最大的布局偏移条目。
  • getLargestLayoutShiftSource() 仅返回该条目中最大的布局偏移来源。

确定 FID 是发生在 DOMContentLoaded 之前还是之后

DOMContentLoaded 事件发生在页面 HTML 完全加载并解析之后，包括等待加载所有同步、延迟或模块脚本（包括所有静态导入的模块）。如果首次用户输入发生在 DOMContentLoaded 之前，此函数返回 true；如果首次用户输入发生在 DOMContentLoaded 之后，此函数返回 false。

diagnostics.html

function wasFIDBeforeDCL(fidEntry) {
 const navEntry = performance.getEntriesByType('navigation')[0];
 return navEntry && fidEntry.startTime < navEntry.domContentLoadedEventStart;
}

识别 FID 目标元素

另一个可能有用的调试信号是用户与之互动过的元素。尽管与元素本身的互动不会影响 FID（请注意，FID 只是事件总延迟时间中的一部分），但了解用户与哪些元素进行了互动可能有助于确定如何最有效地改善 FID。

如需获取与首次输入事件相关联的元素，请引用 first-input 条目的 target 属性：

diagnostics.html

function getFIDDebugTarget(entries) {
  return entries[0].target;
}

识别 FID 输入事件类型

捕获哪种事件类型触发了 FID 衡量也有助于识别用户与页面的互动情况。

diagnostics.html

function getFIDEventType(entries) {
  return entries[0].name;
}

为每个 CWV 构造调试信息

在将此代码发送到 Google Analytics（分析）之前，最后一步是构造条目中的信息，包括上述函数返回的信息。

diagnostics.html

function getDebugInfo(name, entries = []) {
  // 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 (entries.length) {
    if (name === 'LCP') {
      const lastEntry = entries[entries.length - 1];
      return {
        debug_target: getSelector(lastEntry.element),
        event_time: lastEntry.startTime,
      };
    } else if (name === 'FID') {
      const firstEntry = entries[0];
      return {
        debug_target: getSelector(firstEntry.target),
        debug_event: firstEntry.name,
        debug_timing: wasFIDBeforeDCL(firstEntry) ? 'pre_dcl' : 'post_dcl',
        event_time: firstEntry.startTime,
      };
    } else if (name === 'CLS') {
      const largestEntry = getLargestLayoutShiftEntry(entries);
      if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
        const largestSource = getLargestLayoutShiftSource(largestEntry.sources);
        if (largestSource) {
          return {
            debug_target: getSelector(largestSource.node),
            event_time: largestEntry.startTime,
          };
        }
      }
    }
  }
  // Return default/empty params in case there are no entries.
  return {
    debug_target: '(not set)',
  };
}

将数据发送到 Google Analytics（分析）

最后，创建一个函数，用于接受来自 web-vitals 事件的参数并将其传递给 Google Analytics（分析）。

diagnostics.html

function sendToGoogleAnalytics({ name, delta, value, id, entries }) {
  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, entries)
  });
}

向每个 web-vitals 函数注册该函数，该函数会在浏览器准备好衡量每个事件时触发：

diagnostics.html

getLCP(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getCLS(sendToGoogleAnalytics);

太棒了！您正在将 web-vitals 事件发送到 Google Analytics（分析）。

6. 检查 Google Analytics（分析）中是否填充了网页指标数据

要确保 Google Analytics（分析）4 媒体资源记录了您的事件，请执行以下操作：

  1. 打开 Google Analytics（分析）4 媒体资源，然后转到报告。

ab1bf51ba70f3609.png

  1. 选择实时。

65a5b8087b09b2a

  1. 多次刷新测试页面，并确保在两次刷新之间点击页面以触发 FID 事件。
  2. 在“实时概览”界面中查找“按事件名称统计的事件数”部分。您应当会看到 LCP、FID 和 CLS 事件。

f92b276df1c2f6ce.png

  1. 点击任一事件名称即可查看随这些事件传递的参数。

8529bd743f121dd9.png

  1. 点击这些参数键即可查看 Google Analytics（分析）接收的值的概要。

f0cf6a3dd607d533.png

您可能需要向调试信息中添加其他数据，例如页面模板名称或本 Codelab 之前介绍的与 FID 相关的其他页面事件。只需修改 getDebugInfo() 函数中的 return 语句即可。

如果您对来自测试页面的数据感到满意，请将新的 Google Analytics（分析）代码部署到您网站上的生产环境，然后继续执行下一步。

7. 在 BigQuery 中查询您的数据

Google Analytics（分析）代码发布几天后，您就可以开始在 BigQuery 中查询数据了。首先，检查数据是否正在传输至 BigQuery。

  1. 打开 Google Cloud Console，从屏幕顶部的下拉菜单中选择您的项目。
  2. 在屏幕左上方的导航菜单 3cbb0e5fcc230aef.png 中，点击分析标题下的 BigQuery。
  3. 在探索器窗格中，展开您的项目以查看 Google Analytics（分析）数据集。数据集的名称使用 analytics_ 作为前缀，其后紧跟您的 Google Analytics（分析）4 媒体资源 ID（例如，analytics_229787100)。
  4. 展开数据集，您应当会看到一个 events_ 表。括号中的数字表示可供查询的天数。

仅选择 CWV 事件的子查询

如需查询仅包含 CWV 事件的数据集，请先通过一个子查询选择最近 28 天的 LCP、CLS 和 FID 事件。具体来说，这将使用 metric_id 键查找每个 web-vitals 事件 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', 'FID', '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 事件数据都保存在 event_params 列的 STRUCT 中。您网站上传递到 GA4 的每个事件参数都由其键来表示，值为 STRUCT，每一种可能的数据类型都有一个键。在上述示例中，metric_value 键可以具有 int_value 或 double_value，因此使用 COALESCE() 函数。如需获取之前传递的 debug_target，请在 debug_target 中选择 string_value 键。

...
(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。

以下查询根据第 75 百分位的 CLS 按最差到最佳的顺序列出页面，并按 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

1bbbd957b4292ced.png

如果您知道页面上的哪些元素在发生偏移，则应当能够更轻松地识别问题的根本原因并加以解决。

请注意，此处报告的元素与您在本地调试页面时发现产生偏移的元素可能并不相同，因此，请务必从一开始就捕获这些数据。如果未意识到存在问题，就很难解决问题！

调试其他指标

上述查询显示了 CLS 指标的结果，但可使用完全相同的分析法来报告 LCP 和 FID 的调试目标。只需将 WHERE 子句替换为要调试的相关指标：

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

8. 在数据洞察中可视化查询结果

BigQuery 可通过数据洞察快速可视化任何查询结果。数据洞察是一款免费的数据可视化和信息中心工具。如需在 BigQuery 界面中运行查询后可视化查询结果，请点击探索数据，然后选择通过数据洞察探索。

BigQuery 中的“通过数据洞察探索”选项

这将在探索视图中创建从 BigQuery 到数据洞察的直接链接。在此视图中，您可以选择要可视化的字段、选择图表类型、设置过滤条件，还可以创建临时图表来进行快速可视化分析。根据以上查询结果，您可以创建以下折线图来查看 LCP 值在一段时间内的趋势：

数据洞察中的每日 LCP 值折线图

借助 BigQuery 与数据洞察之间的直接链接，您可以基于任意查询创建快速图表，并执行可视化分析。不过，如果您想要执行更多分析，则可能需要在交互式信息中心内查看多个图表，以便于获取更加全面的视图或展开数据细目。借助便捷的信息中心，您在分析指标时不必每次都手动编写查询并生成图表。

您可以使用原生 BigQuery 连接器在数据洞察中创建一个信息中心。为此，请转到 datastudio.google.com，创建一个新的数据源，选择 BigQuery 连接器，然后选择要使用的数据集：

在数据洞察中使用 BigQuery 原生连接器

9. 将网页指标数据具体化

如上所述，创建网页指标事件数据的信息中心时，直接使用 Google Analytics（分析）4 导出数据集的效率并不高。由于 GA4 数据的结构，再加上网页指标需要进行的预处理，查询的一些部分最终会运行多次。这会带来两个问题：信息中心性能和 BigQuery 成本。

您可以免费使用 BigQuery 沙盒模式。借助 BigQuery 的免费用量层级，每月处理的前 1 TB 查询数据是免费的。对于本文中讨论的分析方法，除非您使用非常大的数据集或定期查询大量数据集，否则应当每月都能保持在免费限额以内。但是，如果您的网站流量非常高，并且希望使用快速交互式信息中心定期监视不同的指标，则建议您使用 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', 'FID', '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');

此具体化数据集具有以下多项优势：

  • 采用扁平化数据结构，更易于查询。
  • 仅保留来自原始 GA4 数据集的网页指标事件。
  • 会话 ID、用户类型（新用户与回访用户）和会话互动信息都直接显示在各个列中。
  • 该表按日期分区，并按指标名称聚类。这通常可以减少每个查询的数据处理量。
  • 由于您不需要使用通配符来查询此表，因此查询结果最多可缓存 24 小时。这样可以减少重复执行同一查询的成本。
  • 如果您使用 BigQuery BI Engine，则可以对此表运行优化的 SQL 函数和运算符。

您可以直接在 BigQuery 界面中查询此具体化表，也可以通过 BigQuery 连接器在数据洞察中使用此表。

定期运行具体化作业

如果您在运行上述查询时未指定日期范围，则会对您的整个 Google Analytics（分析）数据集运行查询。这会重新处理大量历史数据，因此您应当避免每天都执行此操作。您可以更新查询，仅附加最后一天的数据，方法是移除查询开头的 CREATE or REPLACE TABLE 语句，然后在针对 events_intraday_ 表的子查询的 WHERE 子句中添加一项额外的条件：

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'FID', '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 数据洞察中可视化数据

Google 数据洞察原生即支持从 Google BigQuery 读取数据。BigQuery 中现已填充了来自 Google Analytics（分析）4 的 web-vitals 数据，接下来可以使用数据洞察 BigQuery 连接器来直接读取具体化表。

使用网页指标连接器

从头开始创建信息中心非常耗时，因此您可以使用我们开发的打包解决方案来创建模板信息中心。首先，确保您已使用上述查询将网页指标表具体化。然后，通过以下链接访问数据洞察的网页指标连接器：goo.gle/web-vitals-connector

提供一次性授权后，您应当会看到以下配置屏幕：

网页指标连接器授权屏幕

提供具体化的 BigQuery 表 ID（即目标表）和您的 BigQuery 结算项目 ID。点击连接后，数据洞察会创建一个新的模板化信息中心，并与您的数据相关联。您可以根据需要编辑、修改和共享信息中心。如果您已创建一次信息中心，则无需再次访问连接器链接，除非您希望通过不同的数据集创建多个信息中心。

浏览信息中心时，您可以在“摘要”标签页中查看网页指标的每日趋势以及您网站的一些使用情况信息，例如用户和会话信息。

在“用户分析”标签页中，您可以选择一项指标，并获取该指标百分位数的细分，以及按不同使用情况和业务指标分类的用户数。

“页面路径分析”标签页可帮助您确定网站上的问题区域。在此标签页中，您可以选择某个指标来查看概览，也可以查看所有网页路径的散点图，其中 y 轴为百分位值，x 轴为记录数。这种散点图有助于识别指标值低于预期的页面。选择页面后，您可以通过“网页路径”表的散点图或者通过查看“调试目标”表来进一步分析问题。

比如说，您可以通过“收入分析”标签页来监视同一位置的业务和效果指标。此部分会显示用户做出购买行为的所有会话。您可以比较特定会话期间的收入与用户体验。

11. 其他资源

恭喜您完成本次 Codelab 课程！现在，您应当能够高度精细化地跟踪整个网站的核心网页指标了。您还应当能够识别网站上的哪些特定页面类型和页面元素产生了较高的核心网页指标值，从而确定优化重点。

深入阅读

web.dev 上提供了丰富的文章和案例研究，包括各种改善核心网页指标的策略。请先阅读优化各项指标的相关文章：

参考文档