TrackEventOptions

If the Tracker uses the default Queue, it's possible to leverage it for sending synchronous events.

This is done best-effort though; if an event, or batch, takes too long, the Tracker will bail out and stop waiting.

How long to wait and how often to poll an Event's status can be configured by providing an options object options to any of our tracking hooks, functions or to the tracker.trackEvent method itself.

info

These options are useful for outbound or application-reloading Events, such as interactions that will redirect to a different application.

Normally the Tracker would be unloaded as the browser's session gets re-created. When that occurs it may or may not have been able to send the last interaction to the Collector. A little delay can help to track those interactions.

tip

These options are not needed for applications reloading themselves or an old-school website with actual anchors. The LocalStorage Queue can suffice for that. When the Tracker re-initializes in the newly reloaded Application, it will pick whatever events were left from the previous session.

Options​

typedefault value
optionalwaitForQueuetrue | WaitForQueueParameters
optionalflushQueuetrue | 'onTimeout'

WaitForQueueParameters​

waitForQueue can be set to simply true to use some sensible defaults, as shown in the following table.
Alternatively an object can be specified to define either the polling interval, the timeout or both.

typedefault value
optionalintervalMstrue | WaitForQueueParameters100 ms
optionaltimeoutMstrue | 'onTimeout'TrackerQueue batch delay * 2 (2000 ms)

Usage​

Scenario: synchronous PressEvent callback with default options
import { makePressableContext } from "@objectiv/tracker-core";
import { usePressEventTracker } from "@objectiv/tracker-react";

const trackPressEvent = usePressEventTracker();

const trackSynchronousPressEvent = usePressEventTracker({
  options: {
    waitForQueue: true
  }
});

// We can use a regular callback and specify the necessary options ad-hoc for this button
<Button
  onClick={async () => {
    await trackPressEvent({
      options: {
        waitForQueue: true
      }
    });
  }}
/>

// Or use the pre-configured callback to keep event handlers leaner
<Button
  onClick={async () => {
    await trackSynchronousPressEvent();
  }}
/>
Scenario: flush queue after the event is sent
import { makePressableContext } from "@objectiv/tracker-core";
import { usePressEventTracker } from "@objectiv/tracker-react";

const trackPressEvent = usePressEventTracker();

const trackSynchronousPressEvent = usePressEventTracker({
  options: {
    flushQueue: true
  }
});
<Button
  onClick={async () => {
    await trackSynchronousPressEvent();
    document.location.href = 'https://www.google.com';
  }}
>
  Leave the website
</>
Scenario: customize polling and max timeout
import { makePressableContext } from "@objectiv/tracker-core";
import { usePressEventTracker } from "@objectiv/tracker-react";

const trackSynchronousPressEvent = usePressEventTracker({
  options: {
    waitForQueue: {
      intervalMs: 500,
      timeoutMs: 5000
    }
  }
});
<Button
  onClick={async () => {
    await trackSynchronousPressEvent();
  }}
>
  Please be very patient
</>

See also