Google Analytics – things that I think are essential

There are a couple of things that I would say are really, really important to set up if you’re using Google Analytics and want to properly measure campaign activity/effectiveness. The first thing is to include UTM tags in all your links and the second is to properly set up goal-tracking on your site.

UTM tags and Google’s URL Builder

Google are pretty good at providing you useful, free tools for getting the most out of their various products. Unfortunately they’re quite bad at putting these tools in an easy to find place, and they’re even worse at explaining how to use them! If you send out 3 email newsletters surely you want to be able to find out which of these sent traffic to your site and what these visitors did whilst they were on your site, similarly you want to be able to deliniate this traffic from traffic coming via a banner ad, or from social media, or from a blog you posted on another site. A good way to track all of this is by tagging links to your site/pages with Google’s URL builder tool, which lives here: http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55578. It’s pretty straight-forward to use and there are examples on the page so I don’t think it needs any further explanation – but shout if this assumption is misplaced and I’ll do a step-by-step walkthrough.

Advanced segments

Once you have tagged all your links you’ll then want to go into Analytics and set up some ‘advanced segments’. Now these segments allow you to break down traffic into everything coming from a specific campaign, source, site or whatever. Typically I will set up a segment for every campaign e.g. Spring-season-announcement and then also set up segments for each element of that campaign e.g. eflyer, twitter, banner ads etc. To set up a campaign-specific segment you simply click ‘New Custom Segment’ then choose to ‘include’ ‘campaign’ containing ‘whatever you entered into the campaign name field in the Google Url Builder‘ – call the segment something meaningful and then just click ‘save segment’, this will then show you the activity for all the traffic that came via a link tagged with that campaign name, you can use the usual breakdowns into traffic source, location, etc to delve further into this traffic.

If you want to create a segment that is just for, for example, all the traffic coming via a banner ad then – and this example assumes you are just running one banner ad – you set up the segment as above, however instead of saving it at the end you’d add another rule, so click ‘add AND statement’ then click ‘add dimension or metric’ then click ‘medium’ and in the field enter whatever you entered into the ‘campaign medium’ field in the URL builder. Then save that segment and it will show you the activity of all the traffic that has come from a link tagged with that campaign name and that campaign medium (in this case, a banner ad).

Hopefully you can start to see (as with building any query) that depending on what you want to find (and defining this first is essential) you can build custom segments to show you lots of different things – however you simply must start tagging all your links so that all your online activity starts to work together.

Goal tracking

To supplement this bit, here is a Google help article on exactly the same subject http://support.google.com/analytics/bin/answer.py?hl=en&answer=1032415

Right, so you’re tagging your links, you’re starting to get an idea that your Spring campaign (or whatever) was really successful in driving traffic to your site and you can see that the eflyer was particularly successful within this campaign. Next thing you need to know is how much of that campaign traffic is actually resulting in…whatever it is that you have your website for, whether that’s selling a ticket or gaining a newsletter signup or whatever. You need to set up goals. There are lots of different ways of doing this, obviously as there are myriad different goals that any website might have.

In this example I’m going to assume that a goal is the clicking of a link that takes your visitor off to a 3rd party purchasing system over which you have no control – therefore the purpose of your website is to get a visitor to click the ‘purchase’ button, beyond that you have zero control so, as ever, concentrate on what you can do first – then you can worry about everything else.

The clicking of a link is an ‘event’, therefore you need to set things up so that Analytics sees it as such. First things first you need to add some code to the links you want to track the clicks of as goals:

onClick="_gaq.push(['_trackEvent', 'category', 'action', 'label']);"

so your link code would look something like this:

<a href=”http://someurl” class=”a link” onClick=”_gaq.push([‘_trackEvent’, ‘bookingLink’, ‘click’, ‘springSeason001’]);” >

in this example the category=bookingLink, the category=click and the label=springSeason001.

What this is doing (if you want a boring explanation) is adding some javascript to the link that catches that user interaction and labels it as something that is then read by the Analytics code you’ve already included if you are running Analytics on your site.

