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

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

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

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

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

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

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

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

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

送信されるデータ

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

場合によっては、現在のヒットのフィールドを 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 プラグインを使用する方法について説明します。