Help » Features & reports » Split tests »

How to set up split tests

Split tests are defined 100% dynamically with Javascript, and can be used with both types of goals. The reason they can only be defined dynamically is because we do not have a way of knowing what is going on behind the scenes are your web site. When a page you want to split test is viewed by a visitor, you need to tell us which version of the page they are viewing.

Visual Website Optimizer and Convert.com both have integrations with Clicky, so you don't have to worry about any coding. Otherwise, you'll want to keep reading.


Split testing API

As mentioned above, split tests are defined 100% via Javascript. Whatever you are actually testing (e.g. a different landing page, or a different call to action), you will need to program that on your end. We'll provide an example of that below, but first, here is what the code looks like:

<script>
  var clicky_custom = clicky_custom || {};
  clicky_custom.split = {
    name: 'Landing page',
    version: 'Current',
    goal: 123
  }
</script>
<!-- your tracking code must go AFTER this goal code! -->


What do these variables mean?

  • name

    - the name of your test. If you are testing variations of your landing page, you could name your test 'Landing page', as shown above.
  • version

    - the version of this test. If you are testing a new version of your landing page, then you use values like 'Current' and 'New' for the two (or more) versions of the test.
  • goal

    - name and version are required, but goal is optional. Use 'goal' if you only want your split test to be tracked for one or more specific goals. If undefined, then all goals will count towards your conversion rates for split tests. You can specify either a single ID or name (static and dynamic, respectively), or you can use an array to specify multiple goals. Here are examples of the four ways you could do this:

    goal: 123
    goal: [ 123, 456 ]
    goal: 'goal 1'
    goal: [ 'goal 1', 'goal 2' ]




Split testing example

Colors can play a big role in conversions, so here is a simple example of changing the color of a hypothetical 'call to action' button on your site's landing page. We'll call our test 'Landing page button color', and we'll try three different versions: red, green, and blue.

We need to split up our visitors evenly into three groups. When a visitor first arrives, we'll choose a random group to put them in, and set that group in a session variable so they will see the same version of the landing page throughout their session. You could use cookies instead to make their group 'permanent' across sessions, but we're not doing that here.

We'll pretend we already have a static goal set up called 'New user' with an ID of 123, so that this split test will only be calculated for people who complete that specific goal.

This example is extremely simplified, and not a full HTML document. It is written in PHP and meant to be used as a starting point for designing your own tests, no matter what language your site uses.

<?php
# enable sessions so we can keep showing the same color during this entire visit
session_start();

# the different colors we'll be choosing from randomly
$colors = array('red''green''blue');

# if they don't have an assigned color yet, grab a random one and put it in a session variable
if( !$_SESSION['color'] ) {
    
$_SESSION['color'] = $colorsrand0sizeof$colors )-) ];
}

# output the button
echo "<a href='register.php' id=button style='background: ".$_SESSION['color']."'>Register now!</a>";

# output the split testing javascript for our tracking code to use
echo "
<script>
var clicky_custom = {};
clicky_custom.split = {
    name: 'Landing page button color',
    version: '"
.$_SESSION['color']."',
    goal: 123
};
</script>
"
;

# your tracking code would go anywhere after the code above
?>