如何在 Looker Studio 中建立 CrUX 資訊主頁

Looker Studio (舊稱「數據分析」) 是一項強大的資料視覺化工具,可讓您根據大數據來源 (例如 Chrome 使用者體驗報告 (CrUX)) 建立資訊主頁。本指南將說明如何建立自訂 CrUX 資訊主頁,追蹤來源的使用者體驗趨勢。

CrUX 資訊主頁的螢幕截圖,顯示在不同月份變化的堆疊長條圖。
CrUX 資訊主頁

CrUX 資訊主頁是以名為社群連接器的 Looker Studio 功能建構而成。這個連接器是預先建立的連結,連結 BigQuery 中的原始 CrUX 資料與 Looker Studio 圖表。讓資訊主頁的使用者不必撰寫查詢或產生任何圖表。所有功能一應俱全您只需提供來源,系統就會自動產生自訂資訊主頁。

預設的 CrUX 資訊主頁

CrUX 有由 CrUX 團隊維護的預設資訊主頁。團隊會新增新指標 (例如 INP),並在下次載入資訊主頁時提供使用。

建立自訂資訊主頁

有些使用者會想自訂資訊主頁,在這種情況下,您可以建立自己的預設資訊主頁副本,並視需要變更。

如要建立自訂資訊主頁,請前往 g.co/chromeuxdash。系統會將您導向 CrUX 社群連接器頁面,您可以在這裡指定所產生的資訊主頁來源。請注意,初次使用者可能需要完成權限或行銷偏好提示。

CrUX 資訊主頁連接器設定畫面的螢幕截圖,其中有用來輸入來源網址的欄位,以及用來在報表中修改該欄位的核取方塊。
CrUX 資訊主頁連接器

文字輸入欄位只接受來源,不接受完整網址。例如:

來源 (支援)
https://developer.chrome.com
網址 (不支援)
https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

