Đo lường hiệu suất bằng web-vitals.js, Google Analytics và BigQuery

1. Trước khi bắt đầu

Bạn sẽ thực hiện

Trong lớp học lập trình này, bạn sẽ:

Liên kết tài sản Google Analytics 4 với BigQuery.
Thêm thư viện web-vitals vào một trang web.
Chuẩn bị và gửi dữ liệu web-vitals đến Google Analytics.
Truy vấn dữ liệu về Core Web Vitals trong BigQuery.
Tạo trang tổng quan trong Google Data Studio để trực quan hoá dữ liệu Core Web Vitals.

Bạn cần có

Một tài khoản Google Analytics có tài sản GA4.
Tài khoản Google Cloud.
Một trình duyệt web dựa trên Chromium, chẳng hạn như Google Chrome hoặc Microsoft Edge. (Để biết thêm thông tin về lý do bạn cần một trình duyệt web dựa trên Chromium, hãy xem phần Hỗ trợ trình duyệt.)
Trình soạn thảo văn bản mà bạn chọn, chẳng hạn như Sublime Text hoặc Visual Studio Code.
Một nơi để lưu trữ các trang kiểm thử nhằm xem cách hoạt động của thư viện web-vitals. (Bạn có thể sử dụng máy chủ cục bộ để phân phối các trang web tĩnh hoặc lưu trữ các trang kiểm thử trên GitHub.)
Một trang web công khai nơi bạn có thể triển khai mã phân tích. Việc đưa mã của bạn vào giai đoạn phát hành công khai sẽ giúp bạn hiểu rõ hơn về các ví dụ BigQuery và Data Studio ở cuối Lớp học lập trình này.
Có kiến thức về HTML, CSS, JavaScript và Chrome DevTools.

Trước khi bạn bắt đầu

Trước tiên, hãy liên kết Google Analytics 4 với BigQuery để đảm bảo bạn có thể bắt đầu phân tích hiệu suất ngay khi mã của bạn hoạt động.

Hãy làm theo các bước trong Trung tâm trợ giúp của Google Analytics để liên kết tài sản GA4 với BigQuery.

Giờ đây, tài sản Google Analytics của bạn đã sẵn sàng xuất dữ liệu sự kiện sang BigQuery, hãy tích hợp thư viện web-vitals trên trang web của bạn.

2. Thêm thư viện web-vitals và gtag vào một trang web

Trước tiên, hãy thêm thư viện web-vitals vào một trang web.

Mở một mẫu trang mà bạn muốn thêm thư viện web-vitals. Trong ví dụ này, chúng ta sẽ sử dụng một trang đơn giản:

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>

