and so should you...
Warning: if the words CSS, JavaScript or JQuery scare you, it is best not to read this alone. Rather, you should take help from your designer friend to help you understand how Visual Website Optimizer has become the most flexible A/B and MVT testing platform ever. Don’t worry: you still have the world’s easiest WYSIWYG interface for creating A/B and MVT tests. It is just that we have added new functionality to make VWO geek-friendly.
Introducing Advanced Code mode
Visual Website Optimizer has a great, full featured WYSIWYG editor (thanks to TinyMCE) for creating variations. 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, our some of the 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). To activate non-WYSIWYG editor, simply click on the checkbox on top right of the variation box and you will have a great code editor. Take a look how non-WYSIWYG editor looks like (for the same variation as above):
Like all CodeMirror awesomeness, it offers syntax highlighting (for HTML, styling and JavaScript), tab intendention, bracket pairing and unlimited undo-redo. Initial testers of this feature say that CodeMirror dramatically improves productivity as far as creation of A/B and Multivariate tests is concerned.
JavaScript API and beauty of JQuery
Advanced mode also gives you an API using which you can dynamically modify your variation before it is displayed on the page. Do you see “Insert JS API” button in the screenshot above? Clicking on it inserts the following JavaScript function in your variation:
As it is obvious from the code above, _vwo_api_section_callback[VWO_SECTION_ID] is a function that is called and the variation and control are passed as DOM elements. This allows you to modify the variation dynamically using your own custom JavaScript code and existing website content (control). Consider following use cases:
1. You want to test if including search keywords in the heading increases conversion rate. Here is how you will define a variation:
Welcome to MySite, you searched for keywords on search engine
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:
Control:
Buy this for $45
Variation to extract price and use it:
Buy now for $ something
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 elements
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. Using advanced mode, here is what you will tackle the problem. Simply select one of the buttons and change its CSS path 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.
Testing of style sheets and JavaScript: decoupling website content
Using the same advanced code mode, you can manually define a section which has no HTML content, therefore isn’t linked to any specific website content. Rather this type of section contains style, script or link tags that are injected in a page’s HEAD section. This way you can test different style sheets or themes (defined inline or linked externally) across your website. Or you can use it to have different visitor experiences triggered by variation-specific JavaScript or JQuery code. Here is how you create such sections:
Note that you can also define a normal HTML section this way (the same section that you can visually select).
Once you create a HEAD section, you can define variations using the same CodeMirror editor:
To summarize, advanced code provides following new functionality:
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?
Related posts:
RSS feed for comments on this post. TrackBack URL
Subscribe blog via RSS
Nice…I just started with jQuery…it’s good to see it in VWO. So this nice AJAX-thing would be possible?
vwo_$(‘#myid’).load(‘newcontent.html’);
But I assume the content would be displayed delayed this way…give it another try:
jQuery.ajax({
url: ‘newcontent.html’,
success: function(result) {
vwo_$(‘#myid’).html(result)
},
async: false
});
Comment by Steffen Binas — March 29, 2010 @ 8:51 pm
@Steffen: Yes, that should be possible. Try it out
Comment by Paras Chopra — March 29, 2010 @ 9:06 pm
[...] split test on dynamic content? NOTE: This feature has been deprecated in favor of new, simpler JavaScript API which won’t require any tagging. Details [...]
Pingback by How to create an A/B split test on dynamic content? « I love split testing – Visual Website Optimizer Blog — April 28, 2010 @ 7:53 pm
[...] maybe you are testing different sidebar location or testing different placement of ads. While with CSS testing this is anyway possible without the hassles of creating separate versions of your complete website, [...]
Pingback by A dead-simple trick to create site-wide A/B split tests « I love split testing – Visual Website Optimizer Blog — April 28, 2010 @ 7:54 pm
stuff like this that makes the internet so damn good
Comment by avery — May 3, 2010 @ 11:53 pm