Right, so, you’ve done that for all the links you want to track clicks of as goals.

You then need to go into Analytics and set up your goals, click on ‘Admin’ in the top right, click on ‘goals’, call it whatever you want, for ‘goal type’ select ‘event’ (in this instance), the put whatever labels you included in your code in the relevant fields, you can also assigned a value to each goal (for example, if a ticket is £10) – I normally set this in the ‘goal value’ field rather than with the rest of the goal info, you need to select ‘use a constant value’ and then enter 10 (or whatever the value is) in this field.

Phew

Right, then click ‘save’ and you have set up a goal. Because Analytics still doesn’t do realtime very well you’ll have to wait a day to make sure everything is linking up and working properly (the usual reason, I find, for something not working is that you’ve included a typo somewhere along the way).

You can then track whether any of your goals are being met under the ‘conversions’ tab in Analytics.

Conversions and effectiveness

So, you’ve set up your url tagging so you know which links are sending you traffic, you’ve set up advanced segments so you can really divide up your traffic into meaningful groups and you’ve set up goals so you can track whether traffic is doing the thing you want it to do. Now you can start measuring the effectiveness of your digital activity, e.g. if you’re sending out an eflyer with the explicit aim of getting people to buy tickets for a specific show then create an advanced segment for all of the links in that eflyer, set up a goal as the clicking of that booking link on your site, send the eflyer and then measure.

The biggest advantage that digital activity has is that it is so measurable – you should be making the most of this wherever possible! Google Analytics is a very powerful, very free package – learn to use it – simply being able to tell your boss that you had 10,000 visitors last month doesn’t mean anything, it is almost devoid of any use as a piece of information, you need to be able to contextualise and connect up all the various metrics available to you so that you can understand what’s going on.

Disclaimer: I wrote this in my lunch hour, whilst eating, so chances are I’ve made a mistake or included typos somewhere along the way, however it is – in the main correct (I hope).

Further reading

Google’s own help articles are fairly labyrinthine, but there is a lot of useful info in there, and they seem to be forever adding new features and not quite telling everyone about them so it’s good to keep a regular eye on things http://support.google.com/analytics/?hl=en

 

Playing with YouTube feeds

This is a followup to my Simplepie post a while back. YouTube offers Atom feeds, great – you’d think. However the data that YouTube outputs in its Atom feeds is…a bit different to what you might expect from a standard RSS feed in that it contains a lot of escaped HTML. Essentially for each item’s descripton in the feed YouTube outputs something like the following:

&lt;div style="font-size: 12px; margin: 3px 0px;"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td style="font-size: 11px; line-height: 1.4em; padding-left: 20px;             padding-top: 1px;" width="146" valign="top"&gt;&lt;div&gt;&lt;span style="color: #666666; font-size: 11px;"&gt;From:&lt;/span&gt;
&lt;a href="http://www.youtube.com/profile?user=YouTube"&gt;YouTube&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style="color: #666666; font-size: 11px;"&gt;Views:&lt;/span&gt;
15774&lt;/div&gt;

Which is basically a div that contains a table and is pretty intrusive if included in it’s native form. A rough and ready solution to just getting the bits you want (or at least I want) is to grab each item’s description and echo it via the substr function, this function allows you to specify which parts of a string you want to echo. It did rely a little bit of counting characters and I’m sure that there are far more efficient ways of doing it but if you, say, wanted the screenshot of the video linked to the video’s location on YouTube then your substr function would look something like this:

<?php $description=$item->get_description(); ?>

<?php echo substr($description,113,145); ?>

Which essentially tells the function to starting echoing from character 114 in the string (the count, as always, starts from 0) and to echo out the 145 characters from that point – which is the portion of the string involved in referencing the video’s screenshot and location.

There are a few other ways I can immediately think of using this particular set of data, will post them when I get a minute.

EDIT –

To produce embedded videos from the Atom feed then something like this will work:

<?php $description=$item->get_description(); ?>