如果您省略通訊協定,系統會預設採用 HTTPS。子網域 (例如 https://developers.google.comhttps://www.google.com) 會視為不同的來源。

來源常見的一些問題是提供錯誤的通訊協定,例如 http:// 而非 https://,並視需要省略子網域。部分網站包含重新導向,因此如果 http://example.com 重新導向至 https://www.example.com,建議您使用後者,也就是來源的標準版本。原則上,應使用使用者在網址列中看到的來源。

勾選核取方塊後,資訊主頁網址就會包含來源網址,日後只要變更這個網址參數,即可針對不同的來源使用同一個資訊主頁。

按一下「Connect」按鈕。如果您勾選了核取方塊,系統會要求您確認。

如果來源未包含在 CrUX 資料集內,可能會收到錯誤訊息,如下圖所示。資料集中有超過 1, 500 萬個來源,但您想要納入的資料可能不足

彈出式錯誤訊息的螢幕截圖,當中顯示「這個資料集中有超過 1,500 萬個起點,但 https://doesnotexist.origin 並非其中之一
發生來源不存在時 CrUX 社群連接器錯誤訊息

如果來源已存在,系統會將您導向資訊主頁的結構定義頁面。這裡會顯示包含的所有欄位,包括各個有效連線類型、每種板型規格、資料集發布的月份、各項指標的成效分佈情形,以及來源名稱。您不需要採取任何行動或變更頁面上的報表,只要按一下 [建立報表] 即可繼續。

CrUX 資訊主頁結構定義編輯器的螢幕截圖,當中含有各種欄位、類型、匯總和說明,且可變更設定或新增欄位。
CrUX 資訊主頁結構定義

使用資訊主頁

每個資訊主頁都包含三種頁面:

  1. Core Web Vitals 總覽
  2. 指標成效
  3. 使用者客層

每個頁面都含有一張圖表,顯示各個每月發行版本的變化情形。當新資料集發布時,您可以重新整理資訊主頁來取得最新資料。

每月資料集會在每月的第二個星期二發布。例如,包含 5 月使用者體驗資料的資料集會在 6 月的第二個星期二發布。

Core Web Vitals 總覽

第一頁會顯示來源的每月 Core Web Vitals 成效總覽。這些是 Google 建議您著重的重要使用者體驗指標。

CrUX 資訊主頁 Core Web Vitals 總覽的螢幕截圖,當中顯示 LCP、INP 和 CLS 指標資訊。
CrUX 資訊主頁 Core Web Vitals 總覽

使用 Core Web Vitals 頁面,即可瞭解電腦和手機使用者對於來源的體驗。根據預設,系統會選取您建立資訊主頁的最近一個月。如要變更月費或較新的每月版本,請使用頁面頂端的「月」篩選器。

請注意,這些圖表會依預設忽略平板電腦,但如有需要,您可以移除長條圖設定中的「No Tablet」篩選器:

Looker Studio 中編輯篩選器選項的螢幕截圖。
編輯 CrUX 資訊主頁,在 Core Web Vitals 頁面顯示平板電腦

指標成效

「Core Web Vitals」頁面結束後,您會看到 CrUX 資料集內所有指標的獨立網頁。

CrUX 資訊主頁 LCP 頁面的螢幕截圖,顯示不同月份中的各種堆疊長條圖。
CrUX 資訊主頁 LCP 頁面

每個頁面頂端都有「裝置」篩選器,可用來限制體驗資料中包含的板型規格。舉例來說,你可以進一步細查手機體驗。這項設定會套用至所有頁面。

這些網頁上的主要視覺呈現是分類為「良好」、「需要改善」和「不佳」的體驗項目的每月分佈情形。圖表下方以不同顏色標示的圖例,代表該類別所提供的體驗範圍。舉例來說,在前一個螢幕截圖中,您可以看到「良好」的百分比Largest Contentful Paint (LCP) 在過去幾個月出現波動變化,並變得稍微惡化。

最近一個月的「良好」百分比以及「不佳」圖表上方會顯示體驗,以及與前一個月相比的百分比差異指標。因此,這個來源為「good」LCP 指標的月減下降了 3.2% 至 56.04%。

此外,如果 LCP 等指標和其他提供明確百分位數建議的指標,都會顯示「P75」「良好」以及「不佳」百分比。這個值代表來源的使用者體驗第 75 個百分位數。換句話說,有 75% 的經驗值比這個值更棒。但請注意,這適用於來源上所有裝置的整體分佈情形。使用「裝置」篩選器切換特定裝置將不會重新計算百分位數。

與百分位數相關的技術注意事項

請注意,百分位數指標是根據 BigQuery 的直方圖資料計算而得,精細程度為約略值:LCP 為 100 毫秒、INP 為 25 毫秒,CLS 為 0.05。也就是說,P75 LCP 為 3800 毫秒,代表真實的第 75 個百分位數介於 3800 毫秒到 3900 毫秒之間。

此外,BigQuery 資料集使用「特徵分配」技巧。其中,使用者體驗的密度會依照精細程度,分為相當粗略的分塊。如此一來,在分佈的末端可以納入分鐘密度,而精確的精確度之下就不會超過 4 位數。舉例來說,系統會將小於 3 秒的 LCP 值分為寬度為 200 毫秒的特徵分塊。特徵分塊介於 3 到 10 秒之間,寬度為 500 毫秒。超過 10 秒,特徵分塊寬度為 5000 毫秒...與其使用各種寬度的特徵分塊,分塊可以確保所有特徵分塊的寬度都是 100 毫秒 (最大公因數),而且每個特徵分塊的分佈都是線性內插。

PageSpeed Insights 等工具中對應的 P75 值,並非以公開的 BigQuery 資料集為基礎,因此能夠提供毫秒精確度的值。

使用者客層

使用者客層頁面內含兩種維度:裝置和有效的連線類型 (ECT)。這些網頁說明各客層內使用者在整個來源中的網頁瀏覽次數分佈情形。

裝置分佈頁面會顯示手機、電腦和平板電腦使用者長期以來的詳細資料。許多來源通常都幾乎沒有平板電腦資料,所以您看到的往往是「0%」在圖表邊緣懸浮微粒

CrUX 資訊主頁裝置頁面的螢幕截圖,顯示裝置細分資料的月份變化。
CrUX 資訊主頁裝置頁面

同樣地,ECT 發行頁面也會細分 4G、3G、2G、2G 緩慢和離線體驗,

這些維度的分佈狀況是以 First Contentful Paint (FCP) 直方圖資料。

常見問題

以下是在 Looker Studio 中建構 CrUX 資訊主頁的常見問題:

什麼時候會用到 CrUX 資訊主頁,而非其他工具?

CrUX 資訊主頁會採用 BigQuery 提供的相同基礎資料,不過您不必編寫一行 SQL 即可擷取資料,也不必擔心超出免費配額。與查看查詢基礎資料相比,設定資訊主頁能更輕鬆快速,且系統會為您產生所有圖表,您也可以控管與任何想要共用的使用者共用資料。

使用 CrUX 資訊主頁是否有任何限制?

以 BigQuery 為基礎,Chrome 使用者體驗資訊主頁也會沿用所有限制。而且僅支援每月層級的資料。

CrUX 資訊主頁也簡化了 BigQuery 原始資料的多項用途,既簡單又方便。舉例來說,指標分佈只會呈現「良好」、「需要改善」和「不佳」,而不是完整的直方圖。CrUX 資訊主頁提供的是全球層級資料,BigQuery 資料集則可讓您放大特定國家/地區。

可以在哪裡進一步瞭解 Looker Studio?

詳情請參閱 Looker Studio 功能頁面