標準のユニバーサルアナリティクス（UA）プロパティでは、2023 年 7 月 1 日をもってデータの処理が停止されました。UA 360 プロパティでは、2024 年 7 月 1 日をもってデータの処理が停止されます。また、Google アナリティクス 4 への移行に伴い、一部の UA 360 の機能はその前にサポート終了となります。Google アナリティクス 4 を既存の実装に追加します。

このページは Cloud Translation API によって翻訳されました。

カスタム速度 - ウェブトラッキング（ga.js）

このドキュメントでは、_trackTiming メソッドの使用方法の包括的なガイドを提供します。

はじめに

調査によると、ページの読み込み時間を短縮すると、サイトの全体的なユーザーエクスペリエンスが向上することがわかっています。Google アナリティクスには、ページの読み込み時間を自動的に追跡する優れたレポートが多数用意されています。しかし、特定のリソースの読み込みにかかる時間を追跡したい場合はどうすればよいでしょうか。

たとえば、一般的な JavaScript ライブラリの読み込みに時間がかかりすぎて、特定のユーザーのサイトエクスペリエンスが低下していないか、などです。

カスタム速度を使用すると、Google アナリティクスで特定の期間をトラッキングするネイティブな方法が提供され、

実際の例については、カスタム速度のサンプルコードをご覧ください。

カスタム速度の設定

カスタム速度のデータを収集するには、_trackTiming メソッドを使って Google アナリティクスに時間データを送信します。

_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);

各パラメータの意味は次のとおりです。

パラメータ	値	必須	概要
`category`	`string`	必須	カスタム速度のすべての変数を論理グループに分類する文字列で、レポート作成を容易にします。たとえば、特定の JavaScript ライブラリの読み込みにかかった時間をトラッキングする場合は、`jQuery` の値を使用します。
`variable`	`string`	○	トラッキング対象のリソースのアクションの名前を示す文字列。たとえば、jQuery JavaScript ライブラリの読み込みにかかった時間をトラッキングする場合は、`JavaScript Load` の値を使用します。複数のカテゴリで同じ変数を使用して、これらのカテゴリに共通するイベント（`Javascript Load` や `Page Ready Time` など）のタイミングをトラッキングすることもできます。
`time`	`number`	必須	Google アナリティクスへのデータ送信に要した時間（ミリ秒単位）。jQuery ライブラリの読み込みに 20 ミリ秒かかった場合は、`20` の値を送信します。
`opt_label`	`string`	×	レポートにカスタム速度をわかりやすく表示するための文字列。ラベルは、同じカテゴリと変数の組み合わせに対する異なるサブテストに集中するためにも使用できます。たとえば、Google コンテンツ配信ネットワークから jQuery を読み込む場合は、`Google CDN` の値を使用します。
`opt_sampleRate`	`number`	×	速度のヒットが Google アナリティクスに送信される訪問者の割合を手動でオーバーライドする数値です。デフォルトでは、一般的なサイトの速度データの収集と同じ数値が訪問者数の割合に基づいて設定されます。たとえば、すべてのユーザーの _trackTiming ヒットをトラッキングする場合は、値 `100` を使用します。なお、1 回のヒットは、通常のセッションあたり 500 ヒットにカウントされます。

トップへ戻る

かかった時間の追跡

_trackTiming メソッドを使用する場合は、time パラメータで所要時間をミリ秒で指定します。そのため、この時間をキャプチャするコードを記述するのはデベロッパー次第です。これを行う最も簡単な方法は、期間の開始時にタイムスタンプを作成し、期間終了時に別のタイムスタンプを作成することです。これにより、両方のタイムスタンプの差から経過時間を取得できます。

簡単な例を見てみましょう。

var startTime = new Date().getTime();

setTimeout(myCallback, 200);

function myCallback(event) {

  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;

  _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']);
}

開始タイムスタンプを取得するには、新しい Date オブジェクトを作成し、ミリ秒単位の時間を取得します。次に、setTimeout 関数を使用して、200 ミリ秒で myCallback 関数を呼び出します。コールバック関数の実行後、新しい Date オブジェクトを作成して endTime タイムスタンプを取得します。次に、終了時間と開始時間の差が計算され、所要時間が取得されます。最後に、かかった時間が Google アナリティクスに送信されます。

この例は簡単ですが、時間をトラッキングする方法の概念を説明しています。より現実的な例を見てみましょう。

トップへ戻る

JavaScript リソースの読み込みにかかった時間のトラッキング