Dán mã nguồn vào một tệp trống trong trình chỉnh sửa văn bản.
Lưu tệp trên thiết bị dưới dạng basic.html.
Sao chép tập lệnh mô-đun này rồi dán ngay trước thẻ đóng </body>. Tập lệnh này tải thư viện web-vitals từ một mạng phân phối nội dung.

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 {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>

Lưu tệp.

Bạn đã thêm thư viện web-vitals vào trang web.

3. Đo lường Core Web Vitals của trang web

Core Web Vitals là một chỉ số đo lường trải nghiệm của người dùng thực, được ghi lại thông qua Chrome hoặc thư viện web-vitals trên các trình trình duyệt Chromium. Khi phát hành web-vitals cho phiên bản phát hành công khai, bạn sẽ thấy nhiều kết quả dựa trên tốc độ kết nối, hiệu suất thiết bị của người dùng và cách họ tương tác với trang web của bạn. Để minh hoạ các chức năng của thư viện web-vitals, chúng ta sẽ mô phỏng trải nghiệm người dùng với một kết nối chậm.

Mở tệp đã lưu trong trình duyệt web.
Nhấp chuột phải vào trang web.
Nhấp vào Kiểm tra để mở Công cụ cho nhà phát triển Chrome.

Nhấp vào thẻ Bảng điều khiển > Cài đặt bảng điều khiển .

Chọn hộp đánh dấu Lưu giữ nhật ký để nhật ký vẫn tồn tại khi bạn làm mới trang web.

Nhấp vào thẻ Mạng > Trực tuyến > 3G chậm để mô phỏng kết nối mạng chậm.

Nhấp vào thẻ Bảng điều khiển.
Nhấp vào vị trí bất kỳ trên trang web để buộc chỉ số Nội dung lớn nhất hiển thị (LCP) in.
Nhấp vào Tải lại trang này để buộc các chỉ số Mức thay đổi bố cục tích luỹ (CLS) và Lượt tương tác đến nội dung hiển thị tiếp theo (INP) phải in.

Nhấp vào thẻ Mạng > Trực tuyến > 3G nhanh để mô phỏng một kết nối mạng nhanh.
Nhấp vào thẻ Bảng điều khiển.
Nhấp vào vị trí bất kỳ trên trang web để buộc chỉ số LCP in lại.

Nhấp vào biểu tượng Tải lại trang này để buộc các chỉ số CLS và INP in lại.

Vậy là xong! Bạn đã đo lường Core Web Vitals của trang web.

4. Khám phá dữ liệu về chỉ số quan trọng của trang web một cách chi tiết hơn

Đối với mỗi sự kiện Core Web Vitals mà bạn đang đo lường, có rất nhiều thông tin trong dữ liệu được trả về mà bạn có thể dùng để gỡ lỗi các điểm nghẽn về hiệu suất. Mỗi sự kiện web-vitals đều chứa một mảng entries, trong đó có thông tin về những sự kiện đóng góp vào giá trị chỉ số hiện tại.

CLS `entries`

Việc mở rộng thuộc tính entries của đối tượng được onCLS() ghi lại sẽ cho bạn thấy danh sách các mục LayoutShift. Mỗi LayoutShift chứa một thuộc tính value phản ánh điểm số thay đổi bố cục và một mảng sources mà chúng ta có thể dùng để xem những phần tử nào đã bị thay đổi.

Trong ví dụ này, đã xảy ra 2 lần thay đổi bố cục, cả hai lần đều di chuyển một phần tử h1 trên trang. Thuộc tính currentRect cho biết vị trí hiện tại của phần tử và phần tử previousRect cho biết vị trí trước đó của phần tử.

LCP `entries`

Việc mở rộng thuộc tính entries của đối tượng được onLCP() ghi lại cho chúng ta biết những phần tử nào là ứng cử viên cho Nội dung lớn nhất hiển thị trước khi giá trị cuối cùng được báo cáo.

Trong ví dụ này, mảng entries chứa danh sách tất cả các LCP đề xuất theo thứ tự thời gian. Trong trường hợp này, phần tử h1 được kết xuất trước, sau đó là phần tử img. img là Nội dung lớn nhất hiển thị. Phần tử LCP được báo cáo luôn là mục cuối cùng trong mảng.

INP `entries`

Khi bạn mở rộng thuộc tính entries của đối tượng được onINP(), ghi lại, đối tượng này sẽ cho thấy một mảng chứa mục PerformanceEventTiming cho hoạt động tương tác với lần hiển thị tiếp theo trên trang.

Thuộc tính name cho biết loại hoạt động đầu vào của người dùng đã kích hoạt bộ tính giờ để có sẵn luồng chính. value mà web-vitals báo cáo là độ trễ được đưa ra dưới dạng thuộc tính duration của mục PerformanceEventTiming, được chuyển đổi từ micrô giây sang mili giây. Trong trường hợp này, INP đo được là 48 mili giây.

5. Chuẩn bị và gửi dữ liệu về các chỉ số quan trọng trên trang web đến Google Analytics 4

Trước khi bạn có thể gửi dữ liệu web-vitals đến Google Analytics 4, dữ liệu đó cần được chuyển đổi sang định dạng mà GA4 có thể nhận được.

Cấu trúc thông tin gỡ lỗi cho từng CWV

Bước cuối cùng trước khi gửi mã này đến Google Analytics là cấu trúc thông tin từ các mục nhập, bao gồm cả thông tin do các hàm trên trả về.

diagnostics.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)
    });
  }

Gửi dữ liệu đến Google Analytics

Cuối cùng, hãy tạo một hàm lấy các tham số từ sự kiện web-vitals và truyền các tham số đó đến Google Analytics.

diagnostics.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)
  });
}

Đăng ký hàm với từng hàm web-vitals. Hàm này sẽ kích hoạt khi trình duyệt sẵn sàng đo lường từng sự kiện:

diagnostics.html

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

Chính xác! Giờ đây, bạn đang gửi các sự kiện web-vitals đến Google Analytics.

6. Kiểm tra để đảm bảo dữ liệu web-vitals được điền sẵn trong Google Analytics

Để đảm bảo rằng tài sản Google Analytics 4 của bạn ghi lại các sự kiện:

