Edit: The VWO Editor has undergone a complete makeover since this article was written. For updated usage of the features mentioned here please see the following articles in our knowledge base:
Introducing Advanced Code mode
Visual Website Optimizer has a great, full featured WYSIWYG editor (thanks to TinyMCE) for creating variations. So now you can edit your page section by clicking on them and select Edit operation from the operation menu. Take a look at the WYSIWYG editor below:
It was designed so that users can be saved from all the hassles of editing HTML and uploading images on their servers (WYSIWYG editor has integrated image uploader). However, some of our web designer users gave feedback that the WYSIWYG editor is limiting for them and they prefer swimming in HTML rather than avoiding it. So, what we have now provided an option of using a non-WYSIWYG editor (based on CodeMirror, thanks Eric for the suggestion). Any element’s HTML can be edited by selecting that element and choosing Edit HTML operation from the operation menu. Take a look how non-WYSIWYG editor looks like (for the same variation as above):
1. You want to test if including search keywords in the heading increases conversion rate. Here is how you will define a variation:
2. You have an eCommerce site with multiple products and you want to test the phrase “Buy this for $45″ v/s “Buy now for $45″. However the pricing is variable as it is dependent on the product. So, what you will do is to extract pricing from the control and inject it into the variation.
Control can be for a single product while designing. While the test is running, control will be whatever is present on the (product specific) page:
<div>Buy this for $45</div>
Variation to extract price and use it:
Lots of other examples can be given: greeting returning visitors, ad campaign specific message, testing latest comments or twitter box, etc. In a nutshell, where ever you need to test dynamic content you will find this API useful.
Limits are endless: the API gives you all freedom of server-side testing (where you generate different pages programmatically) with all the benefits of client-side testing (no page tagging, faster creation of tests, no involvement of IT resources, and best of all not touching site code at all).
Specifying CSS path of the sections in a Multivariate test
Imagine you have a page where the same element (say a button) is repeated at multiple different locations and you want to do an A/B test while making sure all buttons get the same variation. For example, take a look at the following page:
What if you want to test all “Buy” buttons at once (and that too without page tagging)? Also, remember featured products can change all the time so you can’t simply test the whole section. Here is how you will tackle the problem. Simply select one of the buttons and perform the required operation. Then you can change the CSS path of the created section to a generic one, like the following:
During the test, all elements matching this CSS expression will be replaced by the same variation. Using the same method (by giving a generic CSS expression) you can also present a consistent experience if elements being tested are on different website pages and at different locations.
Once you create a HEAD section, you can define variations using the same CodeMirror editor:
To summarize, advanced code provides following new functionality:
- Syntax highlighted editing of variations
- Inbuilt JQuery to be used in API
- Defining a section’s CSS path
The flexibility that Advanced Code mode provides for A/B and MVT testing is simply overwhelming. This mode enables all kinds of testing and should be a web designer or developer’s delight. We worked hard on this feature and would love to hear feedback from the designer and developer community. Do you like the new feature? What would you like to add to it?