Occasionally you come across something that is just too much of a joy to keep to yourself. In this case I do have to admit to prior knowledge of what was coming in that I assisted in a small way on the technical side of the site but the content all comes from the mind of it’s author. The genius behind this site, and I use that word deliberately, is a friend of mine (another vested interest) Tim Leighton-Boyce, and the subject is Google Analytics.
Analytics is one of those things we all pay lip service to, but how many of really understand the full bounty that is on offer and how to get to it, let alone use it? One of the very few is Tim, and he has a knack for explaining it clearly. I dive in to my various analytics accounts on a regular basis, but getting down to the real nitty gritty is always something of a trial, or at least it was until a couple of days ago.
Tim describes himself as a Customer Experience Evangelist and who better to guide us through the minefield of Analytics, after all we all want to make our Customer’s experience so good that they buy from us. He has now launched his blog, CXFocus, onto the sea that is the internet. I had the privilege of reading his first post a bit ahead of everyone else and it has already saved me hours or futile argument because I could actually prove my point with facts and figures. I have a much greater understanding of advanced filters and how I can track various parameters on my sites, and extrapolating Tim’s words led me to the creation of some fairly complex custom reports which are actually useful to me and my clients, not to mention our customers.
There isn’t a lot there yet, but every word is a gem worth treasuring. I would wholeheartedly recommend that you dash over to CXFocus and click on that magic RSS button to drop it into your Reader – it will be worth every moment you spend on it. Speaking for myself, I can’t wait for the next post as I know it will not only make my life easier but almost certainly add to my income from satisfied customers.
by flaminglacer on February 23, 2010
Tools
Johnson Boxes are one of those things that everyone refers to and assumes that everyone knows all about them and how to do them – but in my experience they don’t. Following the ‘clean page’ option last week which most people spotted as a potential sales/squeeze page it seems logical to follow it up with a bit about Johnson Boxes.
For anyone who doesn’t know, they are those colored boxes with a solid or broken line around them that emphasis some text, usually a benefit of the product, or the sales price – anything you want to draw attention to. They are a proven method of increasing conversions. So how do you make them?
First of all you need the bit of code to go in your custom_css.php that specifies the style and type of your box, then you ned to put something in your page text that calls up that box.
A simple version is given here – you can elaborate on it as you please but this will give you a basic box
/*--Johnson-Box--*/
div#johnson-box{
display: center;
background: #YOUR-COLOR-CHOICE-HERE;
border: YOUR-BORDER-WIDTH-HEREpx solid #YOUR-COLOR-CHOICE-HERE;
width: YOUR-WIDTH-HEREpx;
height:YOUR-HEIGHT-HEREpx;
text-align: center;
}
/*--End Johnson-Box*/
This will give you a centered box with centered text and a solid line round it. The solid line doesn’t want to be much more than 4px and often less. If you want a broken border just replace ’solid’ with ‘dashed’. If you want a fluid height for your box, just miss out the height line.
To use the box place the following in your page text (using the html editor, not the visual one in WP)
<div id="johnson-box">
YOUR TEXT AND IMAGES HERE
</div>
This is what I used to generate the box below though the more usual color for the border is #cc0000
/*--Johnson-Box--*/
div#johnson-box{
display: block;
background: #f3edfc;
border: 4px dashed #cc99ff;
width: 600px;
height:60px;
text-align: center;
}
/*--End Johnson-Box*/
and this is what I put in my page:-
<div id="johnson-box">
This is a Johnson Box
</div>
This is a Johnson Box
If you want more than one style of Johnson Box then just give each set up a different div name.
You can also use an inline style but I find the CSS version easier when I am setting up templates but for the sake of completeness here is the code, which you would use in the html editor.
<div style="display: center; background: #YOUR-COLOR-CHOICE-HERE; border: 1px solid #YOUR-COLOR-CHOICE-HERE; width: YOUR-WIDTH-HEREpx; height:YOUR-HEIGHT-HEREpx; text-align: center;">
YOUR TEXT AND IMAGES HERE
</div>
This may be a bit basic for some of you but I hope it is useful to someone out there.