Mở tài sản Google Analytics 4 rồi chuyển đến mục Báo cáo.

Chọn Thời gian thực.

Làm mới trang thử nghiệm của bạn vài lần và nhớ nhấp vào trang giữa các lần làm mới để kích hoạt các sự kiện INP.
Tìm mục Số lượng sự kiện theo Tên sự kiện trong giao diện người dùng Tổng quan theo thời gian thực. Bạn sẽ thấy các sự kiện LCP, INP và CLS.

Nhấp vào tên của một sự kiện bất kỳ để xem các thông số được truyền cùng với những sự kiện đó.

Nhấp vào các khoá tham số đó để xem bản tóm tắt các giá trị mà Google Analytics nhận được.

Bạn có thể muốn thêm dữ liệu khác vào thông tin gỡ lỗi, chẳng hạn như tên mẫu trang hoặc các sự kiện trang khác có liên quan đến INP mà chúng ta đã thảo luận trước đó trong Lớp học lập trình này. Chỉ cần sửa đổi các câu lệnh return trong hàm getDebugInfo().

Sau khi bạn hài lòng với dữ liệu đến từ các trang thử nghiệm, hãy triển khai mã GA mới cho phiên bản phát hành công khai trên trang web của bạn và chuyển sang bước tiếp theo.

7. Truy vấn dữ liệu của bạn trong BigQuery

Sau khi mã Google Analytics hoạt động được vài ngày, bạn có thể bắt đầu truy vấn dữ liệu trong BigQuery. Trước tiên, hãy kiểm tra để đảm bảo dữ liệu đang được chuyển đến BigQuery.

Mở Google Cloud Console rồi chọn dự án của bạn trong trình đơn thả xuống ở đầu màn hình.
Trong trình đơn điều hướng ở trên cùng bên trái màn hình, hãy nhấp vào BigQuery trong tiêu đề Số liệu phân tích.
Trong ngăn Explorer (Trình khám phá), hãy mở rộng dự án để xem tập dữ liệu Google Analytics. Tên của tập dữ liệu là analytics_, theo sau là mã nhận dạng tài sản Google Analytics 4 của bạn (ví dụ: analytics_229787100).
Mở rộng tập dữ liệu và bạn sẽ thấy một bảng events_. Số trong dấu ngoặc đơn là số ngày có thể truy vấn.

Câu lệnh con để chỉ chọn các sự kiện CWV

Để truy vấn một tập dữ liệu chỉ bao gồm các sự kiện CWV, hãy bắt đầu bằng một truy vấn phụ chọn 28 ngày cuối cùng của các sự kiện LCP, CLS và INP. Thao tác này đặc biệt tìm kiếm giá trị được báo cáo gần đây nhất cho mỗi mã sự kiện web-vitals bằng cách sử dụng khoá metric_id để đảm bảo bạn không tính cùng một sự kiện CWV nhiều lần.

# 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
)

Đây là cơ sở cho tất cả các truy vấn của bạn đối với tập dữ liệu này. Truy vấn chính của bạn sẽ chạy dựa trên bảng tạm thời web_vitals_events.

Cách cấu trúc sự kiện GA4

Mỗi dữ liệu sự kiện Google Analytics 4 được lưu trữ trong cột STRUCT event_params. Mỗi tham số sự kiện mà bạn truyền đến GA4 trên trang web của mình được biểu thị bằng khoá và giá trị là một STRUCT có khoá cho từng kiểu dữ liệu có thể có. Trong ví dụ trên, khoá metric_value có thể có int_value hoặc double_value, vì vậy, hàm COALESCE() được dùng. Để lấy debug_target mà bạn đã truyền trước đó, hãy chọn khoá string_value trong debug_target.

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

Tìm những trang và phần tử hoạt động kém hiệu quả nhất

debug_target là một chuỗi bộ chọn CSS tương ứng với phần tử trên trang phù hợp nhất với giá trị chỉ số.

Với CLS, debug_target đại diện cho phần tử lớn nhất trong lần thay đổi bố cục lớn nhất đã đóng góp vào giá trị CLS. Nếu không có phần tử nào được chuyển, thì giá trị debug_target sẽ là null.

Sau đây là danh sách các trang truy vấn từ tệ nhất đến tốt nhất theo CLS ở phân vị thứ 75, được nhóm theo 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

Nếu bạn biết những phần tử nào trên trang đang bị thay đổi, thì bạn sẽ dễ dàng xác định và khắc phục nguyên nhân gốc rễ của vấn đề hơn nhiều.