<iframe title=”YouTube video player” width=”480″ height=”390″ src=”http://www.youtube.com/embed/<?php echo substr($description,155,11); ?>” frameborder=”0″ allowfullscreen></iframe>

WordPress snippet #1

Useful little piece of WordPress code, plays a particularly useful part of a dynamic featured post slideshow that I was going to detail at some point. To reference the  set upload directory url in your WordPress theme:

<?php $upload_dir = wp_upload_dir(); ?>

<?php echo $upload_dir[‘baseurl’]; ?>

more info here http://codex.wordpress.org/Function_Reference/wp_upload_dir

CSS – speeding things up

A bit of house-keeping (for wont of a better word) first, I’ll be moving this blog in the next couple of weeks to integrate with my website www.bigthingsandlittlethings.co.uk. When I first set this blog up I wasn’t entirely sure what form it was going to take but I’ve managed to keep it quite web-relevant (thus far) so it seems silly to keep two separate identities running when really they are parts of the same thing….

Now, boring stuff over, on with the blog.

This isn’t a hugely technical blog this time but covers a few CSS-related things that I have found make a big difference to workflow and just generally making things a bit easier to organise and manage.

I came across the notion of CSS ‘global resets’ a few years ago, to me they make a great deal of sense, especially with regards to white space (http://leftjustified.net/journal/2004/10/19/global-ws-reset/) – I find it far easier to start from nothing and completely build up my styling in the knowledge that I’ve specified every element rather than let some odd default browser setting trip things up. The notion here is that all browsers have default margin/padding/font-face/etc settings for elements that will be applied if you don’t specify an alternative, the annoying thing being that all of these browser defaults are slightly different. With a global reset you, as the name suggests, reset all instances of the specified attribute (whether its padding, margin, font-face, whatever) to zero, or Arial, or black depending on the attribute in question. This then gives you a specific base point to work from – which I find very useful.

Some good examples of CSS resets can be found here http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/ and a good one here http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/ http://warpspire.com/features/css-frameworks/

A further use of resets is detailed here, http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/ Smashing Magazine takes CSS resets as an element of their suite of recommendations for developing a CSS framework – on reading this article I realised that I already used my own framework to some extent (I just didn’t refer to it as such) as there were certain stylesheet practices and scripts that I use as a matter of course – the acknowledged disadvantages of frameworks – such as the time taken to familiarise yourself with them and the possibility of inheriting bad code if you use someone else’s – didn’t really come into play as all the code I use is hand-written by me, I’m not saying I’m perfect though!

I’d be interested to hear about people’s experiences using some of the external CSS frameworks out there – there is a handy list of some of them here http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look/ – have they streamlined your workflow or do they cause more problems than they solve?

There are also a couple of great articles at Smashing Magazine (who I rate highly – as you can probably tell) regarding good CSS practice and tips for better coding here http://www.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next-web-design/ and here http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

WordPress – styling by category

I’ve spent the best part of this morning working out how to add a post’s category to its h2 tag’s class – which then allows me to do category-specific styling. Essentially I wanted each headline to be a different colour based on its category – simple result, slightly convoluted solution.

Anyways, it took a while so I thought I’d share it here to save others the hassle!

You first need to add the following to your functions.php file

<?php
function the_category_unlinked($separator = ‘ ‘) {
$categories = (array) get_the_category();

$thelist = ”;
foreach($categories as $category) {    // concate
$thelist .= $separator . $category->category_nicename;
}

echo $thelist;
}
?>

Basically this takes the results of the usual the_category() query – i.e. an unordered list – and strips out all the list formatting and presents the results as a nice list of the categories, with each category separated by a space.

You can then add this to your h2 (or whatever tag you want to style) class=”ADD HERE” in your index.php file (or wherever you need)

<?php the_category_unlinked(‘ ‘); ?>

This pulls the category info as formatted by the function you just wrote in the functions.php file – i.e. without any list formatting.

You then just need to add the relevant class styling info (e.g. .categoryname{some styling}) to your styles.css file and you’re good to go.

Hopefully this was useful.