2022年8月4日 4 min read Engineering

web-vitals + Google Analytics4 RUMデータを使用してWeb Vitalsを測定し、Web Vitals レポートを作成する

概要

運用しているサイトのパフォーマンスを測定するために、PageSpeed InsightsやLighthouseを使用することがあります。個人の端末で測定したデータのみでパフォーマンス改善をするには十分です。より多くのユーザーの端末からのパフォーマンスをもとに改善したいという要求があるとき、web-vitals JavaScriptライブラリを使用して、アナリティクスサービスに送信することで各指標をレポートすることができます。このドキュメントを読むことで、実際のユーザー環境からCore Web Vitalsの指標を測定・収集し、可視化することができます。

前提

ユーザー環境のCore Web Vitalsの指標を測定するのは、web-vitals JavaScriptライブラリが行います。測定したデータはGoogle Analyticsに送信します。Web Vitals ReportのサービスでGoogle Analyticsと連携することで、各指標を可視化することができます。

Core Web Vitalsとは

Core Web Vitals とは、すべての Web ページに適用可能な Web Vitals のサブセットのことを指します。すべてのサイト所有者にとって測定する価値のあるもので、Google が提供するあらゆるツールで採用されています。Core Web Vitals に含まれている各指標は、ユーザーエクスペリエンスに関する特徴的な観点を提供し、フィールドデータの測定が可能であり、ユーザーを中心とした重要な結果に基づく実際のユーザー体験を反映します。

サービス

Google Analytics4 (GA4)
web-vitals https://github.com/GoogleChrome/web-vitals
Web Vitals Report https://web-vitals-report.web.app/

1.Google Analyticsからグローバルサイトタグを取得する

Google Analyticsからグローバルサイトタグを取得します。ヘッダーに追加します。GA_MEASUREMENT_IDはデータの送信先にするGoogle Analytics プロパティのIDです。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());

  	gtag('config', 'GA_MEASUREMENT_ID');
</script>

2.RUMデータをGoogle Analyticsへ送信する

web-vitals JavaScriptをインポートしメトリクスを取得、Google Analyticsへ送信します。今回はGhostやWordPressのようなCMSを想定しているため、CDNから直接JavaScriptファイルを読み込みます。npmからインストールして使用するのが推奨される使用方法です。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script type="module">

    import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';
    
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'GA_MEASUREMENT_ID');
    
    function sendToGoogleAnalytics({name, delta, value, id}) {
        gtag('event', name, {
            // Built-in params:
            value: delta, // Use `delta` so the value can be summed.
            // Custom params:
            metric_id: id, // Needed to aggregate events.
            metric_value: value, // Optional.
            metric_delta: delta, // Optional.
        });
    }
    getCLS(sendToGoogleAnalytics);
    getFID(sendToGoogleAnalytics);
    getLCP(sendToGoogleAnalytics);
</script>

3.Web Vitals ReportにGoogle Analyticsのアカウントを連携する

Google Analyticsに収集されたWev Vitalsのデータからレポートを出力するサービスがあります。Web Vitals Report　にアクセスし、Google Analyticsと連携します。十分にデータが集まっているとセグメントごとにCore Web Vitalsの指標のスコアを表示します。