Skip to main content

@traveloka/core/abtest

Also see: /docs/guides/ab-test/

Traveloka A/B test module. It's used in withTravelokaApp (for the normal NextJS-based flow) and ABTestMiddleware (for the middleware-based flow). (You can search for ../abtest string in core to verify this.)

Unless you are using the middleware-based flow, A/B test treatment is calculated in the client-side to ensure the server res.

Important files​

  • The main context file

    • packages/core/abtest/ABTestContext.tsx

  • Utilities

    • packages/core/abtest/useABTest.ts — Exposes A/B test data to the component (only for one namespace). Also handles devtool override and tracking.
    • fetchABTestConfig — called to fetch A/B test data (by the context AND the middleware).
    • fetchExperimentConfig — called to fetch A/B test data from Experiment API

  • Special folders

    • packages/core/abtest/abtasty — third-party A/B testing script to load on your page (https://www.abtasty.com/)
    • packages/core/abtest/abtestClient — interfaces the www repo with @traveloka/abtest-client

How this module works​

NextJS-based flow​

  • withTravelokaApp initializes ABTestProvider, passing abTestNamespaces by reading the from the Page.abTestNamespaces property exposed by yourt Page component.
  • ABTestProvider provides A/B test config data, which is null during server rendering.
  • On the client side, useEffect is triggered and it fetches the actual A/B test data

Middleware-based flow​

  • See packages/core/server/ABTestMiddleware.ts
  • It is only run on certain paths, so there is no performance penalty for the paths that do not use A/B testing.

Experiment API​

  • Use fetchExperimentConfig to get experiment config
  • It requires getServerSideProps