Looker Studio で CrUX ダッシュボードを作成する方法

Looker Studio(旧データポータル)は、Chrome UX レポート(CrUX)などのビッグデータソース上にダッシュボードを構築できる強力なデータ可視化ツールです。このガイドでは、独自のカスタム CrUX ダッシュボードを作成して、オリジンのユーザー エクスペリエンスの傾向を追跡する方法について説明します。

さまざまな月の積み上げ棒グラフが変化している CrUX ダッシュボードのスクリーンショット。
CrUX ダッシュボード

CrUX ダッシュボードは、Looker Studio の機能であるコミュニティ コネクタを使用して作成されています。このコネクタは、BigQuery の元の CrUX データと Looker Studio の可視化の間に事前に確立されたリンクです。ダッシュボードのユーザーがクエリを記述したりグラフを生成したりする必要がなくなります。すべてが自動的に構築されます。オリジンを指定するだけで、カスタム ダッシュボードが生成されます。

デフォルトの CrUX ダッシュボード

CrUX にはデフォルトのダッシュボードがあり、CrUX チームによって管理されています。新しい指標(INP など)がチームによって追加され、次回ダッシュボードを読み込むときに使用できるようになります。

カスタム ダッシュボードを作成する

ダッシュボードをカスタマイズしたい場合は、デフォルト ダッシュボードのコピーを作成して、必要に応じて変更できます。

カスタム ダッシュボードを作成するには、g.co/chromeuxdash にアクセスしてください。CrUX コミュニティ コネクタのページが表示されます。ここで、ダッシュボードの生成元を指定できます。なお、初めて使用する場合は、権限またはマーケティング設定の確認を求めるメッセージへの入力が必要になる場合があります。

元の URL を入力するフィールドと、レポートでそのフィールドを変更できるチェックボックスが表示されている CrUX ダッシュボード コネクタ設定画面のスクリーンショット。
CrUX ダッシュボード コネクタ

テキスト入力フィールドには、オリジンのみを指定できます。URL 全体は指定できません。例:

送信元(サポート対象)
https://developer.chrome.com
URL(サポート対象外)
https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

プロトコルを省略すると、HTTPS であると見なされます。サブドメインは重要です。たとえば、https://developers.google.comhttps://www.google.com は異なるオリジンとみなされます。

