A/B Testing API (Beta)

React Hooks @pack/hydrogen

We offer hooks that you can integrate into your storefront to determine which test and variant your visitors are assigned to. This functionality is useful for sending event data to your analytics platform to track your metrics or leveraging this information for code-based testing.

useAbTest()

The useAbTest returns information about the test that the user is currently bucketed into.

  interface Test {
    id: string;
    handle: string;
    testVariant: {
      id: string;
      handle: string;
    };
  }

  import {useAbTest} from '@pack/hydrogen';
  ...

  export function Hero() {
    const abTest = useAbTest();

    return (
      <div>
        I am on this test {abTest.handle}

        {
          abTest.testVariant.handle === 'variant-b' ? (
            <p> I am variant b</p>
          ) : (
            <p> I am variant control</p>
          )
        }
      </div>
    );
  }

useAbTestId()

The useAbTestId returns the id of the test that the user is currently bucketed into.

import {useAbTestId} from '@pack/hydrogen';
...

export function Hero() {
    const testId = useAbTestId();
    return (
      <div>
        My test ID is: {testId}
      </div>
    );
}

useAbTestHandle()

The useAbTestHandle returns the handle of the test that the user is currently bucketed into.

import {useAbTestHandle} from '@pack/hydrogen';
...

export function Hero() {
    const testHandle = useAbTestHandle();
    return (
      <div>
        My test handle is: {testHandle}
      </div>
    );
}

useAbTestVariantId()

The useAbTestVariantId returns the id of the variant of the test that the user is currently bucketed into.

import {useAbTestVariantId} from '@pack/hydrogen';
...

export function Hero() {
    const testVariantId = useAbTestVariantId();
    return (
      <div>
        My curent variant ID is: {testVariantId}
      </div>
    );
}

useAbTestVariantHandle()

The useAbTestVariantHandle returns the handle of the variant of the test that the user is currently bucketed into.

import {useAbTestVariantHandle} from '@pack/hydrogen';
...

export function Hero() {
    const testVariantHandle = useAbTestVariantHandle();
    return (
      <div>
        My curent variant handle is: {testVariantHandle}
      </div>
    );
}

Manually bucketing yourself into a test

If you would like to bucket yourself into a test to validate that everything is working, you can add these query parameters to the URL.

Note, the only requirement is that you have both a test_* and variant_* parameter included so we know what variant and test to display.

It is possible to use different combinations of the parameters, such as:

• ?test_handle=ZZZ&test_variant_handle=YYY
• ?test_id=ZZZ&test_variant_id=YYY
• ?test_handle=ZZZ&test_variant_id=YYY
• ?test_id=ZZZ&test_variant_handle=YYY