gtag.js を使用して Google アナリティクスにデータを送信する

このページでは、gtag.js のコマンドを使ってサイトから Google アナリティクスにデータを送信する方法を説明します。

event コマンドでデータを送信する

ウェブページにグローバル スニペットを追加後、event コマンドを使って Google アナリティクスにデータを送信します。たとえば次の event コマンドを使って、ユーザーが Google アカウントを使ってログインしたことを示します。

gtag('event', 'login', {'method': 'Google'});

event コマンドについて詳しくは、API リファレンスをご覧ください。

グループとプロパティにデータをルーティングする

測定情報の種類によって、送信先の Google アナリティクス プロパティ ID を使い分けることができます。また、同じ種類のトラッキング情報を複数のプロパティ ID に送信することも可能です。プロパティはグループにまとめることができ、データのルーティングもグループ単位で行います。

たとえば次のコード例は、sign_in イベントを「agency」グループにルーティングする方法を示したものです。このグループには Google アナリティクス プロパティが 2 つ含まれています。

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

グループ化とデータのルーティングの詳細

イベントが送信されたときに通知を受ける

イベント発生後にすぐに対応できるよう、Google アナリティクスへのイベント送信が完了した時点で把握したいケースがあります。よくあるのは、ユーザーが現在のページから離れる特定の接点を記録する場合です。多くのブラウザでは、次のページの読み込みが始まった時点で JavaScript の実行が停止されるため、gtag.js の event コマンドを実行するタイミングがない可能性があります。

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

この問題を回避するには、イベントの発生を検出して次のページの読み込みを停止させ、まず Google アナリティクスへのイベント送信を行います。イベント送信が完了後、プログラムによって自動的にフォーム送信を再開します。

イベント コールバック関数を実装する

イベントが正常に送信されるとすぐに呼び出されるイベント コールバック関数を実装します。

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

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

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

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

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

タイムアウトに対処する

この方法にはひとつ欠点があります。gtag.js ライブラリの読み込みに失敗すると、イベント コールバック関数が実行されず、ユーザーがフォームを送信できなくなることです。

サイトの重要な機能をイベント コールバック関数内に含める場合は、gtag.js ライブラリの読み込みに失敗したときのために、必ずタイムアウト関数を使用してください。

次の例は、上記のコードを改良してタイムアウト処理を組み込んだものです。ユーザーが [送信] ボタンをクリックしてから 1 秒経過してもイベント コールバック関数が実行されなければ、無条件でフォームが再送信されます。

// 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);

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function 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.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

上のパターンをサイト全体で使用する場合は、タイムアウト処理のためのユーティリティ関数を作成しましょう。

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

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

これにより、すべてのイベント コールバック関数をタイムアウトでラップできるようになり、イベントの送信に失敗した場合や、gtag.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.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

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

デフォルト状態では、ヒットの送信に使用する最適な HTTPS メソッドとトランスポート メカニズムを、gtag.js が自動的に選択します。その際の選択肢は次の 3 つです。

  • 'image'（Image オブジェクトを使用）
  • 'xhr'（XMLHttpRequest オブジェクトを使用）
  • 'beacon'（navigator.sendBeacon メソッドを使用）

最初の 2 つの方法には、前のセクションの説明と同様に、別ページへの遷移が始まるとヒットが送信されない問題があります。navigator.sendBeacon メソッドでは、ヒット コールバックを設定せず、非同期的にヒットをウェブサーバーに送信することができるため、この問題は発生しません。

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

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});