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

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

<ph type="x-smartling-placeholder">
</ph> さまざまな月の積み上げ棒グラフが変化している CrUX ダッシュボードのスクリーンショット。
CrUX ダッシュボード

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

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

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

<ph type="x-smartling-placeholder">

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

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

<ph type="x-smartling-placeholder">

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

<ph type="x-smartling-placeholder">
</ph> 元の 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 万を超えるオリジンがありますが、目的のオリジンには十分なデータがない可能性があります。

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

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

<ph type="x-smartling-placeholder">
</ph> さまざまなフィールド、タイプ、集計方法、説明が表示され、変更や新しいフィールドの追加が可能な CrUX ダッシュボード スキーマ エディタのスクリーンショット。
CrUX ダッシュボード スキーマ

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

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

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

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

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

Core Web Vitals の概要

最初のページには、送信元の Core Web Vitals の月間パフォーマンスの概要が表示されます。これらは、Google が重視することをおすすめする最も重要な UX 指標です。

<ph type="x-smartling-placeholder">
</ph> LCP、INP、CLS の指標情報を示す CrUX ダッシュボードの Core Web Vitals の概要のスクリーンショット。
CrUX ダッシュボードの Core Web Vitals の概要

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

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

<ph type="x-smartling-placeholder">
</ph> Looker Studio でフィルタ オプションを編集しているスクリーンショット。
CrUX ダッシュボードを編集して [Core Web Vitals] ページにタブレットを表示

指標のパフォーマンス

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

<ph type="x-smartling-placeholder">
</ph> さまざまな月の変化を示すさまざまな積み上げ棒グラフが表示されている CrUX Dashboard LCP ページのスクリーンショット
CrUX ダッシュボードの LCP ページ

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

これらのページで主に可視化されるのは、エクスペリエンスの月ごとの分布で、「良好」、「改善が必要」、「要改善」に分類されています。チャートの下の色分けされた凡例は、そのカテゴリに含まれるエクスペリエンスの範囲を示します。たとえば、前のスクリーンショットでは、「良好」とLargest Contentful Paint(LCP)の状況は変動しており、ここ数か月で多少悪化しています。

直近月の「良好」の割合「いまいち」体験がグラフの上に表示され、前月との差の割合を示すインジケーターが表示されます。このオリジンでは「good」、LCP エクスペリエンスは前月比 3.2% 減の 56.04% でした。

また、明確なパーセンタイルの推奨事項を提供する LCP やその他の Core Web Vitals のような指標には、「P75」が表示されます。「良好」と「いまいち」できます。この値は、オリジンのユーザー エクスペリエンスの 75 パーセンタイルに対応します。つまり、エクスペリエンスの 75% がこの値より優れているということです。注意点として、これは配信元のすべてのデバイスにわたる全体的な分布に当てはまります。[デバイス] フィルタで特定のデバイスを切り替えても、パーセンタイルは再計算されません。

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

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

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

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

ユーザー層

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

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

<ph type="x-smartling-placeholder">
</ph> 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 の機能に関するページをご覧ください。