現在、多くのサイトでサードパーティの JavaScript ライブラリや JSON オブジェクト経由のリクエストデータが使用されています。サイト家庭ではこれらのリソースの読み込みが速くても、他の国のユーザーには同じリソースの読み込みが非常に遅くなる可能性があります。このような読み込みが遅いリソースは、海外のユーザーに対するサイトエクスペリエンスの低下につながります。

サイトの速度とカスタム速度の機能は、こうしたリソースの読み込みにかかる時間を収集してレポートするのに役立ちます。

非同期的に JavaScript リソースを読み込む関数の所要時間をトラッキングする方法について、以下に簡単な例を示します。

var startTime;

function loadJs(url, callback) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  var s = document.getElementsByTagName('script')[0];

  js.onload = callback;
  startTime = new Date().getTime();

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;
  _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']);

  // Library has loaded. Now you can use it.
};

この例は前の例と非常によく似ています。

この例の loadJs は、スクリプト要素を動的に作成してブラウザの DOM にアタッチすることで、JavaScript リソースを読み込むユーティリティ関数です。この関数は、文字列としての URL と、スクリプトの読み込み後に実行されるコールバック関数の 2 つのパラメータを受け入れます。

loadJs 内で、開始タイムスタンプが startTime に格納されます。リソースが読み込まれると、コールバック関数が実行されます。このコールバック関数では終了タイムスタンプが取得され、JavaScript リソースの読み込みにかかった時間の計算に使用されます。この時間は、_trackTiming メソッドによって Google アナリティクスに送信されます。

たとえば以下を呼び出したとします。

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);

Google コンテンツ配信ネットワークから jQuery ライブラリを非同期で読み込み、完了後にコールバック関数を実行します。これにより、リソースの読み込み時間が Google アナリティクスに送信されます。

トップへ戻る

複数のカスタム速度の処理

上記のコードを使用して、複数の JavaScript リソースを読み込むとします。startTime 変数はグローバルであるため、期間の開始を追跡するたびに、startTime 変数が上書きされ、誤った時間が生成されます。

そのため、ベストプラクティスとして、追跡するリソースごとに開始時刻と終了時刻の一意のインスタンスを維持する必要があります。

また、_trackTiming のカテゴリと変数のパラメータはハードコードされています。そのため、loadJs を使って複数のリソースを読み込むと、Google アナリティクスレポートで各リソースを区別できなくなります。

どちらの問題も、time パラメータと _trackTiming パラメータを JavaScript オブジェクトに保存することで解決できます。

カスタム速度を格納する JavaScript オブジェクトを作成する

トラッキング対象の各リソースのカスタム速度データを格納するために使用できる、シンプルな JavaScript オブジェクトを次に示します。

function TrackTiming(category, variable, opt_label) {
  this.category = category;
  this.variable = variable;
  this.label = opt_label ? opt_label : undefined;
  this.startTime;
  this.endTime;
  return this;
}

TrackTiming.prototype.startTime = function() {
  this.startTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.endTime = function() {
  this.endTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}

これで、このオブジェクトを使用して、複数のリクエストで loadJs を機能させることができるようになりました。

保存されたカスタム速度を送信する

これで、トラッキングするリソースごとに時間データを保存する方法が整ったので、そのデータを使用するように loadJs を更新する方法を以下に示します。

var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN');

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt);

function loadJs(url, callback, tt) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  js.onload = callback;
  var s = document.getElementsByTagName('script')[0];

  tt.startTime();
  js.tt = tt;

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  target.tt.endTime().send();

  // Library has loaded. Now you can use it.
}

上記のコードはまず、新しい TrackTiming オブジェクトを作成して、カテゴリ、変数、オプションのラベルをコンストラクタに渡します。次に、TrackTiming オブジェクトがパラメータとして loadJs 関数に渡されます。

loadJs 内で、開始タイムスタンプを取得して保存するために startTime メソッドが呼び出されます。

上記の例では、コールバック関数はグローバルであるため、startTime 変数に簡単にアクセスできました。startTime が TrackTiming オブジェクトの一部となったので、このオブジェクトを loadJs 関数からコールバック関数に渡す方法が必要になります。

この問題を解決する方法の 1 つは、TrackTiming オブジェクトをプロパティとしてスクリプト要素に追加することです。コールバック関数はスクリプト onload メソッドから実行されるため、コールバックにはパラメータとしてイベントオブジェクトが渡されます。このイベントオブジェクトを使用してイベントを発生させた元のスクリプトオブジェクトを取得し、そのスクリプトオブジェクトを使用して TrackTiming オブジェクトにアクセスできます。

