Introduction to Layout & Design Tool

Comprehensive Understanding of AB Tests

Lets learn about AB tests, adding, editing, comparing, archiving, removing, and deploying AB tests within our platform. We will learn about How to add and edit AB tests, How to compare, archive, remove and take AB-tests live, How to test updates made in AB tests on live pages

How to add and edit AB-tests

AB tests can be created using one of two methods, both achieving the same objective of duplicating preferred layouts.

  • Users may select the "Add AB test" button located at the end of each layout.
  • Or alternatively, duplicate the layout via the actions menu situated in the top right corner of any layout.

How to Name AB-tests

AB tests are initially named as "Untitled Test." To customize test details and specify how it will be executed on the live site, users can utilize the fields available on the right-hand side.

  • Ticket: Here users can enter the Ticket URL being used to work on the update
  • Should it go live?: This field allows you to mark this layout to be taken live with our Bulk take live feature which is used to take several layouts live at the same time. (More on that topic below).
  • Title: Customize the title of the layout
  • Query Variable & Value: Customize the parameters of the b-test
    • The parameters of the b-test help you label your testing sites.
  • Google Analytics Tracking with UTM Campaigns: We can also track the performance of each layout with our Google Analytics integration. Add the UTM parameters here.
When the user selects any element, the right-hand side fields will change and show relevant fields to be customized for any specific element. The user will also be able to swap between this general view and check the element’s code by selecting the code view.

Actions Menu Button

On the top right corner of each layout, we have an Actions Menu button. Once clicked, a drop-down menu will show and we can select from a variety of options. You can compare, duplicate, archive, remove, or set your test site live.

Actions Menu

  • Compare: You can compare your A/B test with your current live site or one of your testing sites. To change the compared layouts, select the dropdown arrow at the right side of the layout´s name. The differences will show in green and red on the layouts
  • Duplicate: Create a copy of any layout using this function
  • Archive: You can archive your layout when you no longer need it or want to reference it later
  • Set As Live: Set your beta site live when you are ready to test your changes
  • Remove: When testing is complete, you can remove the page.

Testing AB tests on live pages

Once desired changes have been implemented in the new layout (AB test), it's crucial to test them on live sites to assess their effectiveness. Utilize the Query Parameters mentioned earlier by appending them to the end of live page URLs. Remember to add the parameter “/?” before the query parameters. Add a UTM link to the URL you want to test, and it will show the updates made in the AB-test.

Table of Contents