Skip to main content

How To Implement Hardcoded Meta Data on Specific Page

Lark Doc on How to Implement W2A Meta Data: https://traveloka.sg.larksuite.com/wiki/GEDpwaOeQidoXzkPeYzl8MqKgSb

How To Add W2A Meta Data to Your Page​

First Way (Static Props Method)​

  1. On your page i.e. packages/content/app-mobile/pages/promotion/index.tsx add these code:
YourPageComponent.w2aMeta = {
  getPageCategory: () => 'brand-promotion-homepage',
  getPageDeeplink: ({ hotelId }, query) => `traveloka://hotel/detail/${hotelId}?cur=${query?.cur ?? 'IDR'}`,
  getAlternateDeeplink: ({ hotelId }) => `traveloka://hotel/${hotelId}`,
}

Or if you only want to add getPageDeeplink you can use:

YourPageComponent.w2aMeta.getPageDeeplink = ({ hotelId }) =>
  `traveloka://hotel/detail/${hotelId}`;

Alternate Way (Page Props Method)​

Use this method if your page deeplink requires SSR response in order to construct it.

return {
  ...pageProps,
  props: {
    ...resolvedProps,
    rawAppContext: reconstructRACWithW2AMeta(resolvedProps.rawAppContext, {
      pageDeeplink,
      alternateDeeplink,
      pageCategory: 'hotel_detail',
    }),
  },
};

Note: If you pass the W2A Meta using the Page Props Method, then it will be prioritized and the Static Props Method will be used as fallback. Note 2: It is possible to have a hybrid approach which is to use Page Props to pass pageDeeplink and alternateDeeplink, but use Static Props for pageCategory.

W2A Meta Data Desc

  1. pageCategory (string) / getPageCategory (function (pathname: object, query: object) => string)

    1. for campaign query context for W2A

  2. alternateDeeplink (string) / getAlternateDeeplink (function (pathname: object, query: object) => string)

    1. If it is Smart Banner, then it will be the primary fallback redirection link for redirection behind AppsFlyer Studio.

    2. If it is not Smart Banner (other W2A Components), it will be the primary redirection link for W2A components.

  3. deeplink (string) / getPageDeeplink (function (pathname: object, query: object) => string)

    1. If it is Smart Banner, then it will be the secondary fallback redirection link behind AppsFlyer Studio and alternate_deeplink.

    2. If it is not Smart Banner (other W2A Components), it will be the primary fallback redirection link for W2A components behind alternate_deeplink.

Prioritization of Redirection in W2A

Smart Banner​

  1. Deeplink from AppsFlyer Studio
  2. alternate_deeplink source
  3. page_deeplink source
  4. deep_link prop provided from useSingleInstallLinkV2
  5. Content Resource AppInstallBanner.deeplinkFallback as last fallback source

Other W2A Components that use the useSingleInstallLinkV2 hook​

  1. alternate_deeplink source
  2. page_deeplink source
  3. deep_link prop provided from useSingleInstallLinkV2
  4. Content Resource AppInstallBanner.deeplinkFallback as last fallback source

API Reference

RFC: https://traveloka.sg.larksuite.com/wiki/LBoGw32ioioQDBklYTplUtyigbb

W2AMetaContext (@traveloka/core)​

Exports from packages/core/app-install/W2AMetaContext.tsx.

W2AMetaProvider​

React context provider that makes resolved w2a meta values available to all descendant components of the current page. Populated automatically by withTravelokaApp — you do not need to render this yourself.

<W2AMetaProvider value={{ pageDeeplink: 'traveloka://...' }}>
  {children}
</W2AMetaProvider>
PropTypeDescription
valueW2AMetaThe resolved w2a meta object to provide to descendants.

useW2AMeta()​

Returns the full resolved W2AMeta object for the current page. All fields are optional and may be undefined if not configured for that page.

const { pageDeeplink, alternateDeeplink, pageCategory } = useW2AMeta();

Returns: W2AMeta

Convenience hook returning just pageDeeplink from W2AMetaContext.

const pageDeeplink = usePageDeeplink(); // string | undefined

Returns: string | undefined

Convenience hook returning just alternateDeeplink from W2AMetaContext.

const alternateDeeplink = useAlternateDeeplink(); // string | undefined

Returns: string | undefined

usePageCategory()​

Convenience hook returning just pageCategory from W2AMetaContext.

const pageCategory = usePageCategory(); // string | undefined

Returns: string | undefined

W2AMetaUtils (@traveloka/core)​

Exports from packages/core/app-install/W2AMetaUtils.tsx.

reconstructRACWithW2AMeta(rawAppContext, w2aMeta)​

SSR utility that merges w2a meta fields into rawAppContext.seoData. Use this in getServerSideProps when your deeplink values depend on SSR API responses and cannot be derived statically from route params.

Values passed here take precedence over the static Page.w2aMeta config on a per-field basis.

// Inside getServerSideProps, after fetching your page data:
return {
  ...pageProps,
  props: {
    ...resolvedProps,
    rawAppContext: reconstructRACWithW2AMeta(resolvedProps.rawAppContext, {
      pageDeeplink: 'traveloka://hotel/detail/12345',
      pageCategory: 'hotel_detail',
    }),
  },
};
ParameterTypeDescription
rawAppContextTravelokaRawAppContextThe existing rawAppContext from resolvedProps.
w2aMetaPartial<W2AMeta>Fields to inject. Only provided fields override the static config; omitted fields still fall back to Page.w2aMeta.

Returns: TravelokaRawAppContext — a new object with seoData merged with the provided w2a fields.

Types​

W2AMeta​

type W2AMeta = {
  /** Renders as <meta property="page_deeplink" content="..."> */
  pageDeeplink?: string;
  /** Renders as <meta property="alternate_deeplink" content="..."> */
  alternateDeeplink?: string;
  /** Renders as <meta property="page_category" content="..."> */
  pageCategory?: string;
};

W2AMetaConfig​

Attached as Page.w2aMeta static property. All three getters receive (params, query) where params is the route path params and query is the raw URL query string object.

type W2AMetaConfig = {
  getPageDeeplink?: (
    params: Record<string, string>,
    query: Record<string, string | string[]>
  ) => string;
  getAlternateDeeplink?: (
    params: Record<string, string>,
    query: Record<string, string | string[]>
  ) => string;
  getPageCategory?: (
    params: Record<string, string>,
    query: Record<string, string | string[]>
  ) => string;
};