gtag.js を使用してカスタム速度を測定する

ページの読み込み時間を短縮すると、サイトの全体的なユーザー エクスペリエンスが向上します。このページでは、カスタム速度の情報を Google アナリティクスに送信する方法を説明します。

実装

timing_complete イベントを送信するには、event コマンドを使用します。

gtag('event', 'timing_complete', {<timing_parameters>});

<timing_parameters> には、パラメータと値のペアを 1 つ以上指定し、各ペアをカンマで区切ります。たとえば、次のコマンドは、カスタム速度イベントを Google アナリティクスに送信します。ここでは、現在のウェブページで、外部の JavaScript 依存関係をすべて読み込むまでに 3,549 ミリ秒かかったことを示しています。

gtag('event', 'timing_complete', {
  'name' : 'load',
  'value' : 3549,
  'event_category' : 'JS Dependencies'
});

カスタム速度パラメータ

カスタム速度のパラメータは下表のとおりです。

時間を測定する

timing_complete イベントでは、経過時間をミリ秒で指定する value パラメータが必要です。この値を取得するコードを記述する必要があります。

その場合は、測定する時間の始点と終点に 1 つずつタイムスタンプを作成する方法が最も簡単です。その後、タイムスタンプ間の経過時間を計算します。

最新のブラウザでは Navigation Timing API がサポートされています。この API には、ウェブページのパフォーマンスを測定するための window.performance オブジェクトが含まれ、高精度の時間データを利用できます。

次の例では、performance.now() メソッドを使用し、ページの読み込みが最初に開始されてからの経過時間を取得しています。

// Feature detects Navigation Timing API support.
if (window.performance) {
  // Gets the number of milliseconds since page load
  // (and rounds the result since the value must be an integer).
  var timeSincePageLoad = Math.round(performance.now());

  // Sends the timing event to Google Analytics.
  gtag('event', 'timing_complete', {
    'name': 'load',
    'value': timeSincePageLoad,
    'event_category': 'JS Dependencies'
  });
}

サンプリングに関する注意事項

Google アナリティクスでは、速度イベントをサンプリングすることで、この機能に使用されるシステム リソースを公平に配分しています。

速度イベントのサンプリング レートは、プロパティで前日に受信したページビュー イベントの総数によって決定されます。次の表に、このサンプリング レートを決める基準を示します。