Most A/B testing software considers a click a conversion, and sometimes that's correct. But Preferr gives you the power to decide when a conversion should be recorded.

You may have an entire landing page that you're A/B testing and want to know if your visitors spend at least X amount of time on the page or if they navigated to a certain page.

ThePreferr.convert() function allows you to create a conversion for your test at exactly the right time.

Preferr.convert() takes 1 argument:

• abTestId string - the ID of the A/B Test that you want to convert REQUIRED

You may be wondering why you don't pass the variant ID to Preferr.convert(). Because an A/B Test's children are rendered randomly, it's impossible to know ahead of time which child will render. This would prevent you from recording conversions based on events that happen outside of an A/B Test component, like in a useEffect() hook. Preferr will find the rendered child for you based on the abTestId

Preferr.convert() doesn't have to be called inside an A/B test component!

You may want to record a conversion for a form submission once an API responds with data successfully, rather than just on the click of the submit button. Instead of just assuming that a conversion occurred because the form submit button was clicked, which is a big assumption since a validation or server error could occur if the form has missing or incorrect data, you can capture a true conversion event.

In this example, we're converting whenever the Button component is clicked, which is probably the most common type of conversion.

<ABTest
  abTestId="abt_e8ed892b652c835bb785988aa4464fbf"
  variantAId="abv_323823556cd3a6453f8e54c18d65f41c"
  variantBId="abv_9d407d4c470ced71f53677ec89732c1c"
>
  <Button
    onClick={() => {
      Preferr.convert("abt_e8ed892b652c835bb785988aa4464fbf");
      setCounter(counter + 1);
    }}
  >
    Check it out!
  </Button>
  <Button
    onClick={() => {
      Preferr.convert("abt_e8ed892b652c835bb785988aa4464fbf");
      setCounter(counter - 1);
    }}
  >
    Take a look!
  </Button>
</ABTest>

In this example, we're recording a custom conversion when the Button component is hovered.

<ABTest
  abTestId="abt_e8ed892b652c835bb785988aa4464fbf"
  variantAId="abv_323823556cd3a6453f8e54c18d65f41c"
  variantBId="abv_9d407d4c470ced71f53677ec89732c1c"
>
  <Button
    onClick={() => {
      setCounter(counter + 1);
    }}
    onMouseLeave={() => Preferr.convert("abt_e8ed892b652c835bb785988aa4464fbf")}
  >
    Check it out!
  </Button>
  <Button
    onClick={() => setCounter(counter - 1)}
    onMouseLeave={() => Preferr.convert("abt_e8ed892b652c835bb785988aa4464fbf")}
  >
    Take a look!
  </Button>
</ABTest>

In this example, we're recording a custom conversion when the rendered component has been on the page for 10 seconds.

useEffect(() => {
  setTimeout(() => {
    Preferr.convert("abt_e8ed892b652c835bb785988aa4464fbf")
  }, 10_000);
}, []);

<ABTest
  abTestId="abt_e8ed892b652c835bb785988aa4464fbf"
  variantAId="abv_323823556cd3a6453f8e54c18d65f41c"
  variantBId="abv_9d407d4c470ced71f53677ec89732c1c"
>
  <p>
    Dolore dolor proident tempor nostrud sunt qui exercitation commodo ex duis duis pariatur sint incididunt
  </p>
  <p>
    Eiusmod ipsum nulla exercitation sunt duis dolore.
  </p>
</ABTest>