As part of our rollout of WordPress as our CMS, we’ve given our users several custom post types, allowing them to create and manage assets such as rotating display banners and graphical link buttons. We want to be able to easily track actions on these banners and buttons, and want to be able to see that information easily in Google Analytics.
One of the new features in the newer versions of Google Analytics (GA) is the ability to track event actions on a link. This can be not only clicks, in our case, on a button, link or graphic, but you can setup javascript triggers when a user starts, stops or pauses a video, for example.
Setting this up is pretty straightforward. First, you’ll need to add a quick snippet to your GA embed code, if you aren’t already. It’s the trackPageview function. You’ll add it under the line in your GA code where you’re account code is. For example:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>That will allow you to start tracking events on your pages. To add the event tracking action to a specific element on your page, you add a line of code that looks like this to your a tags.
onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby's First Birthday']);"
There are three fields there to pay attention to. The first is the category field. In the above example, it’s Videos. You can have multiple categories on a certain page. On our WordPress sites, we’re specifically tracking banners and small image buttons, often on the same page.
The second field is the action variable – which in the example above is Play. For our WordPress pages, we use the term Click. Through javascript and PHP variables, you can make your actions very specific, such as:
_gaq.push(['_trackEvent', 'Videos', 'Play - Mac Chrome');
_gaq.push(['_trackEvent', 'Videos', 'Play - Windows Chrome');
And finally, the label. Above, it’s Baby's First Birthday. For our uses, we tailor this to the specific banner or button getting clicked. After a few days, we realized it would also be good to know what site the visitor was on. As with the other fields, this should be tailored to the specific content being clicked on. In the video example, you’d have something like this for different videos being played:
_gaq.push(['_trackEvent', 'Videos', 'Play', 'Gone With the Wind']);
_gaq.push(['_trackEvent', 'Videos', 'Play', 'Huckleberry Finn']);
To our user, our links look like this:
<a href="http://sites.jcu.edu/newsroom/?p=1697" onClick="_gaq.push(['_trackEvent', 'Taters', 'Click', 'Princeton Review Best in the Midwest (Site: JCU Newsroom ID: 1694)']);">
<img src="http://webmedia.jcu.edu/newsroom/files/2011/08/princeton_review-700x230.jpg" alt="Princeton Review Best in the Midwest" />
</a>
In our WordPress templates, it looks like this:
<a href="<?php echo $url; ?>" onClick="_gaq.push(['_trackEvent', 'Taters', 'Click', '<?php echo get_the_title($ID)." (Site: ".get_bloginfo('name')." ID: ".$id.")"; ?>']);">
<img src="<?php echo $img[0]; ?>" alt="<?php echo get_the_title($ID); ?>" />
</a>
We are tracking the individual banner that was clicked on, as well as the site the banner appears on. We add an additional field for our own, the actual ID of the banner asset. We do that just in case we need to find one quickly, or two banners get named the same thing. It’s happened.
That gives us a very nice report in GA that looks like this:
We can very easily filter by a specific site to see what buttons and graphics are getting clicked on. You could also add this to any static link as well, but I’m specifically interested on what specific calls to action are getting noticed by our users.
I’m a big fan of Google Analytics. Nay, I’m a huge fan.
