Run your first A/B test

In this tutorial, you will set up an A/B test on a hero section. You will track CTA clicks with a goal event, create an experiment with two variants, and learn how to read the results.

Prerequisites

Before you start, make sure you have:

• A Croct account with a workspace and application set up.
• A project with the home-hero slot set up and rendering content. If you have not done this yet, start by creating a slot.

Track the conversion goal

Before launching the experiment, set up the event that measures success. You will track when a user clicks the hero CTA button.

Update the hero component you created earlier to fire a goal completed event on the CTA click:

import croct from '@croct/plug';
async function renderHero() {  const {content} = await croct.fetch('home-hero');
  document.querySelector('#hero-title').textContent = content.title;  document.querySelector('#hero-subtitle').textContent = content.subtitle;
  const button = document.querySelector('#hero-cta');
  button.textContent = content.button.label;  button.href = content.button.link;
  button.addEventListener('click', () => {    croct.track('goalCompleted', {      goalId: 'hero-cta-click',    });  });}
renderHero();

This event feeds the experiment's performance dashboard, allowing you to compare conversion rates across variants.

Create the experiment

Now set up the experiment in the admin app:

1. Open the experiences page and create a new experience targeting all users.

2. Click the Slot tab and select the home-hero slot.

3. Click the Experiment tab and give it a name, for example "Hero CTA copy test".

4. Select the goal hero-cta-click that you created in the last step, and determine the percentage of eligible users who will participate in your experiment. In this case, set it to 100%.

5. Set up two variants and split traffic evenly between them (50/50):

   • Variant A: Get started
   • Variant B: Start your free trial

6. Open de Content tab and define the content for each variant:

   • Variant A: Click Options () and copy the content from the slot.
   • Variant B: Click Options (), copy the content from the slot, and change the CTA label to "Start your free trial".

7. Click Publish and launch the experience.

Try it out

Verify that the experiment is serving both variants:

1. Open an incognito tab

   Load your application and note which button label you see.

2. Open another incognito tab

   Each tab starts a new session, so the experiment randomly assigns a variant.

3. Compare

   After a few attempts, you should see both "Get started" and "Start your free trial".

Read the results

Once the experiment has collected enough data:

1. Open the experiment dashboard

   Go to your experiment and click the Overview tab.

2. Check the performance per goal

   Look at the Performance per Goal widget. Select the hero-cta-click goal to compare conversion rates between variant A and variant B.

3. Decide the winner

   When the experiment reaches statistical stability, and one variant outperforms the other, you can declare a winner. Then, you can apply the winning content to the experience and stop the experiment.