Web

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

投稿日:

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」から選びます。

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

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

関連記事

no image

HTML文書の文字エンコーディングに UTF-8 を使うことが公式に明文化されました

HTML文書は文字エンコーディングUTF-8でなければなりません – 水底の血 という記事で知ったのですが、「HTML文書の文字エンコーディングは UTF-8 でなければならない」という意 …

Web

【HTML】img 要素の srcset 属性 と sizes 属性について

目次1. デバイスピクセル比2. img 要素の srcset 属性 と sizes 属性3. sizes 属性4. srcset 属性x 単位で画像ファイルのサイズを指定する場合w 単位で画像ファイ …

DokuWiki

DokuWiki のアクセス設定チェックが面白い

目次1. It seems your data directory is not properly secured.2. 対応方法3. 珍しいアクセスチェックの仕組み4. おわりに 1. It see …

DokuWiki

DokuWiki Wrapプラグインの使い方

DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。 目次1. DokuWiki の Wrapプラグインとは?2. 基本的な使い方<div> タグと&lt …

Web

Notification API のポイント解説

目次1. はじめにNotification API が行うこと補足2. Notification API の使い方(1) デスクトップ通知が許可されているかどうかを取得する。(2) ユーザーにデスクト …