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/[email protected]/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>