Skip to main content

Tracking - External

External tracking refers to the third-party tracking libraries that we have integrated to our app (usually handled by the marketing team), e.g. Facebook, Criteo, Bing, GTM.

We want to lazily load those tracking codes, so they are only loaded when they are used. We have built the ExternalTrackingManager context and utilities for this purpose, which will be explained below.

Normal usage​

Import the useExternalTracker hook (for the "track" event), OR the useExternalPageView hook (for the "page view" event). Note that not all library has the pageView function, so please know what you are doing.

The arguments it received varied depending on the thirdPartyKey given (check the individual handlers inside packages/core/tracking/external/trackingHandler). For example, the call could look like:

  • track('FACEBOOK', eventName, spec, ctx, options) — for thirdPartyKey = 'FACEBOOK'
  • track('GTM', eventName, spec) — for thirdPartyKey = 'GTM'
import React, { useEffect } from 'react';
import { ExternalTrackingManager, useExternalTracker, useExternalPageView } from '@traveloka/core';

function Page() {
  return (
    // Already done for you in `TravelokaApp`
    // you no longer need to wrap your page with `ExternalTrackingManager`
    <ExternalTrackingManager product='experience'>
      <Layout />
    </ExternalTrackingManager>
  );
}

function Layout() {
  const track = useExternalTracker();
  const pageView = useExternalPageView();

  useEffect(() => {
    pageView('FACEBOOK');
    track('GTM', 'PAGE', { ... });
  }, []);

  ...
}

External usage​

note

Consider this an escape hatch.

Normally, we recommend you to use the useExternalTracker or useExternalPageView hook, but when adopting an existing code, it might not be feasible to drill the track or pageView function returned by useExternalTracker or useExternalPageView to your function.

Therefore, we enable you to use ExternalTrackingManager anywhere using externallyUseExternalTrackingManager by passing a TrackingCtx object, containing at least country, clientInterface, and product.

const { track } = externallyUseExternalTrackingManager({
  country,
  clientInterface: 'desktop',
  product: 'flight',
});

track('GTM', 'TRACK', { ...data, event_name: 'hotel_home_visited' });