Core Web Vitals の指標を Google Analytics に投げて見れるようにしてみる

最近、 Core Web Vitals の指標を見ることが多い。
その流れで宮永さんのブログをしょっちゅう見ている。

アイデアマンズブログ | ムダの少ない快適なインターネット社会を目指す企業のブログ
https://blog.ideamans.com/

有用なエントリばかりだし、宮永さんはほんとすごすぎで紹介されている内容とか全てに感謝しかない。

Core Web Vitals は計測するライブラリが公開されているので、これを試してみた。

GoogleChrome/web-vitals: Essential metrics for a healthy site.
https://github.com/GoogleChrom...

どこかにデータためる箱を作ってもいいのだけど、ひとまずは Google Analytics に投げるという方法で。

サイトに計測用のタグを追加

タグマネージャを使ってたので、このコードをいれておく。

<!-- Load `web-vitals` using a module script. -->
<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals@0.2.4/dist/web-vitals.es5.min.js?module';

function sendToGTM({name, delta, id}) {
  // Assumes the global `dataLayer` array exists, see:
  // https://developers.google.com/tag-manager/devguide
  dataLayer.push({
    event: 'web-vitals',
    event_category: 'Web Vitals',
    event_action: name,
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    event_value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
  });
}

getCLS(sendToGTM);
getFID(sendToGTM);
getLCP(sendToGTM);
</script>

Google Tag Manager 側の設定

GTM 側で event_category とかの Data Layer 変数を受け取るようにする。

イベント名が一致する場合のトリガーを作成する

Google Analytics で計測する用のタグを作成する。

Google Analytics で連携状態の確認

リアルタイムのイベントが渡ってきているのを確認する。

数日たったら少しデータがたまっていた。

Core Web Vitals の値でよくないものとかは Search Console でもみれるわけなのでその辺は使いたい用途によって違いそうなきはする。

とりあえずやりたいことはできた感じで。

改善自体は一朝一夕にはいかないかもだけど、継続してコツコツと確認、調整をしていく感じだろうなー。
パフォーマンス的な話でいえばやることはこれだけじゃない訳だし。