このページは Cloud Translation API によって翻訳されました。

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

Rick Viscomi

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

月ごとに変化するさまざまな積み上げ棒グラフを示す CrUX ダッシュボードのスクリーンショット。 — CrUX ダッシュボード

CrUX ダッシュボードには、コミュニティコネクタと呼ばれる Looker Studio の機能が含まれています。このコネクタは、BigQuery の CrUX 元データと Looker Studio のビジュアリゼーションの間に事前に確立されたリンクです。これにより、ダッシュボードのユーザーがクエリを作成したり、グラフを生成したりする必要がなくなります。すべてがユーザーのために構築されています。必要なのは、送信元を指定することだけです。カスタムダッシュボードが生成されます。

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

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

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

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

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

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

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

送信元（サポート対象）

https://developer.chrome.com

URL（サポート対象外）

https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

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

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

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

[接続] ボタンをクリックします。チェックボックスをオンにすると、この確認を求めるメッセージが表示されます。

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

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

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

CrUX ダッシュボードのスキーマエディタのスクリーンショット。さまざまなフィールド、タイプ、集計、説明が表示され、それらを変更したり新しいフィールドを追加したりできます。 — CrUX ダッシュボードスキーマ

ダッシュボードの使用

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

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

各ページには、利用可能な月次リリースの時系列分布を示すグラフが表示されます。新しいデータセットがリリースされたら、ダッシュボードを更新して最新のデータを取得できます。

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

Core Web Vitals の概要

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

Core Web Vitals のページを使用すると、パソコンとスマートフォンのユーザーがオリジンをどのように体験できるかを把握できます。デフォルトでは、ダッシュボードを作成した直近の月が選択されます。過去の月次リリースと新しい月次リリースを切り替えるには、ページ上部の [月] フィルタを使用します。

デフォルトでは、これらのグラフにはタブレットは省略されていますが、必要に応じて棒グラフの設定で [タブレットなし] フィルタを削除できます。

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

指標のパフォーマンス

Core Web Vitals ページには、CrUX データセットのすべてのmetricsをまとめたスタンドアロンページが表示されます。

月ごとに変化するさまざまな積み上げ棒グラフを示す 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 ミリ秒）。言い換えれば、P75 LCP が 3800ms の場合、真の 75 パーセンタイルが 3800ms と 3900ms の間にあることを示しています。

さらに、BigQuery データセットは「ビンスプレッディング」と呼ばれる手法を使用します。この手法では、ユーザーエクスペリエンスの密度が本質的に、粒度の低い非常に粗いビンにグループ化されます。これにより、4 桁の精度を超えることなく、分布の最後に微小な密度を含めることができます。たとえば、3 秒未満の LCP 値は幅 200 ミリ秒のビンにグループ化されます。3 ～ 10 秒の場合、ビンの幅は 500 ミリ秒です。10 秒を超えると、ビンの幅は 5, 000 ミリ秒になります。ビンの分散では、幅の異なるビンを使用するのではなく、すべてのビンの幅を 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 ダッシュボードの使用に制限はありますか？

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

また、CrUX ダッシュボードでは、BigQuery 上の元データの汎用性の一部が引き換えに、シンプルさと利便性が確保されています。たとえば指標の分布は、完全なヒストグラムではなく、「良好」、「改善が必要」、「不良」としてのみ提供されます。CrUX ダッシュボードでもグローバルレベルのデータが提供され、BigQuery データセットでは特定の国にズームインできます。

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

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