このガイドでは、analytics.js を使用して時間を測定する方法について解説します。
概要
調査の結果から、ページの読み込み速度を改善すると全体的なサイトの利便性が向上することがわかりました。Google アナリティクスには、ページの読み込み時間に関するデータを確認できるレポートが多数用意されていますが、時間を独自に設定して測定し、自分のサイトに合ったパフォーマンス データを測定することもできます。
カスタム速度では、analytics.js ライブラリを使用して時間を測定することができます。AJAX リクエストやウェブ上のリソースの読み込みにかかる時間（待ち時間）を測定する場合に特に有効です。
実装
カスタム速度のヒットは、send コマンドを使用し、hitType に timing を指定することで送信できます。timing ヒットタイプの場合、send コマンドのシグネチャは次のようになります。
ga('send', 'timing', [timingCategory], [timingVar], [timingValue], [timingLabel], [fieldsObject]);
カスタム速度フィールド
次の表にカスタム速度フィールドをまとめます。
| フィールド名 | 値の型 | 必須 | 説明 |
|---|---|---|---|
timingCategory |
テキスト | 必須 | カスタム速度のすべての変数を論理グループに分類する文字列（例: 'JS Dependencies'）。 |
timingVar |
テキスト | 必須 | 記録された変数を識別するための文字列（例: 'load'）。 |
timingValue |
整数 | 必須 | Google アナリティクスへのデータ送信に要した時間。ミリ秒単位で表します（例: 20）。 |
timingLabel |
テキスト | 省略可 | レポートにカスタム速度をわかりやすく表示するための文字列（例: 'Google CDN'）。 |
例:
次のコマンドでは、カスタム速度ヒットを Google アナリティクスに送信しています。ここでは、現在のウェブページで外部の JavaScript 依存関係をすべて読み込むまでに 3,549 ミリ秒かかったことを示しています。
ga('send', 'timing', 'JS Dependencies', 'load', 3549);
すべての send コマンドと同様に、コンビニエンス変数で渡されているフィールドは fieldsObject でも指定できます。つまり、上のコマンドは次のように書き換えることができます。
ga('send', {
hitType: 'timing',
timingCategory: 'JS Dependencies',
timingVar: 'load',
timingValue: 3549
});
時間を測定する
カスタム速度のデータを送信する際は、timingValue パラメータを使って所要時間をミリ秒で指定します。必要に応じて、この時間を取得するコードを記述することもできます。
その場合は、測定する時間の始点と終点に 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 hit to Google Analytics.
ga('send', 'timing', 'JS Dependencies', 'load', timeSincePageLoad);
}
サンプリングに関する注意事項
Google アナリティクスでは、処理時に timing タイプのヒットをサンプリングすることで、この機能に使用されるシステム リソースを公平に配分しています。
timing タイプのヒットのサンプリング レートは、プロパティで前日に受信したページビュー ヒットの総数によって決定されます。次の表に、timing タイプのヒットのサンプリング レートの基準を示します。
| ページビュー ヒットの総数（前日） | 処理される timing タイプのヒットの最大数 |
|---|---|
| 0〜1,000 | 100 |
| 1,000～100,000 | ページビュー ヒット総数の 10% |
| 100,000～1,000,000 | 10,000 |
| 1,000,000 以上 | ページビュー ヒット総数の 1% |
送信されるヒット数の制限
処理されない Google アナリティクス ヒットの送信を避けるため、analytics.js では、設定オプション sampleRate および siteSpeedSampleRate で送信されるヒットの割合を指定できます。デフォルトでは、これらのフィールドはそれぞれ 100%、1% に設定されています。1 日の平均ページビュー数に基づき、これらの値を調整して、Google アナリティクスによって処理される timing タイプのヒット数に近づけることができます。