ページの読み込み時間を短縮すると、サイトの全体的なユーザー エクスペリエンスが向上します。このページでは、カスタム速度の情報を 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 |
x |
カスタム速度のすべての変数を論理グループに分類する文字列(例: '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 アナリティクスでは、速度イベントをサンプリングすることで、この機能に使用されるシステム リソースを公平に配分しています。
速度イベントのサンプリング レートは、プロパティで前日に受信したページビュー イベントの総数によって決定されます。次の表に、このサンプリング レートを決める基準を示します。
ページビューの総数(前日) | 処理される速度イベントの最大数 |
---|---|
0〜1,000 | 100 |
1,000~100,000 | ページビュー総数の 10% |
100,000~1,000,000 | 10,000 |
1,000,000 以上 | ページビュー総数の 1% |