OK.. so that last example was how scripts need to be set up for A/B testing (testing two different web pages which are variations of the same page created to see what differences might get more conversions)
Multivariate testing involves variations within a single web page - changes to the single web page we want to test elements within (rather than two (or more) different entirely separate pages). Here’s what one would do to perform a multivariate test:
1. Choose the page you would like to test
Examples of potential test pages could be your homepage or a product detail page.
2. Choose your page sections
Your marketing team should decide which sections of your test page you would like Website Optimizer to vary. Some examples of potential test page sections could be headlines, images, testimonials, buttons, and promotional copy.
3. Review desired page sections with your technical team
Before you can begin implementing the experiment on your site, your marketing and technical teams will need to agree on which sections to test. Once you have chosen your page sections, proceed to Step 2 so that you or your webmaster can copy the Website Optimizer JavaScript tags and add them to your test page’s source code.
4. Identify your conversion / success / goal page
This is an existing page on your website that users reach after they’ve completed a successful conversion. For example, this might be the page displayed after a user completes a purchase, signs up for a newsletter, or fills out a contact form.
First we have to again put a control script and a tracking script into our single page, again, the control script goes at the top, the tracking script goes in at the bottom before the close of the </body> tag, again here would be the example of our
http://www.example.com/webpage.html we want to perform multivariate testing for:
<html>
<head>
<script>
function utmx_section(){}function utmx(){}
(function(){var k=’3211406635’,d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+’=’);if(i>-1){var j=c.indexOf(’;’,i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f(’__utmx’),xx=f(’__utmxx’),h=l.hash;
d.write(’<sc’+’ript src="’+
’http’+(l.protocol==’https:’?’s://ssl’:’://www’)+’.google-analytics.com’
+’/siteopt.js?v=1&utmxkey=’+k+’&utmx=’+(x?x:’’)+’&utmxx=’+(xx?xx:’’)+’&utmxtime=’
+new Date().valueOf()+(h?’&utmxhash=’+escape(h.substr(1)):’’)+
’" type="text/javascript" charset="utf-8"></sc’+’ript>’)})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Buy This Bicycle!</title>
</head>
<body>
<h1>Buy This Bicycle!</h1>
<img src="images/bike1.jpg" width="400" height="300" alt="Bicycle Image" border="0"/>
<p>
Are you new to mountain biking or looking for your first full suspension bike?
<a href="thankyou.html">Learn more about your options »</a>
</p>
<script type="text/javascript">
if(typeof(_gat)!=’object’)document.write(’<sc’+’ript src="http’+
(document.location.protocol==’https:’?’s://ssl’:’://www’)+
’.google-analytics.com/ga.js"></sc’+’ript>’)</script>
<script type="text/javascript">
try {
var pageTracker=_gat._getTracker("UA-8560821-1");
pageTracker._trackPageview("/3211406635/test");
}catch(err){}</script>
</body>
</html>
Find the sections (e.g. headline, a graphic, a button, a section of copy, news, etc.) in your single web page we are experimenting with - e.g.
http://www.example.com/webpage.html - that you’d like to vary as part of your experiment. Surround the source code of each section of your original content with the following tags and give each section a unique name, like this:
Paste the following immediately before the content you would like to vary:
<script>utmx_section("Insert your section name here")</script>
Paste the following immediately after the content you would like to vary:
</noscript>
Don’t worry about the unbalanced </noscript> tag, [WEBSITE_OPTIMIZER] is designed to work with this when it serves variations of your content.
For example, if you’d like to test a headline, your section might look like this:
<script>utmx_section("Headline")</script>
<h1>Buy This Product!</h1>
</noscript>
Here’s how our full
http://www.example.com/webpage.html page would look with a few multivariate noscript tags added to sections we want to test:
<html>
<head>
<script>
function utmx_section(){}function utmx(){}
(function(){var k=’3211406635’,d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+’=’);if(i>-1){var j=c.indexOf(’;’,i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f(’__utmx’),xx=f(’__utmxx’),h=l.hash;
d.write(’<sc’+’ript src="’+
’http’+(l.protocol==’https:’?’s://ssl’:’://www’)+’.google-analytics.com’
+’/siteopt.js?v=1&utmxkey=’+k+’&utmx=’+(x?x:’’)+’&utmxx=’+(xx?xx:’’)+’&utmxtime=’
+new Date().valueOf()+(h?’&utmxhash=’+escape(h.substr(1)):’’)+
’" type="text/javascript" charset="utf-8"></sc’+’ript>’)})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Buy This Bicycle!</title>
</head>
<body>
<script>utmx_section("Headline")</script>
<h1>Buy This Bicycle!</h1>
</noscript>
<script>utmx_section("Image")</script>
<img src="images/bike1.jpg" width="400" height="300" alt="Bicycle Image" border="0"/>
</noscript>
<p>
Are you new to mountain biking or looking for your first full suspension bike?
<script>utmx_section("Call to action")</script> <a href="thankyou.html">Learn more about your options »</a></noscript>
</p>
<script type="text/javascript">
if(typeof(_gat)!=’object’)document.write(’<sc’+’ript src="http’+
(document.location.protocol==’https:’?’s://ssl’:’://www’)+
’.google-analytics.com/ga.js"></sc’+’ript>’)</script>
<script type="text/javascript">
try {
var pageTracker=_gat._getTracker("UA-8560821-1");
pageTracker._trackPageview("/3211406635/test");
}catch(err){}</script>
</body>
</html>
NOW.. .here’s the thing doing this for every single element you may want to test/move around is a pain in the (you know), so instead of exactly following this method, I credit
James Paden for the following info/CSS technique for implementing multivariate tags for GWO (Google Web Optimizer).
Ignore the strange noscript script, that’s just the way GWO (Google Website Optimizer) works. Once you’ve implemented the script, you then upload alternative versions of your HTML to the GWO website. GWO will insert the alternative versions of the HTML randomly to your visitors to test which versions perform better. You can test page layout, button color/sizes, ads, textual content, navigation structure or anything else you can imagine.
The problem occurs when you want to test dynamic pages or the same section of HTML across multiple pages. For example, I want to test a different product page layout across my site (because no single product gets enough traffic to reliably traffic). I cannot insert HTML into the GWO script because the HTML will be different on every page.
The secret (which many of you may have already figured out, but it took me a while so hopefully this post will help some of you) is to insert CSS or Javascript ONLY into your GWO script. View GWO as a rotating CSS/JS file, not as actual HTML. This may involve using CSS to hide or change various aspects of your page and I’ve even used GWO to alter the HTML structure via Javascript on pages I did not have full control over. Before, your code might have been:
<script>utmx_section("Your First Test")</script>
<h1>Large Product Title</h1>
<img src=’bluebutton.gif’>
</noscript>
Now you can do the below and apply the same test to every product:
<script>utmx_section("Your First Test")</script>
<style type=’text/css’>
.producttitle {
font-size: 24px;
}
</style>
<script type=’text/javascript’>
document.getElementById(’addtocartbutton’).src = ’bluebutton.gif’;
</script>
</noscript>
This is a very simple example, but the power of this concept is that you can now test large sections of your entire site. You can use CSS to move switch the positions of content sections or hide all the product prices for your category pages (early testing shows this actually improves the conversion rates on one of my sites…).
You still need to put a conversion script on the
http://www.example.com/thankyou.html page like we did in the A/B testing example as a final step (see the example code in my first reply post please) which goes at the bottom of the page before the </body> close tag.
OK... so now it should be (hopefully) clear why it would be important within MODx to be able to handle the multivariate CSS tagging - is there a way within MODx or a MODx module to make this work easier?
I’ve (obviously) never tried either an A/B or multivariate GWO test through MODx --- but definately I (and my clients) will want (and should want) to do these tests to optimize conversions ($).
Thanks so
very much for any/all help and replies folks!!
MODX Staff