Tracking - Internal

When launching new features, we want to be able to track how user uses our app throughout the screen. When they do, we'll send tracking data to our internal API (owned by data team).

To help with that, we provide you with useTracker hooks that returns a function. It accepts 2 arguments, first one being event name that you want to track. The 2nd argument is object to store any additional data.

import React from 'react';
import { useTracker } from '@traveloka/core';

function Page() {
  const [numPress, setNumPress] = React.useState(0);
  const track = useTracker();

  function handlePress() {
    setNumPress(numPress => numPress + 1);
    track('button.press', { numPress: numPress + 1 });
  }

  return <Button onPress={handlePress} text="Press to track" />;
}

In case of A/B test, tracking is already handled automatically, so you don't need to do anything. You'll only need this if you want to add custom tracking to your page / component.

Send tracking data immediately

If you're planning to send tracking data before navigation (by intercepting press/click event), you can call .send() method and wait for its promise to resolve before navigating user to new screen. Because this could potentially blocks navigation, the promise will resolve automatically after 300ms regardless of tracking API timeout

await track(eventName, data).send();
window.location.assign('/');

If you want longer timeout period (we really don't recommend this), you can pass maxWaitMs options to .send method

await track(eventName, data).send({ maxWaitMs: 1000 });

In the future, we'll use sendBeacon for more reliable mechanism, so you don't need to call .send anymore