これまでGoogle Analyticsでクリックイベントなどを計測するとき、特に深く考えずにga('send', 'event', ...);というコードでコールバックを待たずに実行していたのだけど、それなりに取りこぼしがあったらしい。

そこで、調べていたらコールバックを待って取りこぼしを回避する方法以外に、Beacon APIを使った送信などについて知ることができた。

コールバックを待ってから次の処理に移る

一般的な方法であるコールバックを待ってから次の処理をする方法について。

ga関数の最後の引数に渡すオブジェクトの中にhitCallbackという名前で関数を入れておくと、計測が済んだあとに関数が呼ばれる。

ga('send', 'event', {
  // ...
  hitCallback: function() {
    // 計測が済んだあとに呼ばれる
  }
});

ただ、このままだと計測が完了しないと関数が呼ばれないので以下のようにして一定時間を超えたら計測を無視して進んでしまうようにすると良い。（_はlodashを想定）

var callback = _.once(function() {
  // 計測が済んだあと、もしくは一定時間後に呼ばれる
});

setTimeout(callback, 3000);

ga('send', 'event', {
  // ...
  hitCallback: callback
});

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

ちなみにGTMのdataLayerを使用する場合はeventCallbackという名前で関数を渡す。

dataLayer.push({
  // ...
  eventCallback: function() {
    // 計測が済んだあとに呼ばれる
  }
});

GTMではeventTimeoutをサポートしているため、一定時間を超えたら計測を無視するといったコードを書く必要はない。

dataLayer.push({
  // ...
  eventCallback: function() {
    // 計測が済んだあと、または計測が済んでいないが3000ミリ秒経過すると呼ばれる
  },
  eventTimeout: 3000
});

#GTMTips: Use eventTimeout With eventCallback

Beacon APIを使用して送信する

Beacon APIが使用できる環境でのみ計測できればよいという場合には、transportの値にbeaconを指定する。するとBeacon APIを使って計測が送られることになる。

ga('send', 'event', {
  // ...
  transport: 'beacon'
});

あるいはsetですべての送信をbeaconを指定すれば一括で設定できる。

ga('set', 'transport', 'beacon');

transportには他にimageやxhrが指定できるようだ。

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

Autotrack - GitHub

Google Analyticsのチームが製作している便利なライブラリ。似たようなものをすでに作ってしまっていたのだけど、こちらを使うようにした方がなにかと良いはず。