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

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

関連記事

Web

WordPress: ブラウザ別処理とキャッシュの注意点

主にWordPressに関する、ブラウザ別処理とキャッシュの注意点です。

Web

【HTML】picture 要素について

目次1. <picture> 要素とは?2. 仕様3. <source> 要素4. 利用例5. 実際に使用された画像がどれかを JavaScript で取得する6. 注意点7. …

Web

ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

Web

インストールが可能になるための最低限のウェブサイト(PWA)を作る

インストールが可能になるための最低限のウェブサイト(PWA)を作る方法について説明します。

DokuWiki

DokuWiki: Layout Switcher Plugin

DokuWiki用プラグイン「Layout Switcher Plugin」のページです。 目次1. 概要2. インストールと設定(1) プラグインファイルのダウンロード(2) プラグインをサーバーに …