Xin lưu ý rằng các phần tử được báo cáo ở đây có thể không phải là các phần tử mà bạn thấy thay đổi khi gỡ lỗi trang cục bộ. Đó là lý do tại sao việc thu thập dữ liệu này ngay từ đầu lại quan trọng đến vậy. Rất khó để khắc phục những điều mà bạn không nhận ra là vấn đề!

Gỡ lỗi các chỉ số khác

Truy vấn ở trên cho thấy kết quả của chỉ số CLS, nhưng bạn có thể sử dụng chính xác kỹ thuật này để báo cáo về các mục tiêu gỡ lỗi cho LCP và INP. Bạn chỉ cần thay thế mệnh đề WHERE bằng chỉ số có liên quan để gỡ lỗi:

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

8. Trực quan hoá kết quả truy vấn trong Data Studio

BigQuery cung cấp một cách nhanh chóng để trực quan hoá mọi kết quả truy vấn thông qua Data Studio. Data Studio là một công cụ trực quan hoá dữ liệu và tạo trang tổng quan miễn phí. Để trực quan hoá kết quả truy vấn sau khi chạy truy vấn trong giao diện người dùng BigQuery, hãy nhấp vào Khám phá dữ liệu rồi chọn Khám phá bằng Data Studio.

Khám phá bằng lựa chọn Data Studio trong BigQuery

Thao tác này sẽ tạo một mối liên kết trực tiếp từ BigQuery vào Data Studio ở chế độ xem khám phá. Trong chế độ xem này, bạn có thể chọn các trường mà bạn muốn trực quan hoá, chọn loại biểu đồ, thiết lập bộ lọc và tạo biểu đồ tuỳ ý để phân tích nhanh bằng hình ảnh. Từ kết quả truy vấn ở trên, bạn có thể tạo biểu đồ dạng đường này để xem xu hướng của các giá trị LCP theo thời gian:

Biểu đồ dạng đường về các giá trị LCP hằng ngày trong Data Studio

Với mối liên kết trực tiếp này giữa BigQuery và Data Studio, bạn có thể tạo biểu đồ nhanh từ mọi truy vấn và tiến hành phân tích trực quan. Tuy nhiên, nếu muốn phân tích thêm, bạn có thể xem một số biểu đồ trong trang tổng quan tương tác để có cái nhìn tổng thể hơn hoặc có thể xem chi tiết dữ liệu. Khi có một trang tổng quan tiện dụng, bạn không cần phải viết truy vấn và tạo biểu đồ theo cách thủ công mỗi khi muốn phân tích các chỉ số.

Bạn có thể tạo trang tổng quan trong Data Studio bằng trình kết nối BigQuery gốc. Để thực hiện việc này, hãy truy cập vào datastudio.google.com, tạo một nguồn dữ liệu mới, chọn trình kết nối BigQuery và chọn tập dữ liệu mà bạn muốn sử dụng:

Sử dụng trình kết nối gốc BigQuery trong Data Studio

9. Hiện thực hoá dữ liệu về Web Vitals

Khi tạo trang tổng quan về dữ liệu sự kiện Web Vitals như mô tả ở trên, bạn không nên sử dụng trực tiếp tập dữ liệu xuất của Google Analytics 4. Do cấu trúc của dữ liệu GA4 và quá trình xử lý trước cần thiết cho các chỉ số Web Vitals, nên một số phần trong truy vấn của bạn sẽ chạy nhiều lần. Điều này gây ra hai vấn đề: hiệu suất trang tổng quan và chi phí BigQuery.

Bạn có thể sử dụng chế độ hộp cát của BigQuery miễn phí. Với bậc sử dụng miễn phí của BigQuery, 1 TB dữ liệu truy vấn đầu tiên được xử lý mỗi tháng sẽ không mất phí. Đối với các phương pháp phân tích được thảo luận trong bài đăng này, trừ phi bạn đang sử dụng một tập dữ liệu lớn đáng kể hoặc thường xuyên truy vấn tập dữ liệu, nếu không thì bạn có thể duy trì trong hạn mức miễn phí này mỗi tháng. Tuy nhiên, nếu có một trang web có lưu lượng truy cập cao và muốn thường xuyên theo dõi các chỉ số khác nhau bằng một trang tổng quan tương tác nhanh, bạn nên tiền xử lý và hiện thực hoá dữ liệu chỉ số quan trọng của trang web trong khi tận dụng các tính năng hiệu quả của BigQuery như phân vùng, phân cụm và lưu vào bộ nhớ đệm.

