Problem: We need to use Google Website Optimizer (GWO) to test different variations of an ASP.net contact form. We want to be able to add and remove form fields to test conversions based on the set of fields displayed. Additionally, the solution must meet some basic requirements:

• Use Valid XHTML
• Work in multiple browsers
• Fail gracefully when javascript is not available
• Work with client side and ASP.net server side validation
• Work within ASP.net master pages and user controls
• Track conversions that occur on the same page as the test
• Provide information that can be used in third party analytics software to track the results of variations throughout the site.

Issues: Some of our issues include:

• ASP.net post back model is causing the initial variation to be lost. After GWO writes the variation to the page, when a user clicks the submit button the page posts back to the server, when the response is returned to the browser the variation is lost and the original content is displayed.
• GWO section tag includes an orphaned tag which fails XHTML validation.

Solution: We use a variation of brilliant solution, “Server-Side Dynamic Section Variations” by Eric Vasilik on www.gwotricks.com.

We use most of Eric’s recommendations, but instead of the technique described in his Instrumenting Sections, we use JQuery to show and hide variations based on information queried from siteopt.js. You can find a list of some of the features of siteopt.js on VKI Studios. We are using the following siteopt.js method to find the variation number that is being tracked by GWO:

utmx( "variation_number", "Section Name" )

This method returns the section variation number, 0 through N-1 where N is the number of variations including the original for the given section. A value of undefined or 0 indicates the default or original variation.

To reduce page size, we are also looking at an AJAX based solution to serve the variations from a database or XML file. Below is the code for the JQuery solution (although regular javascript would work just as well).


//Inside javascript script tag
$(document).ready(function() {
//Grab the variation number from utmx
var Section1 = utmx("variation_number", "Sect1");
//Change variation based on variation returned from utmx
switch(Section1)
{
case undefined:
case 0:
//This is the original, just update hidden field value with "original"
$(".hidden").val("original");
break;
case 1:
//This is variation 1 so we use JQuery to show the section
//Just adding a field to the form, but could be used to also
//hide a section to replace it
$(".Sect1_Var1").show();
$('#Section_1').addClass('newfield');
$(".hidden").val("variation1");
break;
}
})


Well that’s it on this one. If you have questions, just ask. Actually, I have a trick I used with this to allow custom validation with a user controls added to a page multiple times to show variations of the same form. You can read about it in Validate Multiple Instances of an ASP.net User Control.

Keep Refactoring.

View more posts in: ASP.net  Google Website Optimizer  JavaScript  jQuery