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

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

Thông tin về lớp học lập trình này

subjectLần cập nhật gần đây nhất: thg 7 29, 2024
account_circleTác giả: Tony Conway

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 Chỉ số quan trọng chính của trang web trong BigQuery.
  • Tạo một trang tổng quan trong Google Data Studio để trực quan hoá dữ liệu Core Web Vitals.

Bạn cần có

  • 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 trình duyệt web dựa trên Chromium, hãy xem phần Hỗ trợ trình duyệt.)
  • Một trình chỉnh sửa 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 nào đó để lưu trữ các trang thử nghiệm của bạn để xem cách thư viện web-vitals hoạt động. (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ữ trang thử nghiệm trên GitHub.)
  • Trang web công khai nơi bạn có thể triển khai mã phân tích của mình. (Việc đưa mã vào thực tế giúp cho các ví dụ về BigQuery và Data Studio ở cuối Lớp học lập trình này trở nên dễ hiểu hơn.)
  • Có kiến thức về HTML, CSS, JavaScript và Công cụ của Chrome cho nhà phát triển.

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 rằng bạn có thể bắt đầu phân tích hiệu suất ngay khi mã đi vào hoạt động.

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

Bây giờ, 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.

  1. Mở một mẫu trang mà bạn muốn thêm thư viện web-vitals. Đối với 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>
  1. Dán mã nguồn vào tệp trống trong trình chỉnh sửa văn bản.
  2. Lưu tệp trên thiết bị dưới dạng basic.html.
  3. 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

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

Mã kết quả sẽ có dạng như sau.

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>
  1. Lưu tệp.

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

3. Đo lường Chỉ số quan trọng chính của trang web

Các chỉ số quan trọng về trang web là thước đo trải nghiệm thực của người dùng, được ghi lại qua Chrome hoặc thư viện web-vitals trên trình duyệt Chromium. Khi phát hành web-vitals sang phiên bản phát hành công khai, bạn sẽ thấy rất nhiều kết quả dựa trên tốc độ kết nối, công suất của thiết bị và cách chúng 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 khi có kết nối chậm.

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

1d60156133044215.pngS

  1. Hãy nhấp vào tab Bảng điều khiển > Chế độ cài đặt trên Play Console b5c716ebfacfd86.png .

a310e2b6e03891a1.png

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

cdfbcd3315aa45cd.png

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

b1fab3d167d032f0.png

  1. Nhấp vào thẻ Bảng điều khiển.
  2. Nhấp vào vị trí bất kỳ trên trang web để buộc in chỉ số về Nội dung lớn nhất hiển thị (LCP).
  3. Nhấp vào biểu tượng Tải lại trang này acaaa8c0fdd33b1.png để buộc in các chỉ số về Điểm số tổng hợp về mức thay đổi bố cục (CLS) và Hoạt động tương tác đến sự kiện hiển thị tiếp theo (INP) để in.

e18b530e48108a4.png

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

e5d5ca555ded9f7a.png

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

e8bde4594a01021b.png

Vậy là xong! Bạn đã đo lường Chỉ số quan trọng chính của trang web.

4. Khám phá chi tiết hơn về dữ liệu web-vitals

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

CLS (Mức thay đổi bố cục tích luỹ) entries

Mở rộng thuộc tính entries của đối tượng do onCLS() ghi lại sẽ cho bạn thấy danh sách các mục nhập của 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ể sử dụng để xem những phần tử nào đã được dịch chuyển.

355f0ff58e735079.pngS

Trong ví dụ này có 2 lần thay đổi bố cục, cả 2 đều di chuyển một phần tử h1 trên trang. Thuộc tính currentRect cho chúng ta biết phần tử hiện đang ở đâu, còn phần tử previousRect cho biết vị trí trước đó.

LCP entries

Việc mở rộng thuộc tính mục của đối tượng do 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.

737ebf826005dbe7.pngs

Trong ví dụ này, mảng entries chứa danh sách tất cả các đề xuất LCP theo thứ tự thời gian. Trong trường hợp này, phần tử h1 được kết xuất trước tiên, 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 mở rộng thuộc tính entries của đối tượng do onINP(), ghi lại, bạn sẽ thấy một mảng chứa mục nhập PerformanceEventTiming dành cho hoạt động tương tác với thao tác vẽ tiếp theo trên trang.

a63ef33575c3218d.png

Thuộc tính name cho bạn biết hoạt động đầu vào nào của người dùng đã kích hoạt bộ tính giờ để kiểm tra khả năng sử dụng luồng chính. valueweb-vitals báo cáo là độ trễ do thuộc tính duration của mục nhập PerformanceEventTiming báo cáo, đượ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 web-quan trọng đến Google Analytics 4

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