オリジンに関する一般的な問題には、間違ったプロトコル(https:// ではなく http:// など)の指定や、必要に応じてサブドメインを省略することが含まれます。一部のウェブサイトにはリダイレクトが含まれているため、http://example.com から https://www.example.com にリダイレクトする場合は、後者を使用する必要があります。後者が使用され、オリジンの正規バージョンとなります。原則として、ユーザーがアドレスバーに表示されるオリジンを使用します。

このチェックボックスをオンにすると、オリジンがダッシュボードの URL に含まれます。これにより、この URL パラメータを変更することで、同じダッシュボードを異なるオリジンで使用できるようになります。このチェックボックスをオンにすることをおすすめします。

[接続] ボタンをクリックします。チェックボックスをオンにした場合は、確認を求められます。

オリジンが CrUX データセットに含まれていない場合は、次の図に示すようなエラー メッセージが表示されることがあります。データセットには 1, 500 万を超えるオリジンが含まれていますが、目的のオリジンに十分なデータが含まれていない場合があります。

「このデータセットには 1,500 万以上のオリジンがありますが、https://doesnotexist.origin はその中にはありません」と表示されるポップアップ エラー メッセージのスクリーンショット オリジンが存在しない場合の CrUX コミュニティ コネクタのエラー メッセージ

オリジンが存在する場合は、ダッシュボードのスキーマページに移動します。ここに、含まれるすべてのフィールドが表示されます。有効な接続タイプ、フォーム ファクタ、データセットのリリース月、各指標のパフォーマンスの分布、そしてもちろんオリジンの名前です。このページで行う操作や変更は特にありません。[レポートを作成] をクリックして続行してください。

CrUX ダッシュボードのスキーマ エディタのスクリーンショット。さまざまなフィールド、型、集計、説明が表示され、変更や新しいフィールドの追加が可能です。
CrUX ダッシュボード スキーマ

ダッシュボードを使用する

各ダッシュボードには、次の 3 種類のページがあります。

  1. Core Web Vitals の概要
  2. 指標のパフォーマンス
  3. ユーザー層

各ページには、利用可能な月次リリースごとの分布を時間の経過とともに示すグラフが含まれています。新しいデータセットがリリースされたら、ダッシュボードを更新して最新のデータを確認できます。

月次データセットは、毎月第 2 火曜日にリリースされます。たとえば、5 月のユーザー エクスペリエンス データを含むデータセットは、6 月の第 2 火曜日にリリースされます。

Core Web Vitals の概要

最初のページには、オリジンの月ごとのCore Web Vitals のパフォーマンスの概要が表示されます。以下は、Google が重視することを推奨する最も重要な UX 指標です。

LCP、INP、CLS の指標情報を示す CrUX ダッシュボードの Core Web Vitals の概要のスクリーンショット。
CrUX ダッシュボードの Core Web Vitals の概要

ウェブに関する主な指標ページでは、パソコンとスマートフォンのユーザーがオリジンをどのように使用しているかを確認できます。デフォルトでは、ダッシュボードの作成時に最新の月が選択されます。過去または最新の月次リリースを切り替えるには、ページ上部の [] フィルタを使用します。

デフォルトでは、タブレットはグラフに表示されませんが、必要に応じて棒グラフの構成で [No Tablet] フィルタを削除できます。

Looker Studio でフィルタ オプションを編集しているスクリーンショット。
CrUX ダッシュボードを編集して、Core Web Vitals のページにタブレットを表示させる

指標のパフォーマンス

Core Web Vitals ページの後に、CrUX データセットのすべての指標に関するスタンドアロン ページが表示されます。

さまざまな月間の変化を示すさまざまな積み上げ棒グラフが表示された CrUX ダッシュボードの LCP ページのスクリーンショット。
CrUX ダッシュボードの LCP ページ

各ページの上部には [デバイス] フィルタがあります。このフィルタを使用すると、エクスペリエンス データに含まれるフォーム ファクタを制限できます。たとえば、スマートフォンの使用状況に絞ってドリルダウンできます。この設定はどのページでも維持されます。

これらのページの主なビジュアリゼーションは、「良好」、「改善が必要」、「低速」に分類されたエクスペリエンスの月別分布です。グラフの下にある色分けされた凡例は、そのカテゴリに含まれるエクスペリエンスの範囲を示します。たとえば、上のスクリーンショットでは、Largest Contentful Paint(LCP)の「良好」なエクスペリエンスの割合が変動しており、ここ数か月で若干悪化していることがわかります。

グラフの上部には、直近の月の「良い」と「悪い」の割合と、前月との差異率が表示されます。このオリジンでは、「良好」な LCP 体験は前月比で 3.2% 減の 56.04% となっています。

また、LCP などの Core Web Vitals などの指標で、明示的なパーセンタイル推奨値が提供されている場合は、「良好」と「低い」の割合の間に「P75」の指標が表示されます。この値は、オリジンのユーザー エクスペリエンスの 75 パーセンタイルに対応しています。つまり、エクスペリエンスの 75% がこの値より優れているということです。なお、これはオリジンのすべてのデバイス全体に適用されます。[デバイス] フィルタで特定のデバイスを切り替えても、パーセンタイル値は再計算されません。

パーセンタイルに関する技術的な注意事項

パーセンタイル指標は BigQuery のヒストグラム データに基づいているため、粒度は粗くなります(LCP は 100 ミリ秒、INP は 25 ミリ秒、CLS は 0.05)。つまり、LCP の P75 が 3,800 ミリ秒の場合、真の 75 パーセンタイル値は 3,800 ~ 3,900 ミリ秒の間にあることを示します。

また、BigQuery データセットでは「ビン分散」という手法が使用されています。この手法では、ユーザー エクスペリエンスの密度が、きめが粗いビンにグループ化されます。これにより、精度が 4 桁を超えることなく、分布の最後に分単位の密度を含めることができます。たとえば、3 秒未満の LCP 値は、200 ミリ秒幅のビンにグループ化されます。3 ~ 10 秒の間、ビンの幅は 500 ミリ秒です。10 秒を超えると、ビンの幅は 5, 000 ms になります。ビンの幅が異なるのではなく、ビンの分散により、すべてのビンの幅が一定の 100 ミリ秒(最大公約数)になり、各ビン間で分布が線形補間されます。

PageSpeed Insights などのツールの対応する P75 値は、一般公開の BigQuery データセットに基づいておらず、ミリ秒の精度の値を提供できます。

ユーザー層

ユーザー属性ページには、デバイスと有効な接続タイプ(ECT)の 2 つのディメンションがあります。これらのページには、各ユーザー属性のユーザーにおける、すべてのオリジンにわたるページビューの分布が表示されます。

[デバイスの分布] ページには、スマートフォン、パソコン、タブレットのユーザーの内訳が期間別に表示されます。多くのオリジンではタブレット データがほとんどないかまったくないため、グラフの端に「0%」が表示されることがよくあります。

CrUX ダッシュボードのデバイスページのスクリーンショット。デバイスの内訳の月ごとの変化が示されています。
CrUX ダッシュボードのデバイス ページ

同様に、ECT 分布ページには、4G、3G、2G、低速 2G、オフラインのエクスペリエンスの内訳が表示されます。

これらのディメンションの分布は、First Contentful Paint(FCP)ヒストグラム データのセグメントを使用して計算されます。

よくある質問

Looker Studio で CrUX ダッシュボードを作成する際のよくある質問をいくつかご紹介します。

他のツールではなく CrUX ダッシュボードを使用するのはどのような場合ですか?

CrUX ダッシュボードは、BigQuery で利用可能な基盤となるデータに基づいていますが、データを抽出するために SQL を 1 行も記述する必要はなく、無料の割り当てを超える心配もありません。ダッシュボードの設定は、基盤となるデータをクエリするよりも迅速かつ簡単です。すべてのビジュアリゼーションが自動的に生成され、任意のユーザーと共有できます。

CrUX ダッシュボードの使用に制限はありますか?

BigQuery をベースとしているため、CrUX ダッシュボードは BigQuery の制限もすべて引き継いでいます。データは、月単位の粒度でオリジンレベルに限定されます。

また、CrUX ダッシュボードでは、シンプルさと利便性を重視して、BigQuery の元データの汎用性を一部犠牲にしています。たとえば、指標の分布は、完全なヒストグラムではなく、「良好」、「改善が必要」、「悪い」のいずれかのみが表示されます。CrUX ダッシュボードでもグローバル レベルのデータを確認できますが、BigQuery データセットでは特定の国を拡大して確認できます。

Looker Studio の詳細はどこで確認できますか?

詳しくは、Looker Studio の機能ページをご覧ください。