I’ve been using the HelloBar now for a couple months on both my clients sites and my own with great success. If you haven’t heard of it HelloBar is a simple web app that allows you to display a low profile bar on the top of your website (like the one on the top of this website). You can use this area to display small messages to push people to different areas or offers on your site.

I’ve never been one to overplan my marketing messages or copy, preferring instead to throw things against the wall and adjusting until something sticks. I’ve started exploring split testing more, as it’s a great way to compare multiple approaches analytically to get real data on what works and what doesn’t.

Split testing involves testing multiple options and recording the data to see which option preforms the best.

Split Testing the HelloBar

The first thing you need is at least two HelloBars setup in your account. You should create new bars for the test so the HelloBar stats are fresh.

The next thing you need is the HelloBar IDs for each bar. These are easy to find if you look at the HelloBar embed code:

[javascript]

[/javascript]

The first number is your individual account ID (2823) and the second is the HelloBar ID (note your account number won’t change between bars, just the second HelloBar ID). In my case the two ID’s of the bars I want to test are 7703 and 7704.

Now create a new JavaScript file, I’ll call mine “hbchoice.js” and enter this code:

[javascript]
var randomnumber=Math.floor(Math.random()*10)

if (randomnumber<=5) {var hchoice=7703;} else {var hchoice=7704;} [/javascript] (You can download the sample file I created here)

This simple code generates a random number up to 10, if the number is less then or equal to 5 it selects the first HelloBar ID, if it’s greater then 5 it selects the second HelloBar. This can be modified to use any range of numbers and any amount of HelloBars. Save this file and upload it to your web server.

The final step we need to do is grab the HelloBar embed code from our account (any bar will do) and modify it slightly to use our random choice.

Once again we’ll look at this section of the embed code:

[javascript]

[/javascript]

All we need to do is replace the HelloBar ID (7703 in this case) with our new random variable so it becomes:

[javascript]

[/javascript]

Then we call the new JavaScript file we created (hbchoice.js) just before the HelloBar code.

The new embed code would like this:

[javascript]




[/javascript]

(Note: don’t just copy the above, it won’t work as you need your personal account ID)

That’s it, now when the page is loaded it will randomly display a HelloBar, refresh this page a couple times and you should notice the bar change.

Run the bars for a set period of time and then check the stats on both bars – the one with the higher clickthrough rate is you’re winner!