Skip to main content

Tracking - Page View

We already have built in automated page view tracking. Most of the time you don't have to do anything, it's automatically taken care of. However, there are cases where the default behavior might not be desirable though. We provide 2 ways to opt in to change.

Custom page identifier​

By default we use document.title for page identifier. This sometimes preferable, but in case where you want to use string constant, you can specify .pageViewId property in your page component

import { TravelokaPageComponent } from '@traveloka/core';

const Page: TravelokaPageComponent = props => {
  return <div />;
};

Page.pageViewId = 'flight-search';

Logic-based page identifier​

We notice that some page rely on some logic before determining which pageViewId to use in some page. In that case you can choose between useTrackPageView hook and usePageViewTracker hooks. But first, you need to disable automated page view tracking by specifying false in .pageViewId

import { TravelokaPageComponent } from '@traveloka/core';

const Page: TravelokaPageComponent = props => {
  return <div />;
};

Page.pageViewId = false;

useTrackPageView​

This is the recommended approach to send page view tracking manually. You can determine pageViewId inside getInitialProps and pass it directly to the hooks

import { TravelokaPageComponent, useTrackPageView } from '@traveloka/core';

const Page: TravelokaPageComponent = props => {
  useTrackPageView(props.pageViewId);
  return <div />;
};

Page.pageViewId = false;

Page.getInitialProps = ctx => {
  if (ctx.query.mode === 'new') {
    return { pageViewId: 'new' };
  }

  return { pageViewId: 'old' };
};

usePageViewTracker​

This is the last resort that you can use if for some reason you can't use any of the previous method. Instead of sending tracking data if the hooks is called, it returns a function to send the tracking so you can determine when you want to send the data

import { TravelokaPageComponent, usePageViewTracker } from '@traveloka/core';
import { Button } from '@traveloka/web-components';

const Page: TravelokaPageComponent = props => {
  const trackPageView = usePageViewTracker();

  function handlePress() {
    trackPageView(pageViewId);
  }

  return <Button onPress={handlePress} text="Press to send page view" />;
};

Unless you really know what you're doing, don't use this API. Please consult with marketing team before performing stunt like this.

Tracking page view from other domains​

usePageReferralTracker​

You can use usePageReferralTracker to track a page view event wehen you page is visited from another domain (e.g. Google).

import {
  TravelokaPageComponent,
  usePageReferralTracker,
} from '@traveloka/core';
import { Button } from '@traveloka/web-components';

const Page: TravelokaPageComponent = props => {
  const pageReferralTracker = usePageReferralTracker();

  React.useEffect(() => {
    pageReferralTracker({
      page_category: seoPageCategories.BUS_NAME,
      content_owner: 'bus',
    });
  }, []);

  return <>Hello</>;
};