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

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

はじめに

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

たとえば、人気のある JavaScript ライブラリの読み込みに時間がかかりすぎる、特定のユーザー向けのサイト エクスペリエンスが低下する、などです。

カスタム速度を使用すると、Google アナリティクスで一定期間をトラッキングするネイティブな方法を提供して、こうした疑問に答えることができます。

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

カスタム速度の設定

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

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

パラメータは以下を表します。

パラメータ 必須 まとめ
category string 必須 レポートを容易にするために、カスタム速度のすべての変数を論理グループに分類するための文字列。 たとえば、特定の JavaScript ライブラリの読み込みにかかった時間をトラックしている場合は、jQuery の値を使用できます。
variable string yesトラッキング対象のリソースのアクション名を示す文字列。たとえば、jQuery JavaScript ライブラリの読み込みに要した時間を追跡する場合は、JavaScript Load の値を使用できます。Javascript LoadPage Ready Time など、これらのカテゴリに共通のイベントのタイミングを追跡するために、複数のカテゴリで同じ変数を使用できます。
time number 必須 Google アナリティクスへのデータ送信に要した時間。ミリ秒単位で表します。jQuery ライブラリの読み込みに 20 ミリ秒かかった場合は、20 の値を送信します。
opt_label string なし レポートでカスタム速度を視覚化する際の柔軟性を高めるために使用できる文字列。ラベルを使用して、同じカテゴリと変数の組み合わせ別のサブテストに重点を置くこともできます。たとえば、Google コンテンツ配信ネットワークから jQuery を読み込んだ場合は、Google CDN の値が使用されます。
opt_sampleRate number なし 数値ヒットが Google アナリティクスに送信されるユーザーの割合を手動でオーバーライドする数値。 デフォルトでは、一般的なサイト速度データの収集と同じ数に設定されており、一定の割合のユーザーに基づいています。たとえば、すべてのユーザーの _trackTiming ヒットをトラッキングする場合、値 100 を使用します。 各ヒットは、セッションあたりの一般的なヒット数の上限(500 件)にカウントされます。

トップへ戻る

トラッキング時間

_trackTiming メソッドを使用する場合、time パラメータでミリ秒単位の時間を指定します。したがって、この期間をキャプチャするコードを記述するのはデベロッパーの責任です。最も簡単な方法は、期間の開始時にタイムスタンプを作成し、期間の終了時に別のタイムスタンプを作成する方法です。この 2 つのタイムスタンプの差を算出することで、所要時間を算出できます。

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

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 関数を使用して、myCallback 関数を 200 ミリ秒で呼び出します。コールバック関数が実行されると、新しい 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 アナリティクス レポートでは各リソースを区別できません。

どちらの問題も、JavaScript オブジェクトにタイミングと _trackTiming パラメータを格納することで解決できます。

カスタム速度を保存する 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 変数に簡単にアクセスできます。startTimeTrackTiming オブジェクトの一部になったので、このオブジェクトを loadJs 関数からコールバック関数に渡す方法が必要です。

この問題を解決するには、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 送信メソッドを変更して、このチェックを実行できます。

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 アナリティクスに送信できます。