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閲覧履歴をもとにした広告配信」についての調査結果

上の記事で興味深いアンケートが行われていました。 「Web閲覧履歴などをもとにカスタマイズされた広告が配信されていると認識している人」がそのような広告に対してどう思っているかについて聞いたところ、以下 …

DokuWiki

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

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

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …

Chrome

Webページが読み込まれる際、HTMLは分割されてパースされます

Webページが読み込まれる際、HTMLが分割されて段階的にパースされる様子を観察します。