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 firstname.lastname@example.org if you need help setting up a dynamic A/B test. Hope you like the new feature