元の TrackTiming オブジェクトにアクセスできるようになったら、スクリプトは時間を終了してデータを送信できます。

サンプルサイトでこの例のライブデモをご覧ください。

トラッキング対象のオブジェクトに TrackTiming オブジェクトをプロパティとして追加するパターンは、XMLHttpRequest オブジェクトの使用など、他の非同期読み込みメカニズムをトラッキングする場合にうまく機能する傾向があります。

トップへ戻る

XMLHttpRequests のトラッキング

ウェブページのリソースを非同期で読み込むもう 1 つの一般的な方法は、XMLHttpRequest オブジェクトを使用することです。これらのリソースの読み込みにかかる時間は、_trackTiming メソッドと TimeTracker オブジェクトの両方を使用して追跡することもできます。

サーバーから引用ファイルを読み込む例を次に示します。

var url = ‘//myhost.com/quotes.txt’;
var tt = new TrackTime('xhr demo', 'load quotes');

makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    var xhr = new window.XMLHttpRequest;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = callback;

    tt.startTime();
    xhr.tt = tt;

    xhr.send();
  }
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  if (target.readyState == 4) {
    if (target.status == 200) {

      target.tt.endTime().send();

      // Do something with the resource.
    }
  }
}

この例は、loadJs の例と非常によく似ています。ライブデモをご覧ください。

トップへ戻る

不正なデータの送信を避ける

上記の例では、費やした時間を取得するために、開始時間から終了時間を差し引いています。通常、開始時間が終了時間より前であれば、うまく機能します。ただし、ブラウザの時刻が変更されると、問題になることがあります。開始時間の設定後にユーザーがマシン時間を変更すると、不正なデータが Google アナリティクスに送信される可能性があります。1 つの大きな不正な値を送信する際の大きな問題は、平均と合計の指標に歪みが生じることです。

そのため、Google アナリティクスにデータを送信する前に、費やした時間が 0 より大きく、一定時間未満であることを確認するのがベストプラクティスです。このチェックを行うには、上記の TimeTracker send メソッドを変更します。

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;

  var hourInMillis = 1000 * 60 * 60;

  if (0 < timeSpent && timeSpent < hourInMillis) {
    window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  }

   return this;
}

サンプルレートのオーバーライドとデバッグ

_trackTiming メソッドは、Google アナリティクスで収集されたすべてのサイトの速度の指標について、同じレートで Google アナリティクスにデータを送信します。デフォルトでは全訪問者の 1% に設定されています。

トラフィック量が多いサイトでは、このデフォルト値で十分です。ただし、トラフィックの少ないサイトの場合は、オプションのサンプルレートパラメータを設定してサンプルレートを上げることができます。次に例を示します。

_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);

ユーザーの 50% から _trackTiming データを収集します。

または、_setSiteSpeedSampleRate メソッドを設定して、_trackTiming メソッドを含むすべてのサイトの速度のタイミングについて、サンプルレートを設定することもできます。たとえば以下のようになります。

_gaq.push([‘_setSiteSpeedSampleRate’, 50]);

訪問者の 50% から _trackTiming のデータも収集します。

通常、Google アナリティクスの実装をテストして検証する場合、テスト対象のサイトへのトラフィックはほとんどありません。そのため、通常はテスト中にサンプルレートを 100% に上げると便利です。

トップへ戻る

その他のタイムイベントのトラッキング

上記の例はすべて _trackTiming メソッドを使用してリソースの読み込みにかかる時間を追跡することに重点を置いていますが、このメソッドを使用して一般的な時間を追跡することもできます。たとえば、以下を追跡できます。

訪問者が動画を視聴した時間。
ゲーム内でレベルのクリアにかかる時間。
訪問者がウェブサイトの特定のセクションを読んでいた時間。

いずれの場合も、上記と同じ TimeTracker JavaScript オブジェクトを再利用することで、所要時間データの収集と Google アナリティクスへの送信を簡素化できます。

カスタム速度 - ウェブ トラッキング（ga.js）

はじめに

カスタム速度の設定

かかった時間の追跡

JavaScript リソースの読み込みにかかった時間のトラッキング

複数のカスタム速度の処理

カスタム速度を格納する JavaScript オブジェクトを作成する

保存されたカスタム速度を送信する

XMLHttpRequests のトラッキング

不正なデータの送信を避ける

サンプルレートのオーバーライドとデバッグ

その他のタイムイベントのトラッキング

カスタム速度 - ウェブトラッキング（ga.js）