Xây dựng 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 được 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 thông số từ sự kiện web-vitals rồi chuyển các thông 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 này bằng 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! Bạn hiện đang gửi web-vitals sự kiện đến Google Analytics.

6. Kiểm tra để đảm bảo dữ liệu web-quan trọng được điền vào Google Analytics

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

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

ab1bf51ba70f3609.png

  1. Chọn Thời gian thực.

65a5b8087b09b2a.png.

  1. Hãy 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 sự kiện INP.
  2. 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.

f92b276df1c2f6ce.png

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

8529bd743f121dd9.pngS

  1. Hãy nhấp vào các khóa thông số đó để xem bản tóm tắt các giá trị mà Google Analytics đã nhận được.

f0cf6a3dd607d533.png

Bạn nê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 trên trang khác có liên quan đến INP (được 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().

Khi bạn đã hài lòng với dữ liệu đến từ các trang thử nghiệm của mình, hãy triển khai mã GA mới để sản xuất 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 của bạn đã 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 sang BigQuery.

  1. 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.
  2. Từ trình đơn điều hướng 3cbb0e5fcc230aef.png. ở trên cùng bên trái màn hình, hãy nhấp vào BigQuery bên dưới tiêu đề Analytics.
  3. Trong ngăn Explorer, hãy mở rộng dự án để xem tập dữ liệu Google Analytics của bạn. Tên của tập dữ liệu là analytics_, theo sau là mã tài sản Google Analytics 4 (ví dụ: analytics_229787100).
  4. Mở rộng tập dữ liệu và bạn sẽ thấy một bảng events_. Số trong ngoặc đơn là số ngày có sẵn để truy vấn.

Truy vấn 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 của chúng tôi, hãy bắt đầu bằng một truy vấn con chọn các sự kiện LCP, CLS và INP trong 28 ngày qua. Thao tác này cụ thể tì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 rằng bạn không đếm 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
)

Điều này tạo thành cơ sở cho tất cả các truy vấn của bạn dựa trên 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 các sự kiện trong GA4

Mỗi dữ liệu sự kiện Google Analytics 4 được lưu giữ trong STRUCT cột event_params. Mỗi thông số sự kiện mà bạn truyền đến GA4 trên trang web của mình đều được biểu thị bằng khoá và giá trị là một STRUCT kèm theo khoá cho mỗi loại 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() sẽ được sử dụng. Để xem debug_target mà bạn đã vượt qua 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 các 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 có liên quan nhất đến giá trị chỉ số.

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

Sau đây là danh sách các trang danh sách cụm từ tìm kiếm từ kém nhất đến tốt nhất theo CLS (Mức thay đổi bố cục tích luỹ) ở 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

1bbbd957b4292ced.pngs

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

Hãy lưu ý rằng các phần tử được báo cáo ở đây có thể không giống với các phần tử mà bạn thấy thay đổi khi gỡ lỗi cục bộ các trang của mình, đó là lý do tại sao việc thu thập dữ liệu này ngay từ đầu lại quan trọng. Rất khó để khắc phục những điều mà bạn không nhận ra là có 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 (Mức thay đổi bố cục tích luỹ), nhưng bạn cũng có thể sử dụng chính kỹ thuật đó để 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 giúp bạn nhanh chóng trình bày trực quan mọi kết quả truy vấn thông qua Data Studio. Data Studio là một công cụ tạo hình ảnh và trang tổng quan về dữ liệu mà bạn có thể sử dụng miễn phí. Để hình ảnh 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á lựa chọn Data Studio trong BigQuery

Thao tác này sẽ tạo mối liên kết trực tiếp từ BigQuery với Data Studio ở chế độ xem khám phá. Trong chế độ xem này, bạn có thể chọn những trường mà bạn muốn minh hoạ, chọn loại biểu đồ, thiết lập bộ lọc và tạo biểu đồ đặc biệt để phân tích nhanh trực quan. 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ề giá trị LCP hằng ngày trong Data Studio

Với mối liên kết trực tiếp giữa BigQuery và Data Studio, bạn có thể tạo biểu đồ nhanh bằng bất kỳ truy vấn nào và phân tích hình ảnh. Tuy nhiên, nếu muốn phân tích thêm, bạn có thể xem một số biểu đồ trong một trang tổng quan có tính tương tác để có thông tin toàn diện hơn hoặc xem chi tiết về dữ liệu. Khi có một trang tổng quan tiện lợi, bạn sẽ không 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 chỉ số.

