In a typical A/B split test, you test whether replacing an image, headline or button with a variation increases conversion rate. Using Visual Website Optimizer, this is fairly simple. You select the element, create a variation and then VWO replaces the selected element with the variation. Simple and sweet.
However, you may also want to test additional content on a website. That is, test a new element that doesn’t exist on your (control) webpage. For example, if you want to test if adding a new widget to the sidebar decreases bounce rate, how are you going to do it? Remember that you cannot simply do a traditional replacement A/B test because widget doesn’t yet exist. You have two options for such a test: either add an empty HTML tag (such as <div></div>), then simply select that empty tag and create a variation. Or, you can create a completely new page with a widget and do a split URL test.
Unfortunately, both of these options require you to modify your website in some way. What if you don’t want to involve IT team? One of our users, Karsten Lund, faced exact same problem and we helped him do this test without touching the website code or creating any new pages (note that the website already has a common VWO tag that allows one to create any number of tests from VWO interface without touching the website code).
First, here is the control page looks like:
Karsten wanted to test if adding a navigation menu on the left would increase downloads and sales. He was also open to removing the right sidebar as the left one will serve that purpose. To do this A/B test, we used Visual Website Optimizer’s Advanced code mode and added a CSS/JS section in the test. Then we created a variation with following JQuery and CSS code:
HTML content for new section
What the code does is this:
Note that all the code above is inserted in the <head> section of the page, that’s why the container element remains hidden and we wait for document to load before adding the left menu and showing the container element again.
Here is how the variation with left menu looks like:
It works perfectly and we are quite happy that we could help Karsten in setting up this test. Benefit of taking this approach was that Karsten did not have to involve SlideShop’s developers for making changes into the website so the turnaround time for getting the test up and running was quick (less than an hour).
Hopefully you like the technique, if you have any other such tips and tricks for Visual Website Optimizer, do let us know.
RSS feed for comments on this post. TrackBack URL
Great post, thanks for sharing! I’ve got some similar navigation tests I can’t wait to try out and this has provided excellent inspiration.
Comment by Nick Taylor — December 1, 2010 @ 3:53 am