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.
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:
You should see a block like this:
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:
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.