The Next Generation of Visual Website Optimizer is launching in April 2014 See What's Coming

How to create an A/B split test on dynamic content?

Posted in A/B Split Testing, How To on March 5th, 2010

NOTE: This feature has been deprecated in favor of new, simpler JavaScript API which won’t require any tagging. Details soon.

In majority of cases A/B split testing is done on static content on a website. That is, the contents of control (default) and variations do not change during the test.  However, in some cases part of the werbsite contents (included in the test) may change during A/B test. Consider following A/B testing scenarios where your test includes:

  • Comments header in a blog post which specifies number of comments. Example: “Comments (2)”
  • Layout and design of sidebar widget where content is changed frequently
  • Product whose pricing can vary from time to time or same A/B test to be used on multiple different products with different names and pricing
  • Welcome message to the user: e.g. testing “Welcome John” v/s “How are you today, John” where text “John” changes with each user
  • Design and layout of Top products/Top links/Top anything where the content changes frequently

Traditionally you would have to use server side A/B testing or do complex programming from your backend to do A/B tests on such dynamic content. But with this newly released feature of Visual Website Optimizer, testing even most dynamic content becomes a piece of cake.

How to test dynamic content using Visual Website Optimizer

All you need to do is to add a small HTML code to dynamic parts of your website which is included in A/B or multivariate test. Following code (in bold below) needs to be added to the dynamic parts:

<any_html_element class = “vwo_dynamic_1” > any dynamic content </any_html_element>

Tagging the HTML with class=”vwo_dynamic_1” tells Visual Website Optimizer that the particular content is dynamic so when a variation is chosen, it must reflect the dynamic content in the variation correspondingly.

An example will help in making the concept concrete. Suppose you select the following for A/B testing.

  • Control: Comments (32)
    • HTML is <h1>Comments (<span class=”vwo_dynamic_1”>32</span>)</h1>
  • Variation 1: Comment here and share the discussion with other 32 people
    • HTML is <h1>Comment here and share the discussion with other <span class=”vwo_dynamic_1”>32</span> people</h1>
  • Variation 1: 32 people have replied so far
    • HTML is <h1><span class=”vwo_dynamic_1”>32</span> people have replied so far</h1>

Note that the number 32 can change according to number of comments, hence it is dynamic. So, to do A/B test there all you have to do is tag dynamic part (32) with class = “vwo_dynamic_1” in your code/template that generates HTML. Of course, you also need to add class = “vwo_dynamic_1” to specify where dynamic part will be displayed in the variations.

A couple of points to note:

  • You don’t have to limit the use of dynamic tag (class = “vwo_dynamic_1”) to span elements (like in the examples). It can be used on any HTML tag: images, tables, links, anything.
  • Visual Website Optimizer considers dynamic part as the tagged element and its contents. So any part included in the tagged element will be replaced in variations as well. For example, you can do dynamic A/B testing on:
    • Control: <b>Product of the day: <a href=”xyz.html” class=”vwo_dynamic_1”><img src=”xyz.jpg”/> XYZ</a></b>
    • Variation <b>Today’s Special: <a href=”xyz.html” class=”vwo_dynamic_1”><img src=”xyz.jpg”/> XYZ</a></b>
  • There are 10 different dynamic content tags that you can use per section. That is, in a section you can define multiple pieces of dynamic content with tags vwo_dynamic_1, vwo_dynamic_2, …, vwo_dynamic_10. As an example, following on above example you can have two dynamic pieces:
    • Control: <h1><span class=”vwo_dynamic_1”>03/02/2010</span> Product of the day: <a href=”xyz.html” class=”vwo_dynamic_2”><img src=”xyz.jpg”/> XYZ</a></h1>
    • Variation: <h1>Special product for <span class=”vwo_dynamic_1”>03/02/2010</span> <a href=”xyz.html” class=”vwo_dynamic_2”><img src=”xyz.jpg”/> XYZ</a></h1>

I hope I haven’t intimidated you with all that HTML code above. Though it may seem a bit complex, this small exercise of tagging the dynamic part of code increases the flexibility of A/B testing phenomenally.

Leave a comment here or email me at paras@wingify.com if you need help setting up a dynamic A/B test. Hope you like the new feature :)

Paras Chopra

CEO and Founder of Wingify by the day, startups, marketing and analytics enthusiast by the afternoon, and a nihilist philosopher/writer by the evening!

The Complete A/B Testing Guide

Know all that you need to get started:

  • What is A/B Testing?
  • Is it compatible with SEO?
  • How to start your first A/B test?
Show Me The Guide


2 Comments
David Crowther
March 5, 2010

Great stuff Paras! I’m looking forward to trying this new feature out.

~ David

Alexander Sticht
December 13, 2013

Thanks alot for the article about how to test dynamic urls, that is a life saver.

Leave a comment
Required
Required - not published


one + = 10

Notify me of followup comments via e-mail.

RSS feed for comments on this post. TrackBack URL

I ♥ Split Testing Blog


Stay up to date

Recent Posts

Write for this blog!

We accept high quality articles related to A/B testing and online marketing. Send your proposals to contribute@wingify.com