Bạn có thể tạo trang tổng quan trong Data Studio bằng cách sử dụ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 nguồn dữ liệu mới, chọn trình kết nối BigQuery rồi 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 của BigQuery trong Data Studio

9. Hiện thực hoá dữ liệu Chỉ số quan trọng của trang web

Khi tạo trang tổng quan về dữ liệu sự kiện Chỉ số quan trọng của trang web như mô tả ở trên, việc sử dụng trực tiếp tập dữ liệu xuất của Google Analytics 4 sẽ không hiệu quả. Do cấu trúc của dữ liệu GA4 và quy trình xử lý trước cần thiết đối với các chỉ số Chỉ số quan trọng về trang web, 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 tạo ra hai vấn đề: hiệu suất của trang tổng quan và chi phí BigQuery.

Bạn có thể sử dụng miễn phí chế độ hộp cát BigQuery. Với cấp 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 là miễn 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ừ khi 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 nhiều tập dữ liệu, bạn sẽ có thể duy trì giới hạn miễn phí này mỗi tháng. Nhưng nếu trang web của bạn 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 trang tổng quan tương tác nhanh, bạn nên xử lý trước và cụ thể hoá dữ liệu chỉ số quan trọng về trang web trong khi vẫn tận dụng được 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 của bạn (bảng nguồn) và tạo một bảng cụ thể (bảng mục tiêu).

# 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 làm phẳng và dễ truy vấn hơn.
  • Chế độ này chỉ giữ lại các sự kiện Chỉ số quan trọng của trang web từ 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ó sẵn ngay trong các cột.
  • Bảng được phân vùng theo ngày và nhóm theo tên chỉ số. Điều 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 phải 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 Công cụ BigQuery BI, 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 từ trong giao diện người dùng BigQuery hoặc sử dụng bảng đó trong Data Studio bằng trình kết nối BigQuery.

Chạy các công việc cụ thể hoá thông thường

Nếu bạn chạy truy vấn ở trên mà không có phạm vi ngày, truy vấn sẽ chạy trên toàn bộ tập dữ liệu Google Analytics của bạn. Bạn muốn tránh làm việc này mỗi ngày, vì bạn 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 của mình để chỉ nối dữ liệu của ngày gần nhất bằng cách xoá câu lệnh CREATE or REPLACE TABLE ở đầu truy vấn và thêm tiêu chí bổ sung vào mệnh đề WHERE trong truy vấn con so 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ừ hôm qua. Sau đó, bạn có thể sử dụng Bảng điều khiển BigQuery để lập lịch chạy truy vấn của mình hằng ngày.

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

Google Data Studio vốn hỗ trợ việc đọc dữ liệu từ Google BigQuery. Giờ đây, khi đã có dữ liệu web-vitals từ Google Analytics 4 đang điề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 cụ thể hoá của mình.

Sử dụng Trình kết nối Chỉ số quan trọng của trang web

Vì việc tạo một trang tổng quan từ đầu sẽ tốn thời gian, nên chúng tôi đã phát triển một giải pháp theo gói giúp 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 Các chỉ số quan trọng về trang web bằng cách sử dụ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 Trình kết nối Chỉ số quan trọng của trang web

Cung cấp mã bảng BigQuery được cụ thể hoá (tức là bảng mục tiêu) 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 theo mẫu rồi 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 phải truy cập lại vào liên kết trình kết nối trừ khi bạn muốn tạo nhiều trang tổng quan từ các tập dữ liệu khác nhau.

Khi thao tác trên trang tổng quan, bạn có thể mở thẻ Tóm tắt để xem xu hướng hằng ngày của các chỉ số Các chỉ số quan trọng về trang web, cũng như một số thông tin về mức sử dụng trang web (như người dùng và phiên).

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

Thẻ Phân tích đường dẫn 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 cũng sẽ thấy biểu đồ tán xạ của tất cả đường dẫn trang với giá trị phân vị trên trục y và số lượng bản ghi trên trục x. Bản đồ tán xạ 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 trang, bạn có thể xem chi tiết hơn về 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 các chỉ số kinh doanh và hiệu suất của mình ở cùng một nơi. Phần này thể hiện 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

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 của Chỉ số quan trọng chính của trang web trên trang web của mình ở mức độ chi tiết cao. Bạn cũng có thể xác định những loại trang và phần tử cụ thể trên trang web của mình đang gây ra chi phí mỗi lượt cài đặt (CWV) cao để tập trung 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. Hãy bắt đầu từ các bài viết về cách tối ưu hoá cho từng chỉ số:

Tài liệu tham khảo