1. top
  2. blog
  3. 2020
  4. 05

Next.jsでWeb VitalsをGoogle Analyticsに記録する

(初版) → (改訂)このページのQRコード

Next.js 9.4から、パフォーマンスモニタリング用の機能が追加されました。 これを使うと、LCP（一番大きい要素が表示されるまでの時間）やFID（最初にインタラクティブになるまでの時間）などの情報を得ることが出来ます。便利。

このサイトでも、この機能で取得したデータをGoogle Analyticsのカスタム速度に記録するようにしてみました。 簡単にこれのやり方をメモしておきます。

データを取得する

Web Vitalsのデータを取得するには、pages/_app.jsxに以下のようなコードを追加します。

export function reportWebVitals(metric) {
    console.log(metric);
}

これだけで、とりあえずコンソールにデータが表示されるようになります。

Google Analyticsに送信する

Google Analyticsへの記録には、ここではReact-GAのtiming関数というものを使います。

最小限でとりあえず記録しようとすると、以下のような感じになります。

export function reportWebVitals({ name, value }) {
    ReactGA.timing({
        category: 'Web Vitals',
        variable: name,
        value: name === 'CLS' ? value * 1000 : value,
    });
}

CLSの時だけ単位が秒になるようなので、そこだけ1000倍してミリ秒に揃えています。

2020-06-02 追記

訂正。 CLSというのは画面がどのくらい変化したかも含めて計算されるLayout shift scoreというものの値のようで、単位は時間ではないみたいです。

では何故1000倍しているのかというと、Google Analyticsで扱うメトリクスは整数じゃないといけないのに対して、CLSは1以下の数字になったりするからだそうです。 という感じの説明が、GitHubのWeb Vitalsのリポジトリにありました。

時間じゃないのが時間として記録されてしまうので、ちょっと微妙かもしれませんね…。

正常に機能すれば、Google Analyticsのカスタム速度で記録を見ることが出来るはずです。 カスタム速度は100%全部が記録されるわけではないので、そこだけ注意が必要です。 のんびり確認するくらいで居た方が良いかも。

Typescriptの場合

9.4の時点ではreportWebVitalsの型が用意されていないみたいなので、自前で用意します。 おそらく以下のような感じで大丈夫そうです。

interface WebVitalsMetric {
    id: string;
    name: string;
    startTime: number;
    value: number;
    label: 'web-vital' | 'custom';
}

export function reportWebVitals({ name, value }: WebVitalsMetric): void {
    console.log(name, value);
}

参考: