Forcing Clicky to track a link as outbound

First of all, you need to know that when you add a class clicky_log_outbound to a link, Clicky will track each click on that link as an outbound link. Now I always add a class track or aff to my affiliate links that I want to have tracked, for instance:

<a class="track" href="http://yoast.com/out/clicky/">Clicky</a>

Of course I could manually add the clicky_log_outbound class, but that's just a tad bit too much work, especially as most of my links have been "classed" already and I might want to use this class for other stuff later on.

Now, I add a tiny filter function to my sites functions.php file, this searches for links with class aff or track and adds the clicky_log_outbound class:

function clicky_outbound_filter( $content ) {
	$content = preg_replace('/<a([^>]+)?class="(aff|track)"([^>]+)?>/',
		'<a\1class="\2 clicky_log_outbound"\3>', $content);
	return $content;
}

add_filter( 'the_content', 'clicky_outbound_filter', 10, 1 );

That's it! Clicky will now track those links as outbound. Now let's set such a link up as a goal.

Goal Tracking in Clicky

For goal tracking you need to have a premium (read, paid) Clicky account, but it's well worth it. Setting up a goal is a piece of cake. You go to your site's analytics and then to Goals, Setup. You'll see this interface:

You simply name the action, set the goal URL to be your outbound URL, you could do /out/clicky/ or, when you sometimes forget the last slash, /out/clicky*. You can set up revenue and even a funnel, a required page before one can reach that goal.

Once you've done that, the goals will show, in realtime, in your Goals overview and in your "bigscreen" Clicky display.

More tracking power: campaigns

This feature becomes even more powerful when you combine it with another great feature of Clicky; campaign tracking. Clicky fully supports the _utm type variables Google Analytics uses, so you can track campaigns and terms within campaigns. That is, in fact, how I did the tracking in yesterdays post about WordPress Dashboard widgets.

Tracking Outbound / Affiliate Links with getClicky is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Let me go over some of the features of Clicky Analytics:

The Clicky Dashboard

More than any other affordable analytics package, the dashboard for Clicky shows me what's happening on my site now. Nothing really fancy, but it just works and measures what it's supposed to measure. Check out this example:

Clicky Analytics Spy

If the dashboard isn't realtime enough for you, the Clicky spy feature gives a very simple but cool AJAXified overview of the traffic coming in to your site:

Their API

Clicky allows you to insert data into it by using their internal data logging API. My Clicky WordPress plugin uses this feature to store comments. Instead of having to do the "unreliable" thing I have to do in Google Analytics: adding an onclick handler to the submit comment button, I can just do a request to the Clicky servers when the comment is inserted into the database, which gives cool stuff like this:

Once someone leaves a comment, the plugin is also able, using the cookie that WordPress sets once you make a comment, to track the visitor by name, so if they come back, you'll know exactly who it is. This feature (the API as well as the goal part) requires a Pro account, which leads me to the next advantage: its pricing (aff link). You can do up to 30k pageviews per day in an account that costs $60 a year. That's serious value for money if you compare it to any other paid analytics package.

How about speed?

In the past, Clicky Analytics had some performance issues from time to time. Recently they've been improving a lot though, with their latest move being to move to a truly global CDN for their tracking scripts. Today I updated the Clicky WP plugin for that which also reminded me I should really write this post.

Is that all?

No, there's more, with a Pro account, Clicky will also pick up data from Google Analytics campaign variables, do video analytics and all sorts of other neat stuff. There really are a lot more features in Clicky Analytics, but to be honest, I don't use them as much as I probably should. All my more hardcore analysis is done in Google Analytics, as I like that interface more for doing such analyses. However, for a quick overview of your site, you can't really go wrong with Clicky. Like it too? Get it now. And yes, that's an affiliate link, but trust me, I'd be much better of promoting a far more expensive solution :).

Clicky Analytics (getClicky) Review: clean, simple, effective is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

In full "shape" my social buttons look like this:

There are several plugins that do social buttons in WordPress. As a lot of you may know, I used to maintain a plugin called Sociable back in the day when social buttons where all still 16x16, simple, buttons. At some point, I think it was Digg that introduced the script based social button with a counter in it, which was later on adopted by several social sites. To date, there are many many social bookmarking sites that have widgets like these. Not every site needs all of these social buttons. I picked the 5 that work for me, your mileage may vary.

How did you implement these social buttons in WordPress?

I hear you thinking "get on with it already". Ok ok ok. Here we go. It's not a plugin. It's in my theme. Which doesn't mean it couldn't be a plugin, it's just that it'd be pretty hard to embed them in my site as sweet as these social buttons are embedded right now, using a plugin.

So they're in my theme. As you can guess, the buttons themselves are a template part. This template part is actually rather small and simple, it looks like this (line breaks added for readability):

<ul class="social buttons">
  <li>
    <fb:like href="<?php the_permalink() ?>" send="true" 
      showfaces="false" width="120" layout="button_count" 
      action="like"/>
  </fb:like></li>
  <li>
    <a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" 
      data-text="< ?php the_title(); ?>" data-via="yoast" 
      class="twitter-share-button">Tweet</a>
  </li>
  <li>
    <g:plusone size="medium" callback="plusone_vote"></g:plusone>
  </li>
  <li>
    <script type="in/share" data-url="<?php the_permalink(); ?>" 
      data-counter="right"></script>
  </li>
  <li>
    <div id="stumbleupon-button"></div>
  </li>
</ul>

As you can see, these are the "regular" buttons for most of these services, with that exception that all of them are lacking the script tag. Back in february, Frederick did an awesome post on his blog about optimizing the performance of widgets & buttons. I used the knowledge in this post, but took it a few steps further.

Loading these Social Buttons script files

Let's start with Facebook. Their asynchronous code works quite well. First, make sure you have a fb-root div:

<div id="fb-root"></div>

Then load the JavaScript, (all of the code samples below should be within <script> tags):

window.fbAsyncInit = function() {
  FB.init({appId: '<APPID>', status: true, cookie: true, xfbml: true});
};
(function() {
  var e = document.createElement('script');
  e.type = 'text/javascript';
  e.src = document.location.protocol +
     '//connect.facebook.net/en_US/all.js';;
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
}());

This loads the Facebook JS once the page load is done, which works quite nice and then loads the app. Later on we'll be adding code to track all the interaction with the Facebook buttons, but let's load some other social buttons first.

The other scripts I'm going to load using jQuery. Not only do I load them asynchronously, I only start loading them when the page has actually already completed rendering. The code to do that for the Twitter share button looks like this:

jQuery(document).ready(function($) {
  // Load Tweet Button Script
  var e = document.createElement('script'); 
  e.type="text/javascript"; e.async = true; 
  e.src = 'http://platform.twitter.com/widgets.js';
  document.getElementsByTagName('head')[0].appendChild(e);
}

And LinkedIn, Google's +1 and StumbleUpon's buttons work in the same way:

jQuery(document).ready(function($) {
  // Load LinkedIn button
  var e = document.createElement('script'); 
  e.type="text/javascript"; e.async = true; 
  e.src = 'http://platform.linkedin.com/in.js';
  document.getElementsByTagName('head')[0].appendChild(e);
  // Load Plus One Button
  var e = document.createElement('script'); 
  e.type="text/javascript"; e.async = true; 
  e.src = 'https://apis.google.com/js/plusone.js';
  document.getElementsByTagName('head')[0].appendChild(e);
  // Load StumbleUpon button
  var e = document.createElement('script'); 
  e.type="text/javascript"; e.async = true; 
  e.src = 
  'http://www.stumbleupon.com/hostedbadge.php?s=1&a=1&d=stumbleupon-button';
  document.getElementsByTagName('head')[0].appendChild(e);
}

You could even simplify this further by just making it an array and looping through it, but for readability's sake I didn't do that.

Tracking Interaction with Social Buttons

When Google released +1, I quickly identified how to track interaction with that button. The obvious "follow up" was questions from people on how to track interaction with other buttons. Not for each of these social buttons tracking of interaction is actually possible. It depends on how the button was designed whether this will work or not. I got it working for Twitter and Facebook, so I'll share the code for tracking interaction with their respective social buttons below.

For Facebook, it's pretty well documented around the web how you can track the interaction with their buttons. I played around a bit and came up with the following implementation, which tracks the interaction with my like & send buttons and with the big like box on the right. It tracks the interaction in both Google Analytics and getClicky.

Instead of just the above FB.init line, we'll do the following:

window.fbAsyncInit = function() {
  FB.init({appId: '<APPID>', status: true, cookie: true, xfbml: true});
  FB.Event.subscribe("edge.create",function(response) {
    if (response.indexOf("facebook.com") > 0) {
      // if the returned link contains 'facebook,com'. It is a 'Like' 
      // for your Facebook page
      _gaq.push(['_trackEvent','Facebook','Like',response]);
      clicky.log(response,'Facebook Like Facebook Page');
    } else {
      // else, somebody is sharing the current page on their wall
      _gaq.push(['_trackEvent','Facebook','Share',response]);
      clicky.log(response,'Facebook Like / Share Post');
    }
  });
  FB.Event.subscribe("message.send",function(response){
    _gaq.push(['_trackEvent','Facebook','Send',response]);
    clicky.log(response,'Facebook Send Post');
  });
};

As you can see, if you can read a bit of code, this will create different events for each of the different optional actions. Now, let's do the same for the Tweet button (using examples based on their docs, but switched to async):

// Load Tweet Button Script & Associate Google Analytics Tracking
var e = document.createElement('script'); 
e.type="text/javascript"; e.async = true; 
e.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(e);
$(e).load(function() {
  function tweetIntentToAnalytics(intent_event) {
    if (intent_event) {
      var label = intent_event.data.tweet_id;
      _gaq.push(['_trackEvent', 'twitter_web_intents', 
	    intent_event.type, label]);
      clicky.log(document.location.href,'Twitter '+label);
    }      
  }       
  function followIntentToAnalytics(intent_event) {
    if (intent_event) {
      var label = intent_event.data.user_id + " (" + 
	   intent_event.data.screen_name + ")";
      _gaq.push(['_trackEvent', 'twitter_web_intents', 
	   intent_event.type, label]);
      clicky.log(document.location.href,'Twitter '+label);
    }    
  }       
  twttr.events.bind('tweet',    tweetIntentToAnalytics);
  twttr.events.bind('follow',   followIntentToAnalytics);
});

LinkedIn has an API for these things, at least, it has documentation for it, but it doesn't work in my testing and quite a few people are complaining on LinkedIn's developer forums as well. For StumbleUpon there's no documentation to be found and it doesn't seem to be possible at this time to track interaction with their social button.

All of this is pretty geeky, I know, but there's a lot of value in both implementing these social buttons in a good and fast way and measuring all these interactions. Seeing which sort of social buttons work for which types of traffic can really help you find what you should be optimizing how.

Social Buttons: Adding them to your site & Tracking them is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Let me start by showing you the "end result", first what a "visit" containing a comment looks like, second what data is stored for each visitor (the new feature adds both the name and the email address):

This is done by some pretty cool combination of the WordPress API and the Clicky API, and it also allows you to add comments as a goal in your Clicky:

Pretty neat huh?

Comment Tracking in Clicky is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Update: the plugin is now out of beta and on wordpress.org, search for Clicky in your backend and install it, or download it from the Clicky plugin page on WordPress.org!

For a 1.0, this plugin has a pretty decent feature set:

• Automatically adding your Clicky tracking code everywhere:
  • Option to ignore admins
  • Option to store names of commenters
  • Option to track posts & pages as goals and assign a revenue to that page or post
• An overview of your site's statistics on your dashboard
• Integration with the Clicky.me Short URL service:
  • Automatically create a short link for each now post and page
  • Option to automatically tweet posts and pages on publish

It's using my backend class for it's admin UI, so it looks nice and clean (click for larger version):

And it adds a box to your edit post / edit page screen in which you can decide to Tweet the post or not if you've got those settings enabled and define the goal tracking variables:

Clicky Tracking for WordPress is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!