A/B Test

Who is this content for?

This content is for those who do not yet have their site on deco.cx and want to utilize the A/B Testing Feature headlessly, without migrating technology.

If you already have your site on deco.cx, the creation of A/B Testing is explained in this other documentation.

How to start?

1 - Creating a deco.cx project

2 - Understanding A/B Testing

3 - Event Configuration

4 - Monitoring Results

5 - Go Live

Creating a deco.cx project

Access the site creation link.

Choose the SDK template.

deco.cx sdk Template

After creation, the project is not yet in any team, you can associate it with a team using the Save site to your team.

Understanding A/B Testing

With the site created and associated with a team, search for abTest in the search bar.

Select the option shown in the image:

AbTest Search

You should see a block like this:

AbTest Block

Then, define a name for your test and configure the variants.

Variants

Variants are code versions that will execute randomly for a portion of your audience.

Here, you have the option to add JavaScript and/or CSS to customize your user's experience.

Examples:

JavaScript to run

document.querySelector("#my-button").textContent = "Buy!"

CSS to run

#my-button { color: red !important; }

Event Configuration

Event configuration is essential for A/B Testing; now, you will see how to create a specific event for your test.

In the same Variant configuration screen, find the Tracked Elements field and click to add one.

You should see something like:

Tracked Elements

Now, simply find the CSS selector of the element you want to create an event for and choose the event name.

Monitoring Results

You can monitor the results of your test with the metrics you created directly through the deco.cx panel.

Important: To monitor the results of the Test, an upgrade to your team's plan may be necessary, check at Pricing.

1 - Click on the Experiments tab.

2 - Click on Create New Experiment.

3 - Create an experiment with the same name you used for your test.

4 - Monitor the results.

To understand more about the results screen, look at this documentation.

Go-Live

Before deploying the code to production, fill in a field called plausibleDomain with the same domain registered in the Analytics tab of your deco.cx dashboard.

To apply all this to your site:

  • Click on Publish
  • Insert this script into the <head> of your site:
<script src="https://yoursite.deco.site/abTest.js" defer="true"></script>

Next Steps

Features that are not yet available, but we are already working to release:

  • Traffic Configuration

In A/B testing for deco.cx sites, it is already possible to define the amount of traffic; we are working to implement this in the SDK as well.

  • Parallel Tests

In A/B testing for deco.cx sites, it is already possible to run more than one test at the same time; we are working to implement this in the SDK as well.

  • A/B/C/... Tests

We are working to implement the possibility of tests with more than two versions.

Was this page helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum
Continue reading