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'
});

カスタム速度パラメータ

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

パラメータ名 データ型 必須 説明
name string 記録された変数を識別するための文字列(例: 'load')。
value integer Google アナリティクスへのデータ送信に要した時間。ミリ秒単位で表します(例: 20)。
event_category string × カスタム速度のすべての変数を論理グループに分類する文字列(例: 'JS Dependencies')。
event_label string × レポートにカスタム速度をわかりやすく表示するための文字列(例: 'Google CDN')。

時間を測定する

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 アナリティクスでは、timing タイプのイベントをサンプリングすることで、この機能に使用されるシステム リソースを公平に配分しています。

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

ページビューの総数(前日) 処理される timing タイプのイベントの最大数
0〜1,000 100
1,000~100,000 ページビュー総数の 10%
100,000~1,000,000 10,000
1,000,000 以上 ページビュー総数の 1%