Google アナリティクスにデータを送信する

JavaScript 測定スニペットの最後の行では、ga() コマンドキューに send コマンドを追加して、pageview を Google アナリティクスに送信しています。

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

データを送信するオブジェクトは、コードの前の行で作成がスケジュール設定されたトラッカーです。ここで送信されるデータはこのトラッカーに保存されたデータです。

このガイドでは、Google アナリティクスにデータを送信するさまざまな方法と、送信するデータを制御する方法について説明します。

ヒット、ヒットタイプ、Measurement Protocol

トラッカーによって Google アナリティクスにデータが送信されることを、ヒットの送信と呼びます。すべてのヒットには、必ずヒットタイプがあります。Google アナリティクス タグが pageview タイプのヒットを送信します。他のヒットタイプには screenview、event、transaction、item、social、exception、および timing が含まれます。このガイドでは、すべてのヒットタイプに共通するコンセプトとメソッドについて概要を説明します。ヒットタイプの個別のガイドは、左側のナビゲーションの「一般的なユーザーの接点を測定する」で確認できます。

ヒットは、クエリ文字列としてエンコードされたフィールドと値のペアからなる HTTP リクエストで、Measurement Protocol に送信されます。

analytics.js が使用されているページを読み込む際に、ブラウザのデベロッパー ツールを開いておくと、送信されるヒットを [Network] タブで確認できます。google-analytics.com/collect に送信されたリクエストを探してください。

送信されるデータ

ヒットが Measurement Protocol に送信される際は、その時点で保存されている有効な Measurement Protocol パラメータのすべてのフィールドが、トラッカーによって送信されます。たとえば、title や location などのフィールドは送信されますが、cookieDomain と hitCallback は送信されません。

場合によっては、現在のヒットのフィールドを Google アナリティクスに送信して、後続のヒットを対象外にすることができます。これは、たとえば、イベントヒットの eventAction フィールドと eventLabel フィールドが現在のヒットにのみ関連する場合に役に立ちます。

現在のヒットのフィールドのみを送信するには、ヒットを引数として send メソッドに渡します。後続のすべてのヒットでフィールド データを送信するには、set メソッドを使用してトラッカーを更新してください。

send メソッド

トラッカーの send メソッドは、トラッカー オブジェクト自体から直接呼び出すか、send コマンドを ga() コマンドキューに追加することで呼び出します。多くの場合、トラッカー オブジェクトへの参照は利用できないので、Google アナリティクスにトラッカー データを送信する際は、ga() コマンドキューの使用をおすすめします。

ga() コマンドキューを使用する

send コマンドを ga() コマンドキューに追加する際のシグネチャは、次のとおりです。

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

上記のとおり、hitType パラメータ、...fields パラメータ、fieldsObject パラメータで指定した値は、現在のヒットについてのみ送信されます。これらの値がトラッカー オブジェクトに保存されたり、後続のヒットで送信されたりすることはありません。

send コマンドで渡されるフィールドのいずれかが、すでにトラッカー オブジェクトに設定されている場合でも、トラッカーに保存されている値ではなく、コマンドで渡される値が使用されます。

send コマンドを呼び出すには、hitType を指定する必要があります。指定するタイプによっては、他のパラメータも必要になる場合があります。詳細については、左側のナビゲーションの「一般的なユーザーの接点を測定する」で個別のガイドをご覧ください。

send コマンドの最も簡単な使用方法は、fieldsObject パラメータを使用してすべてのフィールドを渡すことです。この方法はどのヒットタイプでも利用できます。次の例をご覧ください。

ga('send', {
  hitType: 'event',
  eventCategory: 'Video',
  eventAction: 'play',
  eventLabel: 'cats.mp4'
});

利便性を高めるため、一部のヒットタイプでは、よく使用されるフィールドを send コマンドの引数として直接渡すことができます。たとえば、上の「event」ヒットタイプの send コマンドは次のように書き換えることができます。

ga('send', 'event', 'Video', 'play', 'cats.mp4');

各ヒットタイプで引数として渡すことができるフィールドの一覧については、send メソッド リファレンスの「パラメータ」をご覧ください。

名前付きのトラッカーを使用する

デフォルトのトラッカーの代わりに名前付きのトラッカーを使用している場合は、コマンド文字列で名前を渡すことができます。

次の send コマンドは、「myTracker」という名前のトラッカーで呼び出されます。

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

トラッカー オブジェクト自体で更新する

