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

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:

1. Create a variant page for the experiment.
2. Add the experiment to the metadata block of the original page.
3. Preview the experiment using the AEM Sidekick extension.
4. Make code changes for experiments, if necessary.

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

Code changes for experiments

Some experiments, such as creating variants of labels with the placeholders file, require code changes to a drop-in component’s initializer code. For example, by making the following additions to the default cart.js initializer, you can read the metadata block from the cart page and identify when a variant is being delivered, then apply an alternate placeholders file.

Alternate placeholders file with different labels

/* eslint-disable import/no-cycle */
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-cart/api.js';
import { initializeDropin } from './index.js';
import { fetchPlaceholders } from '../aem.js';

await initializeDropin(async () => {

  // Identify experiment page (Challenger 1)
  const isVariantPlaceholder = document.body.classList.contains('experiment-cart001') && document.body.classList.contains('variant-challenger-1');

  // Fetch labels from an alternate placeholders file
  const labels = await fetchPlaceholders(isVariantPlaceholder ? '/drafts/marketer' : undefined);

  const langDefinitions = {
    default: {
      ...labels,
    },
  };

  return initializers.mountImmediately(initialize, { langDefinitions });
})();

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.