gtag.js を使用したカスタム速度

このガイドでは、gtag.js を使用してカスタム速度を測定し、Google アナリティクスに送信する方法について説明します。

カスタム速度の詳細。

概要

さまざまな調査から、ページの読み込み速度を改善すると全体的なサイトの利便性が向上することがわかっています。Google アナリティクスを使用すると、時間を独自に設定してトラッキングし、自分のサイトに合ったパフォーマンス データを測定できます。AJAX リクエストやウェブ上のリソースの読み込みにかかる時間(待ち時間)を測定する場合に特に有効です。

実装

カスタム速度を測定するには、event コマンドを使用して timing_complete イベントを送信します。

gtag('event', 'timing_complete', [parametersObject]);

カスタム速度パラメータ

次の表は、カスタム速度パラメータをまとめたものです。

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

次のコマンドでは、カスタム速度イベントを Google アナリティクスに送信しています。ここでは、現在のウェブページで外部の JavaScript 依存関係をすべて読み込むまでに 3,549 ミリ秒かかったことを示しています。

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

時間を測定する

カスタム速度のデータを送信する際は、value パラメータを使って所要時間をミリ秒で指定します。必要に応じて、この時間を取得するコードを記述することもできます。

その場合は、測定する時間の始点と終点に 1 つずつタイムスタンプを作成する方法が最も簡単です。これにより、2 つのタイムスタンプの差分から所要時間を取得することができます。

最新のブラウザでは 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%