Getting started

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.

Placeholders file

A Google Sheets file (placeholders) or a SharePoint Excel file (placeholders.xlsx) where you change and maintain your storefront’s labels, which includes localization. See the Placeholders file for more information.

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.

Add experiment to metadata block

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.

Preview the experiment

Experimenting with UI label changes

You can use the Experimentation plugin to test different UI label variations in your storefront. This allows you to experiment with the labels used by drop-in components to determine which versions perform best.

To include label changes in your experiment, create a variant placeholders file, which defines the localized labels used by drop-in components. Update the metadata block of the variant page to reference the path to the variant file. The Experimentation plugin tracks the performance of each variant, helping you identify which labels and text drive better results.

Step-by-step

Following the steps above, create a new experiment. Adding UI label changes to your experiment includes the following tasks:

Create a variant placeholders file.
Add the path to the variant placeholders JSON file in the metadata block of the variant page.
Preview the experiment using the AEM Sidekick extension.

Create a variant placeholders file

Create a new variant placeholders spreadsheet file and include only the labels you want to override. The storefront uses the variant placeholders file to override the original labels. The variant placeholders file should include the following columns:

Key: The key for the label you want to override. This key should match the key used in the original placeholders file.
Value: The new value for the label you want to override. This value should be the new label text you want to use in the experiment.

Add new label values

Add the path to the variant placeholders JSON file in the metadata block of the variant page

Update the metadata block of the variant page by adding the URL to the variant placeholders file. The following example shows how to override labels in the cart drop-in component by updating the metadata block of a variant cart page. The keys are:

Placeholders: Include two URLs. First, the path to the original placeholders file, and second, the path to the variant placeholders file (on a new line). The Experimentation plugin uses these URLs to configure the experiment.

Add new placeholders overrides

Preview the experiment

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.