2020年5月に、
2021年から
Core Web Vitals の
ライブラリで 取得できる 指標に ついて
GoogleChrome/web-vitals: Essential metrics for a healthy site. で
Cumulative Layout Shift (CLS)
コンテンツの移動を 示す スコア。
dobule 型で値が 取得できます。 First Contentful Paint (FCP)
何らかのDOMコンテンツが レンダリングされた 時刻。
DOMHighResTimeStamp で値が 取得できます。 First Input Delay (FID)
ユーザーが最初に アクセスしてから 実際に イベントが 発生し、 イベントハンドラを 呼び出されるまでの 時間。
DOMHighResTimeStamp で値が 取得できます。
First Input Delay のみを計測する ライブラリも あるようです。 Largest Contentful Paint (LCP)
ユーザーにとって 意味の ある 表示状態に なるまでの 時間。
DOMHighResTimeStamp で値が 取得できます。
reportAllChanges
という パラメータが あり、 true
を指定すると、 最大値の 計算完了まで report を 遅延させ、 false
を指定すると 計算の 都度 report する 動作に なります。 Reduce server response times (TTFB)
最初の1バイトが 到着するまでの 時間。
ネットワーク帯域でのコンテンツ転送時間も 含めた サーバー側の 処理時間を 示します。
DOMHighResTimeStamp で値が 取得できます。
Core Web Vitals の 関連ライブラリ
Web Vitals に
GoogleChrome/web-vitals: Essential metrics for a healthy site.
Web Vitals の計測ライブラリ。 GoogleChrome/web-vitals-extension: A Chrome extension to measure essential metrics for a healthy site
Web Vitals を計測できる Chrome 拡張。 treosh/web-vitals-reporter: A tiny (800 B) utility to simplify web vitals reporting.
GoogleChrome/web-vitals
のreport 機能を 拡張する ライブラリで、 Google Analytics や、 Google Tag Manager などの 計測基盤に 送付する 際は 使えます。
web-vitals の インストール、 react アプリケーションへの 組み込み
web-vitals を
web-vitals の インストール
npm install web-vitals
react アプリケーションへの 組み込み
Correct location to call webVitals in a React SPA · Issue #41 · GoogleChrome/web-vitals に
上記を
- WebVitals.tsx
sendToGTM
でデータを Google Tag Manager に 送信しています。 import { useEffect } from 'react'; import { getCLS, getFCP, getFID, getLCP, getTTFB, Metric } from 'web-vitals'; const { dataLayer } = window; declare global { interface Window { dataLayer: any; } } function sendToGTM({ name, delta, id }: Metric) { // globalなdataLayer変数がなければ生成する window.dataLayer = window.dataLayer || []; dataLayer.push({ event: 'web-vitals', 'eventData.category': 'Web Vitals', 'eventData.action': name, // Googleアナリティクスの指標は整数である必要があるため、値は丸められる。 // CLSの場合、精度を上げるために、最初に値に1000を掛ける。 'eventData.value': Math.round(name === 'CLS' ? delta * 1000 : delta), // `id`の値は現在のページの読み込みに固有。 // 送信時に同じページからの複数の値(CLSなど)、Googleアナリティクスは、 // このIDでグループ化して合計を計算する(注:必要なのは `eventLabel`で、レポートのディメンションになる)。 'eventData.label': id, }); } const WebVitals = () => { useEffect(() => { getTTFB(sendToGTM); getFCP(sendToGTM); getCLS(sendToGTM); getFID(sendToGTM); getLCP(sendToGTM); }, []); return null; }; export default WebVitals;
WebVitals.tsx の
return ( <main className="mainContainer mt5rem"> <WebVitals /> {this.renderMetaInfo()} {/* this.renderEditButton() */} <AppPost title={post.title} slug={post.slug} body={post.body} published={post.published} tags={post.tags} category={post.category}/> <br/> </main> );
Google Tag Manager から、 Amplitude に データを 送信する
Google Tag Manager から、
タグの 初期設定に ついて
Amplitude を
タグの
Google Tag Manager で
データレイヤー変数を 作る。
Web Vitals 指標を
- データレイヤー変数
以下のデータレイヤー変数を 作ります。
変数名は、sendToGTM
関数で設定している キー値に 一致させます。 - eventData.action
- eventData.value
- eventData.label
以下、eventData.action
の
トリガー を 作る
sendToGTM
関数 で
この'web-vitals'
に
カスタム HTML タグを 作る
作成した
以下、
HTMLタグの
内容
データレイヤ変数を取得して、 amplitude.getInstance().logEvent
のVale 値と して 設定します。
id だけだと、どの url の 計測結果なのか 分からなかったので、 システム変数 Page URL
を使って 設定するようにしました。 <script> // プロパティを渡してイベント送信 amplitude.getInstance().logEvent('web-vitals', { metricnName: {{eventData.action}}, id: {{eventData.label}}, value: {{eventData.value}}, url: {{Page URL}} } ); </script>
タグの
順序付け
タグの配信前に、 Amplitude の 初期化タグを 配信するように 設定しました。
これで、
参考
以下、
- React Native for Web + TypeScriptで
GoogleTagManagerを 使ってみた | Developers.IO - Google Developers Japan: Web Vitals の
概要: サイトの 健全性を 示す 重要指標 - 2021年に
導入予定の Core Web Vitals(コアウェブバイタル)が もたらすGoogle検索結果への 影響は ? | SEO対策なら 株式会社ペコプラ - First Input Delayは
ユーザーの 反応に どう 影響するか? | SpeedCurve - フック API リファレンス – React
- dataLayerへ値を
渡す 記述を .pushで 統一する 方法 - JavaScript
以上です。
コメント