Currently there are two mechanisms to create an A/B test in Evolv by combining the values you'd like to apply as a single variation. You can do this with the two standard actions, below. 

  1. CSS Stylesheet
  2. Custom JavaScript 

As long as all of the variations are created under a single element and single action, Ascend will run the experiment as an A/B or A/B/N.

CSS Stylesheet:

This is the recommended approach to creating your A/B test when possible. 

Example: Changing the background, removing nav, changing, product name, price font size and color, call to action background color.

You can do this is by using the custom CSS Stylesheet action.

Step 1: Select an element and change the selector to 'body' in the Ascend wireframe editor

Step 2: Click on the CSS Stylesheet action

Step 3: Change the values of each element by defining the selector and associated CSS values

Step 4: Preview your changes in the editor


Custom JavaScript:

Example: A/B test a combination of H1 content changes combined with H2 content changes.

Although you can use the HTML replace action we recommend avoid this action unless it’s necessary because of the potential experiment side effects outlined here. The best practice is to use the JavaScript action and apply the changes to each element (H1 and H2) in the value.

Step 1: Select the parent element of the H1 and H2 (you can also target the “body”)

Step 2: Click on the element you just saved

Step 3: Select the JavaScript action

Step 4: Apply the changes in JavaScript

Step 5: Preview your changes in the editor

Did this answer your question?