Google アナリティクスのイベント送信のコールバックはフォールバック処理が必要

gtag.js でGoogle アナリティクスにイベントを送信したあとのコールバックで次の処理に進もうとする場合、必ずフォールバックの処理を付けておく必要がある。

gtags.js が正しく読み込まれなかった場合に、イベント送信のコールバックが呼ばれないためだ。単純にネットワークエラーで読まれない場合もあれば、ブラウザのアドオンによりブロックされて読まれない場合もある。ちなみに、 Google Analytics Opt-out Browser Add-on でオプトアウトした場合は、イベントが Google に送信されないだけでコールバックは実行される。

方法は、タイムアウトに対処する(公式ドキュメント) にあるように、単純に setTimeout でコールバックが未呼び出しだった場合に呼ぶようなコードを設定すればOK。

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