How to Switch CSS Files using Google Web Site Optimizer

How to Switch CSS Files using Google Web Site Optimizer

I've used a couple of different multivariate testing tools. I don't like any of them. Google Web Site Optimizer is my favorite so far, but there are some serious drawbacks with it too.

A split and multivariate testing tool allows you to run tests on a web page and optimize that page's components to achieve your goals. Those goals may be to sell a product, get an email address, or some other action.

A split test simply tests two version of a page. You make two pages, maybe varying one thing such as the headline text, body copy, or photos. The testing software randomly servers one page to some visitors and the other page to others visitors and tracks orders, signups, etc. from each page so that you can determine which page works or converts better.

A multivariate testing tool switches out various parts of a web page with different versions of that component. For example you may setup the headline as "variable" to be tested, a photo as a variable to be tested, the background color, the size of the order button, etc. For each variable create a few variations. In other words you may have 5 headlines, 3 photos, 4 background colors, and 3 buttons sizes you want to test. The software randomly creates a version of the page by choosing one variation of each variable and tracks how it converts. Some software automatically serves the combinations that convert better more often.

Google Web Site Optimizer does both split and multivariate testing. But because it runs from Google's servers, it uses client-side JavaScript to perform the switching and tracking. If it installed on your server, it could use server-side scripting and have more powerful capabilities. Client-side simply means that the code for making Google Web Site Optimizer display the various versions of the variables you're testing runs on the PC of the person looking at your web page. Server-side means that code runs on the web server running your web site before that server sends the page across the internet to the person looking at your web page.

The way Google alters the displayed web page is by using JavaScript document write commands. You tag the sections of the page you want to test with special tags and give each a unique name so that the Google JavaScript code can find them. The document.write command alters a part of the page after the page loads, changing the text or photo from the original to the version being tested.

What are some of the problems that occur because Google uses client-side JavaScript?

Let's say you want to test a photo vs. a flash video. Depending on what you used to create the flash video and its embedded player, it may use JavaScript to test if flash is installed on the client PC and then use document writes to display the flash player and the video, or a message telling the user that they need to install flash on their system. Embedding a document.write inside another document.write (called nesting) seems to cause some issues. I ran into this problem setting up the page for my wife's children DVD, www.MissKimDance.com and it finally hit me that the problem was the nested document writes. I ended up bypassing the JavaScript test for determining if flash was installed and simply put the code for the player and video in the Google Optimizer variable. Under that I put a link to the installation for flash from Adobe's web site and a short statement that says you need flash to view the video. Problem solved and it works great.

But what about switching out CSS include files? CSS stands for Cascading Style Sheets and controls how a web page looks. If you don't know what CSS is and how it works, you can get my free courses on web site creating and web site scripting - they're listed in the right column in the "My Products" section. Your CSS should generally be in an included file, not directly in your web page code. Why there are two reasons. If the CSS is in a separate file, you can reference it from multiple web pages and save yourself a tremendous amount of editing if you want or need to change how your site looks. It's also one of the things I talk about in my Search Engine Optimization course SEO Secrets Revealed and that's all I'm going to say about that - you can get the course to find out why!

What makes switching the CSS file confusing is that the CSS file is loaded in the section of a web page and the JavaScript for Google Web Site Optimizer comes below that. So how can you use Optimizer to change CSS files?

And why would I want to? I typically use a set of background graphic files to form a web page that looks kind of like a sheet of paper. I want to test various background colors. The background image files and the background color are defined in the CSS file. I may also want to test various colors for the headline font, various sizes of the headline font, etc. and those are also defined in the CSS file. A good example of this is the SEO Course I mentioned above, I'm testing a few different background colors. Try it from a few different computers and you should see some variations in the background, header graphics, and headline.

To make the multivariate testing work better, you could even create multiple CSS files for each purpose: one for the background images and color and another for the headline size and color. Then you could make several variations of each, loading the appropriate background images and setting the appropriate background color, setting the font size, etc.

But how do you switch them with Google Optimizer?
First, you must reference the included CSS file with a link command and give it an id (there is more than one way to include the CSS file). Once you use the link command, you can then use JavaScript to update the link to use a different CSS file and the page will reflect this new CSS file.

Second, you make an empty Web Site Optimizer tag and name it something like CSSCode and put it directly after the JavaScript code that you stuck in your web page to make Web Site Optimizer work.

Third, in the setup pages for your Google Optimizer test, you create a few variations for this CSS variable section and put in the JavaScript code to update the CSS file... simple as that. Works like a charm.

<link id="cssLink" rel="Stylesheet" type="text/css" href="myCSS-1.css" />
This is the code in the section of your web page to reference or include the CSS file...

<script>utmx_section("CSS-Control")</script> </noscript>
This is the "empty" Google Web Site Optimizer tag where we'll put JavaScript in the variations to load other CSS files.

<script type="text/javascript"> document.getElementById('cssLink').href = 'myCSS-2.css';</script>
This is an example of one of the variations you would create for the CSS-switch variable in Google Web Site Optimizer.

This causes the page to use the myCSS-2.css file which you could use to have a different page background or whatever. I simply copied my main CSS file to create 3 or 4 versions that changed the background images and background color.

Hopefully this will help some of you get better results.

Until next time,
Fred

Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post. First Name: Last Name: E-Mail Address: E-Mail again: NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.