Variations

A variation is one version of your page that takes part in an experiment. Every experiment compares at least two variations: the baseline (the unchanged page) and one or more changed versions.

The Variations cardCopy Anchor Link

The Variations card on the experiment page ("WHAT changes do you want to test?") lists all variations:

The baseline "Original"Copy Anchor Link

When you create the first variation of an experiment, ABlyft also creates the variation Original automatically. It has the type Unchanged and is marked as Baseline. All other variations are compared against the baseline in the results.

If you delete the baseline, the oldest remaining variation becomes the new baseline.

Variation typesCopy Anchor Link

Create a variationCopy Anchor Link

1. On the experiment page, click new variation in the Variations card.
2. Step General: enter a Name (ABlyft suggests Variation #1, Variation #2 and so on) and optionally a Description. For the first variation of an experiment, the note explains that Original is created automatically.
3. Step Type: choose how you want to build the variation. Click an option to read when to choose it.
4. Click Create variation.

What happens next depends on the type:

• Visual Editor: your example URL opens in the editor. See Visual editor.
• All other types: the variation settings open, where you enter the redirect URL, your code or the Shopify details.

When you create or delete a variation, ABlyft distributes the experiment's traffic evenly across all variations again. Check Traffic Split & Distribution in the experiment settings if you need an uneven split.

Edit a variationCopy Anchor Link

Every row has an Edit button. For a Visual Editor variation it opens the editor, for all other types it opens the variation settings. The menu next to the button offers:

SettingsCopy Anchor Link

The variation settings are grouped into sections:

CodeCopy Anchor Link

The Code section contains JS code, CSS code and Reset JS code, plus Settings from Visual Editor: the JSON generated by the Visual Editor, required for the type Visual Editor. Edit it only if you know what you are doing.

What each field does, the Code Helper, the run order, the 32,768 character limit and the code of the whole experiment (Experiment Level Codes) are described in Custom JavaScript.

Redirect variationsCopy Anchor Link

With the type Redirect, visitors in the variation are sent to another URL. This is useful for split URL tests, where the variation is a completely different page.

Example: an experiment runs on https://example.com/overview, and the variation should show https://example.com/overview2.

1. Create a variation of the type Redirect.
2. In the section Redirect to a different URL, enter the Redirect URL. This is either a full URL (https://...) or a query string that starts with ?, to test URL parameters.
3. Keep Preserve query parameters checked (default) if the parameters of the current URL should be passed on. If both URLs contain the same parameter, the value of the redirect URL wins.
4. Save.

The visitor is redirected as early as possible and ABlyft hides the page meanwhile to avoid flicker. Loop protection and other details: redirect.

Multi-page (funnel) experimentsCopy Anchor Link

Sometimes one experiment needs different changes on different pages, for example a banner on the homepage and changed texts on product pages. You do this with one experiment, several pages and variation code that checks where it is running.

Any entry page. The visitor sees the changes on every targeted page:

1. Attach all relevant pages to the experiment (Pages card), for example "Homepage" and "Product Pages".

2. In the variation code, branch by page:

   Copy Text

   const path = window.location.pathname;
   
   if (path === '/') {
     // Code for "Add banner"
   } else if (path.startsWith('/product/')) {
     // Code for "Text changes inside boxes"
   }

   Instead of the path you can also check a CSS class, whether an element exists or a data layer value.

Specific entry page. The visitor should see the product page changes only after having seen the homepage banner:

1. In the variation code of the homepage, store a flag when the change is applied:

   Copy Text

   window.localStorage.setItem('homepage_banner_added', 'true');

2. Create an additional page, for example "Product Pages (after homepage banner)", with the product page URL rule. Under Advanced Targeting, enter a condition that checks the flag:

   Copy Text

   return window.localStorage.getItem('homepage_banner_added') === 'true';

3. Attach this page to the experiment instead of the plain product page, and keep the product branch in your code.

Delete a variationCopy Anchor Link

Open the menu of the variation and click Delete. ABlyft redistributes the traffic automatically and, if you deleted the baseline, makes the oldest remaining variation the new baseline. Check the traffic split afterwards. Remember that an experiment needs at least one variation to be started, see Before you can preview or start.

Next stepsCopy Anchor Link