Timeouts and Callbacks

The Tracking Code captures visitor and event data and sends it over the Internet to the Center servers for processing. However web browsers and the Internet are not always reliable and there are a number of things that can go wrong. Tracking code could have been blocked by a browser AdBlock plugin, or network congestion could prevent our data from reaching Center.

If you are integrating with the Tracking Code programmatically, you should defensively handle these situations by attaching callbacks and timeouts when appropriate.

When Data Has Been Sent

When you invoke a function on the center object, it is ushered into the command queue to wait for the center.js to be downloaded. The main Tracking script is included asynchronously to prevent any performance impact on visitors loading your page. Once the script has loaded, the command queue is processed and executed.

NOTE Browser plugins such as adblockers may prevent the center.js script from ever being loaded. In these situations, the command queue may never be processed.

Data is sent to Center as a HTTP GET request via XMLHttpRequest (also known as AJAX). Once the data is accepted, we will notify a callback function, if provided, that the request is complete.

Callbacks

You can attach a callback function to the asynchronous center commands by including a callback property in the Center Command Options parameter. Here are examples on how to do that for the send and associate commands.

center('SiteName.send', 'kind', 'action', 'label', 0, {
  callback: function() {
    alert('Center has received the event.');
  }
});
center('SiteName.associate', 'email@domain.com', {
  callback: function() {
    alert('Center has received the association.');
  }
});

Timeouts

For some cases, you may want to have a timeout for the calls to center. If the script has been blocked by a browser plugin, or network congestion is heavy, your callback may never fire. In order to prevent a bad user experience for your visitor, you can add a timeout to your logic to continue standard operations.

For example, consider a use case where you want to intercept a <form> submission to send an event to center, then proceed with the submission. Roughly, you could accomplish that with this code:

var form = document.getElementById('my-form');
form.addEventListeneer('submit', function(evt) {

  function submitForm() {
    form.submit();
  }

  // in 2 seconds, submit the form regardless
  setTimeout(submitForm, 2000);

  // send a custom center event, then submit the form
  center('SiteName.send', 'form', 'submit', null, null, {
    callback: submitForm
  });

  // stop the submit event from continuing
  evt.preventDefault();
  return false;
});