Experimenting with drop-in components
This topic introduces you to the concept of creating A/B experiments for drop-in components. You will learn how to create experiments, define variants, and track the performance of each variant.
Vocabulary
A/B experiment
A test that compares two or more pages to determine which page performs better.
Variant
A version of a page that is different from the original version. Variants are created to test different features, designs, or content.
UI label changes
Changes to the text or labels displayed on a page.
Control
The original version of the drop-in component that is used as a baseline for comparison.
Challenger
The variant of the drop-in component being tested.
Experimentation plugin
This plugin is included in the Commerce boilerplate (hlxsites/aem-boilerplate-commerce) provides all the features for running A/B experiments on your storefront pages.
About storefront A/B experiments
The Experimentation plugin provides all the features for running A/B experiments on your storefront pages. You can track conversions and experiment with different page variations quickly, using real user metrics.
The features include setting up A/B tests, serving different content to multiple audiences, and integrating marketing campaigns without collecting personal user data. Metadata markers and rules define which versions of a page visitors see. By default, tests do not require user consent and don’t require cookies.
Additionally, the plugin allows A/B experiments that can be run on mobile or desktop users and success can be tracked for each variant. You can also customize sample rates, data storage, and environment detection to suit your project. And with marketing campaigns, you can tailor experiences so visitors from a particular email or social link see unique content.
This plugin integrates seamlessly with the AEM boilerplate code, allowing experiments to be loaded early and with minimal impact.
For detailed development information, see https://github.com/hlxsites/aem-boilerplate-commerce/blob/main/plugins/experimentation/README.md.
Step-by-step
Creating an A/B experiment for a Commerce storefront page includes the following tasks:
- Create a variant page for the experiment.
- Add the experiment to the metadata block of the original page.
- Preview the experiment using the AEM Sidekick extension.
Create a variant page for the experiment
Duplicate the original page and make the changes you need to create a new page with the new content or features you want to use in the experiment. For most content changes, you can add those changes directly to the page/document. Examples include adding any of the AEM content blocks, additional commerce blocks (such as product recommendations) and more.
Add the experiment to the original page
Add the experiment to the metadata block of the original page by adding the experiment name and the URL to the experiment pages. The following example shows how to add an experiment to the cart drop-in block using the metadata block on the cart page. The keys are:
- Experiment: The name of the experiment. The Experimentation plugin uses this name to track this experiment.
- Experiment Variants: The URLs to the variant/challenger pages in the experiment. The Experimentation plugin uses these URLs to set up the experiment.
Preview the experiment
Use the AEM Sidekick Preview button to preview the experiment and compare the original page with the variant page. Make sure that the changes are displayed correctly and that the experiment is functioning as expected. You can also share the experiment URL with stakeholders for feedback before launching it to a wider audience.
Next steps
Now that you understand how to create A/B experiments for drop-in components, you can start experimenting with different variants to optimize the performance of your storefront.