Tập lệnh sau đây sẽ xử lý trước dữ liệu BigQuery (bảng nguồn) và tạo một bảng cụ thể hoá (bảng đích).

# 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');

Tập dữ liệu cụ thể hoá này có một số ưu điểm:

Cấu trúc dữ liệu được đơn giản hoá và dễ truy vấn hơn.
Nó chỉ giữ lại các sự kiện Web Vitals trong tập dữ liệu GA4 ban đầu.
Mã phiên, loại người dùng (mới so với cũ) và thông tin về mức độ tương tác trong phiên có ngay trong các cột.
Bảng được phân vùng theo ngày và phân cụm theo tên chỉ số. Thao tác này thường làm giảm lượng dữ liệu được xử lý cho mỗi truy vấn.
Vì bạn không cần sử dụng ký tự đại diện để truy vấn bảng này, nên kết quả truy vấn có thể được lưu vào bộ nhớ đệm trong tối đa 24 giờ. Điều này giúp giảm chi phí do lặp lại cùng một truy vấn.
Nếu sử dụng BigQuery BI Engine, bạn có thể chạy các hàm và toán tử SQL được tối ưu hoá trên bảng này.

Bạn có thể truy vấn trực tiếp bảng được cụ thể hoá này trong giao diện người dùng BigQuery hoặc sử dụng bảng này trong Data Studio bằng trình kết nối BigQuery.

Chạy các công việc hiện thực hoá thường xuyên

Nếu bạn chạy truy vấn ở trên mà không có phạm vi ngày, thì truy vấn đó sẽ chạy trên toàn bộ tập dữ liệu Google Analytics của bạn. Bạn nên tránh thực hiện việc này hằng ngày, vì bạn sẽ xử lý lại một lượng lớn dữ liệu trong quá khứ. Bạn có thể cập nhật truy vấn để chỉ thêm dữ liệu của ngày hôm qua bằng cách xoá câu lệnh CREATE or REPLACE TABLE ở đầu truy vấn và thêm một tiêu chí khác vào mệnh đề WHERE trong truy vấn phụ đối với bảng 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)

Truy vấn này chỉ trả về dữ liệu từ ngày hôm qua. Sau đó, bạn có thể sử dụng Bảng điều khiển BigQuery để lên lịch chạy truy vấn hằng ngày.

10. Trực quan hoá dữ liệu trong Google Data Studio

Google Data Studio hỗ trợ đọc dữ liệu từ Google BigQuery một cách tự nhiên. Giờ đây, khi đã có dữ liệu web-vitals từ Google Analytics 4 được điền sẵn trong BigQuery, bạn có thể sử dụng trình kết nối BigQuery của Data Studio để đọc trực tiếp bảng đã cụ thể hoá.

Sử dụng Trình kết nối Web Vitals

Vì việc tạo trang tổng quan từ đầu tốn nhiều thời gian, nên chúng tôi đã phát triển một giải pháp đóng gói để tạo trang tổng quan mẫu cho bạn. Trước tiên, hãy đảm bảo rằng bạn đã cụ thể hoá bảng Web Vitals bằng truy vấn ở trên. Sau đó, hãy truy cập vào trình kết nối Web Vitals cho Data Studio bằng đường liên kết này: goo.gle/web-vitals-connector

Sau khi uỷ quyền một lần, bạn sẽ thấy màn hình cấu hình sau:

Màn hình uỷ quyền Web Vitals Connector

Cung cấp mã bảng BigQuery được cụ thể hoá (tức là bảng đích) và mã dự án thanh toán BigQuery của bạn. Sau khi bạn nhấp vào KẾT NỐI, Data Studio sẽ tạo một trang tổng quan mới dựa trên mẫu và liên kết dữ liệu của bạn với trang tổng quan đó. Bạn có thể chỉnh sửa, sửa đổi và chia sẻ trang tổng quan theo ý muốn. Nếu tạo trang tổng quan một lần, bạn không cần truy cập lại vào đường liên kết của trình kết nối, trừ phi bạn muốn tạo nhiều trang tổng quan từ các tập dữ liệu khác nhau.

Thao tác trên trang tổng quan

