A/B Split Testing Pages in Actinic using Website Optimizer January 15, 2010 10:23 by Rob Williams

I always used to think split testing was what the big boys at places like Amazon do and that we would never have enough traffic to benefit. How wrong I was.

Instead of looking at the ways I could increase conversion I wanted to see how important the existing parts of our website were so I would know what I should leave in and what I could get rid of when doing a redesign.

So what happened when we removed the address from the top right hand corner of the website?

It resulted in a negative impact to conversion, Customers want to know where/who they are giving money to when ordering online.

After seeing how much of a difference this made to conversions we realised customers required more reassurance and so tested the placement of the silver buttons you see on the right hand side of the site.

An almost unbelievable increase in conversions!

So if you want to cut out the guesswork when Designing and Marketing your own Actinic website, read on ...

Creating the Experiment

Start by going to google website optimizer (sign up for a free account if you don't already have one) then click on the A/B experiment link

For this tutorial I am going to use the home page as my test subject, I have given the experiment a useful name and defined the current page (Home Page) and the Variation Page URL. You will notice that the page variation url has 'acatalog' as part of the path. Actinic places all content but the home page (index.html) into the 'acatalog' directory.

The conversion page URL entered into website optimizer does not exist. The actual conversion page url will be a dynamic url generated by Actinic at the time the order is placed and so can't be verified inside website optimizer. The fake url is there just to make sure website optimiser doesn't complain.

Creating a Variation Page

To create the variation page I copied the original home page inside Actinic and then pasted it back in.

The following notice can be ignored because we will change the name of the variation page at the next step.

Change the name of the copied brochure page to match the variation page name in website optimizer.

Now we need change the variation page to help improve conversions on the website. I've gone with pointing out that our site is new, super & great.

Compare the original home page and the variation page to make sure they look ok.

Installing the Tracking Code

After you are happy with the way everything looks, it's time to implement the tracking code!

After clicking continue on the previous website optimizer page you will see the following option, we are going to install it ourselves and not get some other developer to do it so you can just click continue.

Home Page Code

We will start by adding the control script and tracking code to the original home page. The control script is what splits the traffic and sends a portion to the variation page we setup earlier. The tracking script is invoked if the visitor sees this version of the page.

We will place the control script into the main outer layout inside Actinic. This layout is used by multiple different pages so we need to set up a conditional block if statement with the control script inside it. We make sure it only outputs the script if the BrochureName variable is equal to 'Home' or whatever you have named your home page.

Actinic tries to be clever and changes the path to the control script so it's relative to acatalog. We have to fix this by defining the absolute path to the control script. This fix would only become an issue if you used ssl on your home page (a very small percentage of Actinic sites do so I think we can get away with this).

We have to use a block if statement around the tracking script as well. This goes at the very end of the document just before the closing body tag.

The url to the tracking has to be changed to be absolute as well.

Variation Page(s) Code

Adding tracking code to the variation page is almost exactly the same as the home page, you just have to make sure the block if condition matches it's name.

Conversion Page Code

To track conversions we will use the checkout receipt page because we know the customer has completed their transaction at this point.

Change page type to Receipt and paste the conversion script just before the body tag. (you don't have to worry about actinic messing the tracking script urls up in this template)

Actinic is now prepared!

Getting Website Optimizer to Validate

If you try to validate the website optimizer experiment you will get the following response. Uploading the website will fix the first two errors but the conversion page error requires you to create a local file called 'receipt.html' with the conversion script inside it. Then use the 'page not accessible' link and upload it.

Once you see this you are good to go. I would recommend previewing the experiment and making sure it looks ok before starting it.

Oh and please let me know how you get on and if I can make any part of this clearer :)

If you found this article useful then please link to this page - Thanks in advance

3 Responses to “A/B Split Testing Pages in Actinic using Website Optimizer”

Tweets that mention A/B Split Testing Pages in Actinic using Website Optimizer « Stinkyink Blog -- Topsy.com says:

January 15, 2010 16:45

[...] This post was mentioned on Twitter by Stinky Ink, Prachi D and Iain Kenney, Bitpod. Bitpod said: RT @stinky_ink: New Article, A/B Split Testing Pages in Actinic using Website Optimizer (http://bit.ly/8lKXaR) [...]

Èn ændring = 196% bedre konvertering says:

January 16, 2010 02:05

[...] A/B Split Testing Pages in Actinic using Website Optimizer … [...]