Core Web Vitalsとは

Core Web Vitalsは、WebサイトのSEOに直接影響します。
これについては、2020年にGoogle検索セントラルでの発表があります。

数値が低いと、SEOにも悪影響を与えますので、要注意です。
Core Web Vitals は、ページの速度、応答性、そして視覚的安定性を評価して、結果に基づいてランキングでサイトを優先しています。

SEOの話を除いでも、これらの指標はUXにも直接反映しますので、Webディレクターとしては見逃してはいけない重要なポイントであります。

取得データについて

今回はGoogleChromeが提供しているWeb Vitals NPM packageをベースに、Web Vitalsをクライアント側から取得するようにします。
取得対象は以下の通りです。

• Cumulative Layout Shift (CLS)
• First Input Delay (FID)
• Largest Contentful Paint (LCP)
• First Contentful Paint (FCP)
• Time to First Byte (TTFB)

TTFBについて

上記のうち、特にTTFBに関しては、PageSpeedにも取得できないデータです。

web.devからは「Chrome開発者ツール」または「WebPageTest」でテストすることを提案していますが、
WebPageTestではアメリカ、インドなどの国は選べられるが日本の選択肢がないため、正確な数字とは言えず。
Chrome開発者ツールでは個人のパソコン・ネットワークのスピードにも左右されますので、客観的な数字は取得できない状況です。

なので、オスカーはJSで取得することが一番ベストと思います。

GTMの設定

お待たせしました。ここから本題に入ります。

①タグ作成

設定は下記の通り、

• タグ名称（名称を仮に「Web Vitals - JS」にしてます。）
• タグタイプは「カスタムHTML」を選択
• トリガーは「All Pages」

内容に下記のJS記入

下記内容をコピペして、保存します。

＜script＞
   (function() {
     var script = document.createElement('script');
     script.src = 'https://unpkg.com/web-vitals@0.2.3/dist/web-vitals.es5.umd.min.js';
     function sendToDataLayer(metric) {
     var name = metric.name;
     var delta = metric.delta;
     var value = metric.value;
   dataLayer.push({
       event: 'web-vitals',
       event_category: 'Web Vitals',
       event_action: name,
       event_value: Math.round(name === 'CLS' ? delta * 1000 : delta),
     })
   }
   script.onload = function(){
     webVitals.getCLS(sendToDataLayer);
     webVitals.getFID(sendToDataLayer);
     webVitals.getLCP(sendToDataLayer);
     webVitals.getTTFB(sendToDataLayer);
   }
     document.head.appendChild(script);
   }())
＜/script＞

ざっと説明すると、JSを使ってWeb Vitalsの数字を取得し、それぞれデータレイヤーにして、「web-vitals」のイベントを発火する。
というものです。

②トリガー作成

この後GA4のイベントを作成しますが、そのためのトリガーを作成します。

設定は下記の通り、

• トリガー名称（名称を仮に「Web Vitals」にしてます。）
• トリガータイプは「カスタムイベント」を選択
• イベント名は「web-vitals」を入力（上記のJSに入力しているものと完全一致する必要があります。）

設定後に保存します。

③変数作成

これも、GA4のイベントに使いますので、２つの変数が必要です。
「変数」メニューに入り、ユーザー定義変数の「新規」をクリックします。

設定は下記の通り、

• 変数名称（名称を仮に「Web Vitals - Metric」にしてます。）
• 変数タイプは「データレイヤー」を選択
• 変数名は「event_action」を入力（上記のJSに入力しているものと完全一致する必要があります。）

もう一つの変数の設定は下記の通り、

• 変数名称（名称を仮に「Web Vitals - Value」にしてます。）
• 変数タイプは「データレイヤー」を選択
• 変数名は「event_value」を入力（上記のJSに入力しているものと完全一致する必要があります。）

上記の２つも保存して、次最後のステップに入ります。

④タグ作成

設定は下記の通り、

• タグ名称（名称を仮に「Web Vitals - GA4イベント」にしてます。）
• タグタイプは「GA4イベント」を選択
• 設定タグはGA4を設定しているタグを指定します
• イベント名は先ほど、１個目の変数を設定
• イベントパラメータに１つ目は"value"で、値は２個目の変数を設定
• そしてトリガーには先ほどの作成した「カスタムイベント」を設定

これで設定完了です！

GTM Previewで確認

さて、公開する前に、Previewで確認しましょう。

まずはイベント発火の方はPreview開いてすぐ確認できると思います。
ざっとこんな感じです。

それぞれのweb-vitalsをクリックして、「Variables」のタブを確認すると、下記のように「Web Vitals - Metric」と「Web Vitals - Value」を確認することができます。

GA4 DebugViewで確認

次にGA4のDebugViewにも確認しましょう。

下記のように連携されます。
JSに書いてあった「web-vitals」イベントはGTMを発火させるものであって、GA4に連携するイベントはそれぞれのパラメータのはずです。

上記の場合、TTFBのvalueは706になりますので、web.dev推奨は800ms以下ですので、ギリギリセーフです。

ここまで確認できたら、問題なく公開できますので、実装しましょう！

探索レポートで確認

上記設定完了したら、翌日より探索レポートで確認できるようになります。

①新しいデータ探索作成

②変数設定

• ディメンション：イベント名、ランディングページ＋クエリ文字列
• 指標：イベント数、イベントの値

③全ディメンションと指標追加

１回ずつダブルクリックすれば追加できて、以下のようになります、

④フィルタでイベント指定

さらに特定の数値を確認する場合、フィルタでイベントを指定できます。

例えば、イベントをCLSでフィルタする場合、下記のようになります。

現在、カスタムイベントで値を渡す場合、GA4は全部合計して表示するようになっています。
平均値はGA4で出せませんので、計算が必要になります。
上記の「/blog/ga4-measure-number-of-clicks-…」だと、1752/6=287.5。
平均0.28sになりますので、要改善ページでした。

他BigQueryやBIツールなどで計算を自動化するといいかもしれません。

おわりに

Core Web Vitalsの指標を日々の連携で、GA4を取り込むことで、
どのページに異常が発生するかがわかるし、過去のデータを追うことも可能になります。

問題ある場所はすぐ改善できて、SEOにも貢献します。

今日も読んでいただきありがとうございます。
少しでも役に立てれば幸いです。

それでは。