Khi di chuyển trên trang tổng quan, bạn có thể xem xu hướng hằng ngày của các chỉ số Web Vitals và một số thông tin sử dụng cho trang web của mình, chẳng hạn như người dùng và phiên, trong thẻ Tóm tắt.

Trong thẻ Phân tích người dùng, bạn có thể chọn một chỉ số và xem thông tin chi tiết về phân vị của chỉ số, cũng như số lượng người dùng, theo nhiều chỉ số về mức sử dụng và chỉ số kinh doanh.

Thẻ Phân tích đường dẫn của trang giúp bạn xác định các khu vực có vấn đề trên trang web của mình. Tại đây, bạn có thể chọn một chỉ số để xem thông tin tổng quan, nhưng bạn cũng sẽ thấy bản đồ phân tán của tất cả các đường dẫn trang với giá trị phần trăm trên trục y và số lượng bản ghi trên trục x. Bản đồ phân tán có thể giúp xác định những trang có giá trị chỉ số thấp hơn dự kiến. Sau khi chọn các trang, bạn có thể xem chi tiết hơn về khu vực có vấn đề bằng biểu đồ tán xạ của bảng Đường dẫn trang hoặc bằng cách xem bảng Mục tiêu gỡ lỗi.

Thẻ Phân tích doanh thu là một ví dụ về cách bạn có thể theo dõi doanh nghiệp và các chỉ số hiệu suất ở cùng một nơi. Phần này vẽ biểu đồ cho tất cả các phiên mà người dùng đã mua hàng. Bạn có thể so sánh doanh thu kiếm được với trải nghiệm người dùng trong một phiên cụ thể.

11. Tài nguyên khác

Chúc mừng bạn đã hoàn thành Lớp học lập trình này! Giờ đây, bạn có thể theo dõi hiệu suất Core Web Vitals trên toàn bộ trang web của mình với mức độ chi tiết cao. Bạn cũng có thể xác định các loại trang và phần tử cụ thể trên trang web đang gây ra CWV cao để có thể tập trung vào việc tối ưu hoá.

Tài liệu đọc thêm

web.dev có nhiều bài viết và nghiên cứu điển hình về các chiến lược cải thiện Core Web Vitals. Bắt đầu bằng cách tối ưu hoá các bài viết cho từng chỉ số:

Tài liệu tham khảo

Lớp học lập trình này tham khảo rất nhiều từ 2 bài viết trên web.dev:
Bài viết về cách đo lường Web Vitals trong thực tế.
Bài viết về cách sử dụng dữ liệu GA4 trong Web Vitals trong BigQuery, trong đó có nhiều ví dụ khác về truy vấn mà bạn có thể sử dụng.
Nếu bạn cần thêm thông tin về mối tích hợp GA4 > BigQuery Export, vui lòng xem Trung tâm trợ giúp của Google Analytics.

Đo lường hiệu suất bằng web-vitals.js, Google Analytics và BigQuery

1. Trước khi bắt đầu

Bạn sẽ thực hiện

Bạn cần có

Trước khi bạn bắt đầu

2. Thêm thư viện web-vitals và gtag vào một trang web

basic.html

basic.html

basic.html

3. Đo lường Core Web Vitals của trang web

4. Khám phá dữ liệu về chỉ số quan trọng của trang web một cách chi tiết hơn

CLS entries

LCP entries

INP entries

5. Chuẩn bị và gửi dữ liệu về các chỉ số quan trọng trên trang web đến Google Analytics 4

Cấu trúc thông tin gỡ lỗi cho từng CWV

diagnostics.html

Gửi dữ liệu đến Google Analytics

diagnostics.html

diagnostics.html

6. Kiểm tra để đảm bảo dữ liệu web-vitals được điền sẵn trong Google Analytics

7. Truy vấn dữ liệu của bạn trong BigQuery

Câu lệnh con để chỉ chọn các sự kiện CWV

Cách cấu trúc sự kiện GA4

Tìm những trang và phần tử hoạt động kém hiệu quả nhất

Gỡ lỗi các chỉ số khác

8. Trực quan hoá kết quả truy vấn trong Data Studio

9. Hiện thực hoá dữ liệu về Web Vitals

Chạy các công việc hiện thực hoá thường xuyên

10. Trực quan hoá dữ liệu trong Google Data Studio

Sử dụng Trình kết nối Web Vitals

Thao tác trên trang tổng quan

11. Tài nguyên khác

Tài liệu đọc thêm

Tài liệu tham khảo

CLS `entries`

LCP `entries`

INP `entries`