Website Optimiser, Part 4: Installation

Thursday, January 8, 2009 | 10:54 AM

Labels: , ,

Happy New Year!

Following up from our last post and introduction to Google Website Optimiser, we will now go through the process of how to install it on a website. 


The steps you take on your own website may be slightly different. For this reason we have included an example so you can see the process and see how it could apply to your own website.

It will help to have some understanding of HTML and access to your website's template files, so if you will be working with your webmaster to implement the JavaScript code, you could ask them to follow along with you here.

Click on the Create a new experiment link.

Step 2.

You will then be asked to choose what kind of experiment you would like to run. For now we will choose Multivariate Experiment because at this stage we do not want to change the entire layout of our pages. We are going to start our first experiment with just minor changes.
Step 3.
There isn't much detail on the next page. Its just an overview of the steps involved. Click Go.



Step 4.
4a.

Now you have three fields to complete. The first is the name of your experiment. We need to give it something really meaningful so that later when we compare it to the other experiments we have run, we can instantly identify it.

Useful tip: Give it a name that reflects the desired outcome of the experiment. In this case we have called ours "Increase Donations Test 1". We might decide to run a few more of these tests so numbering or dating them can be useful eg: "2008_11_Increase_Donations_Test_1" Note that the experiment name won't be shown to your website's visitors.

4b.

Enter the full URL of your test page including the domain name. In our example we have a fictional charity called mycharity.org and the page we want to optimise is the donations page. Remember this is the page we want Google Website Optimiser to make changes to.

The full address is: http://www.mycharity.org/donate.html

4c.

Next we need to identify our conversion page. In most cases this is a thank you page.
Eg:
Thanks for your email
Thanks for your donation
Thank you for your order
Thanks for filling out our survey
Thanks for registering your interest
Thanks for signing up for our newsletter

You get the idea. 

If you are not sure what the URL to this page is, you can either go through the process as a test user or ask your webmaster to tell you. If you already use Google Analytics, you might be able to find the conversion / goal page in your Goals settings or Top Content report.


Step 5.

The next page is an overview page, giving you advice on some areas with which you may want to test your experiment. Feel free to click Continue when ready.
Step 6.

You will be asked to choose who will install the tags for Google Website Optimiser on your website. Since you have come this far, click on the second option, You will install and validate the JavaScript tags.

If you choose to have your webmaster set up Google Website Optimiser, skip to step Script Validation.

Note: Some websites are dynamically driven (often access information from a database) or may use a content management system (CMS). Website Optimiser will work with these sites, but the implementation procedure will vary from system to system, so you may need to consult your web developer / designer for help installing Website Optimiser.

Click Continue when ready.

Step 7.

This is the most difficult part of the entire process. After this step, everything else is downhill.

Control Script

The Control Script is a small piece of code that controls how your experiment works. It determines which variation of your page each visitor sees. Right click or command click (for Mac) on the text box area with the code. You should be able to select Copy. You will then want to paste this code into the area of your test webpage. In this case it is the donate.html page.

This is how the code looks installed on our test page, "donate.html".

Tracking Script

In order to measure the performance of your different variations, you will also need to place the tracking script on your test page. While the Control Script goes at the top of the page, the Tracking Script should go at the bottom, right before the tag. Ideally it should be the last thing in your HTML document.

Just like before, right click or command click (for Mac) on the text area and copy the contents.

Here's how the code looks on our test page, "donate.html":

Page Section Script

The Page Section Script lets you break your webpage into different parts (like headline, image, description) so that you test different variations. The next part will entirely depend on how many sections you wish to test. To keep things simple we are only going to cover our headline, however, if you wish to change other areas the exact same principle will apply.

Right click or command click (for Mac) on the text box area with the code. Generally a website's page heading should be a heading tag. In this case we are using the tag as our test heading.

We paste what we copied from the Page Sections text box, however we want to make a minor change to the script where it says "Insert your section name here." Here you can name the section. You'll want to make this a meaningful name so you'll be able to recognize it later on. In this instance we are giving this section the name "Page h1 Heading."

Again this is all on our "donate.html" test page.
Note we named our section "Page h1 heading". You can give your section any name you like. Just make sure it's meaningful to you.

Once we have finished here, we can save this webpage and move onto our thank you page.

Conversion Script

The final script counts the number of conversions your page received and which variation the visitor saw before they converted. It needs to be installed on our thank you (conversion) page. On our website this is the "thanks-for-your-donation.html" page. 

Right click or command click (for Mac) on the text box area with the conversion script code.
In your thank you page, locate the tag and paste in the code.



Step 8.

Script Validation

Now that you have placed the correct scripts in the right places, you will need to validate your script to ensure it's error free and ready to start running. If some of your pages are behind secure login pages or a secure page that is not publicly accessible, you will need to use the offline validation service.   

If all went well you should see the following screen.

Once you are ready click Continue.

With all the snippets installed, you're now ready to create your variations and launch your experiment. In Part 5 of the series, we'll show you how to do just that. If you can't wait, you can read ahead in the Website Optimiser Help Centre