HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityOptimizely GitHubOptimizely NuGetLog In

A/B testing

This topic describes how to create variations for a number of page elements (blocks, images, content, buttons, and form fields) with the A/B testing add-on.

A/B testing is an add-on which lets editors create variations for a number of page elements (blocks, images, content, buttons, and form fields), then compare which variation performs best. It measures the number of conversions from the original (control) versus the variation (challenger). The one generating the most conversions during the test period is promoted to the design for that page. A/B testing has several predefined conversion goals, and you can also create custom conversion goals.

It requires no extra license and is installed via the EPiServer.Marketing.Testing NuGet package.

See also Delivery & Experimentation for information on the Optimizely delivery and experimentation platform for websites, mobile apps, smart devices, and back-end code. With this, you can A/B test everything from search results and promotions, to recommendations and payment options. You can also A/B test user interface variations, to optimize and personalize website messaging.

Technical limitation

The underlying tool used by A/B testing to render preview images of the changes under test has the following technical limitations:

  • Media queries defined on link elements are ignored
  • Media queries defined on import rules are ignored

This limitation results in the styles, which would ordinarily be restricted to particular types of media, being applied to screen media and therefore appearing in the preview images that are generated.

However, the functionality respects media queries that are defined directly within the CSS. So, a workaround for these situations is to wrap the existing contents of the linked CSS source file in a print media query.

For example, let's imagine that a file named print.css is linked to a page with a media attribute for print.

<link src="print.css" rel="stylesheet" media="print" />

And imagine that print.css currently contains the following:

html, body { margin: 0; }
    img { display: none; }

Applying such a workaround would require you to simply wrap the existing statements in a media query:

@media print {
        html, body { margin: 0; }
        img { display: none; }

The attribute can remain on the element as well, if that is preferable for other technical concerns.