Social Media tracking con Google analytics

Google Analytics has recently introduced Social Interaction Tracking, a way to record and measure user interactions with social media buttons. While it has been possible to track social interactions using Events, there is now a dedicated section that makes analysing Social actions even easier. This post shows you how to set up social media tracking for Facebook and Twitter and gives you all you need to go on and set up social interaction tracking on your website.

Setting up the latest Google Analytics tracking code
The latest version of Google Analytics has built-in support for tracking +1 button interactions but Facebook and Twitter (and others) need a bit of JavaScript adding to a page to store data.

First, make sure you are using the latest version of the tracking code. Google Analytics has provided an asynchronous tracking code for a while now so you will more than likely be using it. If you’re unsure what that means, in a nutshell it loads the tracking code without stopping the rest of the page downloading (helping to speed up page load) and has a queue of things that should be tracked. We will use that queue to add social tracking to our page.

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'your_code']);

_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);

})();

From the code above you can see that the page view is recorded by this line:

_gaq.push(['_trackPageview']);

This is the queue that Google Analytics uses to decide what data to send to your analytics account. To track social actions we will need to change _trackPageview to _trackSocial and offer some extra details, most importantly the social network and action taken.

The code you will need looks like this:

_gaq.push(['_trackSocial', network, action, optional-target, optional-path]);

Twitter
Setting up tracking for twitter is very similar, with the only major difference being the way your JavaScript callback needs to inspect an event for the targetUrl. For this example I’m going to use the tweet button.

First, include the relevent HTML elements:

<a href="http://twitter.com/share" class="twitter-share-button" data-text="Tracking Social
Interactions with Google Analytics" data-count="horizontal" data-via="anatomic"  data-related= 
"anatomic:Website designer and developer">Tweeta>

Here you can change the data-text to whatever you want (if it isn’t included then Twitter will default to the page’s title) and the data-via and data related can also be changed to the accounts of your choice.


Next, we set up the JavaScript that will render the Tweet button and give us the Twitter events:



<script type="text/javascript" src="http://platform.twitter.com/widgets.js">script>


Finally, we hook into the tweet event using the following JavaScript:





twttr.events.bind('tweet', function(event) {

if (event) {

var targetUrl;

if (event.target && event.target.nodeName == 'IFRAME') {

targetUrl = extractParamFromUri(event.target.src, 'url');

}

_gaq.push(['_trackSocial', 'twitter', 'tweet', targetUrl]);

}

});




There’s just one final element to add, which is the little bit of code to extract the url from the tweet button, it’s fairly simple and is shown below:



function extractParamFromUri(uri, paramName){

if(!uri){

return;

}

var uri = uri.split('#')[0]; //remove anchor

var parts = uri.split('?'); //check for query params

if(parts.length == 1){

return; //no params

}




var query = decodeURI(parts[1]);




//find the url param

paramName += '=';

var params = query.split('&');

for(var i = 0, param; param = params[i]; ++i){

if(param.indexOf(paramName) === 0){

return unescape(param.split('=')[1]);

}

As with Facebook, there are more events that you might want to hook into and you can see the full list at http://dev.twitter.com/pages/intents-events

Fuente: Ian Thomas