Web

Chrome UX Report API を使う手順 (cURL の場合)

投稿日:2021年4月26日 更新日:

1. Chrome UX Report API について

Chrome UX Report  API を使う手順について説明します。

Chrome ブラウザを使って Webサイトにアクセスした際、Chrome は「パフォーマンスに関するいくつかの指標 (Web Vitals)」を計測しています。このデータは Google によって収集され、Chrome UX Report として閲覧することが可能です。更に Chrome UX Report API を使えば、プログラムを使ってこれらの値を取得することができます。本記事では、cURL コマンドを使って Chrome UX Report の値を取得する方法について説明します。

2. API Key を用意する

まず 以下の手順で API Key を用意します。

  1. Google Cloud Platform にアクセスしてプロジェクトを作成する。
  2. 同じく Google Cloud Platform で、[API とサービス] – [ライブラリ] と進み、Chrome UX Report API を [有効] にする。
  3. 同じく Google Cloud Platform で、[API とサービス] – [認証情報] と進み [認証情報を作成] リンクをクリックし、[API キー] を選択する。そのまま進み API キーを作成する。

API キーは、念の為 [APIの制限] で [Chrome UX Report API] に制限しておくと安全です。

API キーを「Chrome UX Report API」に制限する

3. curl コマンドを実行する

3-1. origin data を取得する

ドメインそのものに対するデータ (Origin data) を取得するには、以下のコマンドを実行します。

curl -s --request POST "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key={APIKEY}" \
    --header 'Accept: application/json' \
    --header 'Content-Type: application/json' \
    --data '{"origin":"{ドメイン名}", "formFactor":"PHONE"}'
  • {ドメイン名}のところには、例えば laboradian.com といったドメイン名をセットします。
  • {APIKEY} のところには、先程作成した API Key の文字列をセットします。
  • “formFactor” には、アクセス元となるデバイスの種類をセットします。「DESKTOP」「PHONE」「TABLET」「ALL_FORM_FACTORS」から選びます。

3-2. URL data を取得する

各ページのURLに対するデータ (URL data) を取得するには、以下のコマンドを実行します。

curl -s --request POST "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key={APIKEY}" \
    --header 'Accept: application/json' \
    --header 'Content-Type: application/json' \
    --data '{"url":"{ドメイン名}", "formFactor":"PHONE"}'
  • origin data の場合に “origin” としていたところを “url” に変更しています。
  • {ドメイン名}、{APIKEY}、”formFactor” は、origin data のときと同じです。

3-3. コマンド結果の例

以下は、laboradian.com に対して origin data を取得したときの結果です。コマンドを実行すると JSON形式の文字列になります。

{
  "record": {
    "key": {
      "origin": "https://laboradian.com"
    },
    "metrics": {
      "cumulative_layout_shift": {
        "histogram": [
          {
            "start": "0.00",
            "end": "0.10",
            "density": 0.97639763976397553
          },
          {
            "start": "0.10",
            "end": "0.25",
            "density": 0.010001000100009993
          },
          {
            "start": "0.25",
            "density": 0.01360136013601358
          }
        ],
        "percentiles": {
          "p75": "0.00"
        }
      },
      "first_contentful_paint": {
        "histogram": [
          {
            "start": 0,
            "end": 1000,
            "density": 0.626988096428924
          },
          {
            "start": 1000,
            "end": 3000,
            "density": 0.3434030209062694
          },
          {
            "start": 3000,
            "density": 0.029608882664799503
          }
        ],
        "percentiles": {
          "p75": 1208
        }
      },
      "first_input_delay": {
        "histogram": [
          {
            "start": 0,
            "end": 100,
            "density": 0.98329665933186294
          },
          {
            "start": 100,
            "end": 300,
            "density": 0.011002200440087978
          },
          {
            "start": 300,
            "density": 0.0057011402280455594
          }
        ],
        "percentiles": {
          "p75": 3
        }
      },
      "largest_contentful_paint": {
        "histogram": [
          {
            "start": 0,
            "end": 2500,
            "density": 0.91784248974281524
          },
          {
            "start": 2500,
            "end": 4000,
            "density": 0.052736915841088514
          },
          {
            "start": 4000,
            "density": 0.029420594416091409
          }
        ],
        "percentiles": {
          "p75": 1468
        }
      }
    }
  },
  "urlNormalizationDetails": {
    "originalUrl": "https://laboradian.com/",
    "normalizedUrl": "https://laboradian.com"
  }
}

これらのデータはそれなりのアクセス数のあるページ (URL) でないと作成されません(特に URL data)が、Google は作成される条件について情報を出していません。少しハードルが高目だと思います。データが作成されていない場合は、以下の結果が返ってきます。

{ 
  "error": { 
    "code": 404, 
    "message": "chrome ux report data not found", 
    "status": "NOT_FOUND" 
  } 
}

4. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

DokuWiki

DokuWiki が最新版なのに upgrade now! が表示される場合の対処法

目次1. DokuWiki が最新版なのに upgrade now! が表示される2. 対処方法その13. 対処方法その24. おわりに参考 1. DokuWiki が最新版なのに upgrade n …

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …

DokuWiki

DokuWiki で閲覧専用ユーザーを作る手順

DokuWiki において、閲覧専用ユーザーを作成する手順を紹介します。 目次DokuWiki で、閲覧専用ユーザーを作成する手順1. 閲覧専用グループを追加する。2. ユーザーにグループを指定するお …

Web Security

SSLで使用する証明書運用の不便さ

上のどちらも、SSLの証明書が期限を過ぎてしまったことが原因で起きた問題のようです。 前者は詳しく見ていないので分かりませんが、後者はサーバー証明書ではなくデバイス側に保存されているクライアント証明書 …