トラッカー オブジェクトの参照情報をすでに取得している場合、そのトラッカーの send メソッドを直接呼び出すことができます。

ga(function(tracker) {
  tracker.send('event', 'Video', 'play', 'cats.mp4');
});

ヒットが送信されたタイミングを確認する

場合によっては、Google アナリティクスにヒットが送信されたタイミングを確認して、その直後に処理を行う必要があります。よくあるのは、ユーザーが現在のページから離れる特定の接点を記録する場合です。多くのブラウザでは、ページの表示が終了するとすぐに JavaScript の実行が停止されるため、ヒットを送信する analytics.js コマンドが実行されない場合があります。

たとえば、ユーザーがフォームの [送信] ボタンをクリックしたことを記録するために、Google アナリティクスにイベントを送信するとします。多くの場合、[送信] ボタンをクリックするとすぐに次のページの読み込みが始まり、ga('send', ...) コマンドは実行されません。

この問題を解決するには、イベントを検出して、ページの表示終了を抑止し、通常どおりにヒットを Google アナリティクスに送信します。ヒットの送信が完了したら、プログラム処理でフォームを再送信します。

hitCallback

ヒットの送信が完了したタイミングで通知を受け取るには、hitCallback フィールドを設定します。hitCallback は、ヒットが正常に送信されるとすぐに呼び出される関数です。

次の例では、フォームのデフォルトの送信アクションを抑止して、Google アナリティクスにヒットを送信してから、hitCallback 関数を使用してフォームを再送信する方法を示しています。

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

タイムアウトを処理する

上の例は意図どおりに動作しますが、重大な問題が 1 つあります。原因に関わらず analytics.js の読み込みに失敗した場合に、hitCallback 関数が実行されないという問題です。hitCallback 関数が実行されないと、ユーザーがフォームを送信できなくなります。

サイトの重要な機能を hitCallback 関数内に含める場合は、必ずタイムアウト関数を使用し、analytics.js ライブラリの読み込みが失敗した場合に備えてください。

次の例では、上のコードを変えてタイムアウトを使用しています。ユーザーが [送信] ボタンをクリックしてから 1 秒経過しても hitCallback が実行されない場合は、フォームが再送信されます。

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Creates a timeout to call `submitForm` after one second.
  setTimeout(submitForm, 1000);

  // Keeps track of whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where `hitCallback` fires normally.
  var formSubmitted = false;

  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: submitForm
  });
});

サイト全体の複数の場所でこのパターンを使用する場合は通常、タイムアウトを処理するユーティリティ関数を作成すると便利です。

次のユーティリティ関数は、入力として関数を受け取り、新しい関数を返します。返された関数がタイムアウト（デフォルトのタイムアウトは 1 秒です）の前に呼び出されると、タイムアウトがクリアされ、入力された関数が呼び出されます。タイムアウトまでに呼び出されなかった場合でも同様に、入力された関数が呼び出されます。

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

これにより、すべての hitCallback 関数を簡単にタイムアウト付きでラップできるようになり、ヒットの送信に失敗した場合、または analytics.js ライブラリが読み込まれなかった場合に、サイトを確実に意図どおりに動作させることができます。

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

別のトランスポート メカニズムを指定する

デフォルトでは、analytics.js は HTTP メソッドを使用し、ヒットを最適な方法で送信できるトランスポート メカニズムを選択します。トランスポート メカニズムには、'image'（Image オブジェクトを使用）、'xhr'（XMLHttpRequest オブジェクトを使用）、'beacon'（新しい navigator.sendBeacon メソッドを使用）の 3 つがあります。

最初の 2 つのメソッドには、前のセクションで説明した問題があります（ページの表示終了時に多くの場合、ヒットが送信されない）。一方 navigator.sendBeacon メソッドは、この問題を解決するために作成された新しい HTML 機能です。

ユーザーのブラウザで navigator.sendBeacon がサポートされている場合、transport メカニズムとして 'beacon' を指定できます。この場合、ヒット コールバックを設定する必要はありません。

次のコードでは、ブラウザが対応している場合にトランスポート メカニズムが 'beacon' に設定されます。

ga('create', 'UA-XXXXX-Y', 'auto');

// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');

次のステップ

測定するユーザーの接点の種類によっては、複雑な実装が必要になる場合があります。ただし多くの場合、こういった実装はすでに開発されており、analytics.js プラグインとして利用できます。次のガイドでは、ga() コマンドキューで analytics.js プラグインを使用する方法について説明します。