How to Install Social Buttons that Track in Google Analytics

By Rob McNair

The newest version of Google Analytics comes with social media tracking. This will allow you to see your visitors social media interactions with your site. By default Google Analytics will automatically track interactions with the Google Plus 1 button, if you don’t have the newest version of Google Analytics you can already get these stats from Google Webmaster tools. What we really want to know is how to track the social interactions on the behemoths that are Facebook and Twitter, and it’s only a tweak of some already existent code that you probably have on your site.

Google’s Social Tracking Script

Firstly you need to add the following code to your site and reference it from your site’s header. You can keep an eye on this code and any updates to it by monitoring it in Google Code. Click show source below to see it.

[code lang=”js” collapse=”true”]

// Copyright 2011 Google Inc. All Rights Reserved.

/**

* @fileoverview A simple script to automatically track Facebook and Twitter

* buttons using Google Analytics social tracking feature.

* @author api.nickm@google.com (Nick Mihailovski)

*/

/**

* Namespace.

* @type {Object}.

*/

var _ga = _ga || {};

/**

* Ensure global _gaq Google Anlaytics queue has be initialized.

* @type {Array}

*/

var _gaq = _gaq || [];

/**

* Helper method to track social features. This assumes all the social

* scripts / apis are loaded synchronously. If they are loaded async,

* you might need to add the nextwork specific tracking call to the

* a callback once the network’s script has loaded.

* @param {string} opt_pageUrl An optional URL to associate the social

* tracking with a particular page.

* @param {string} opt_trackerName An optional name for the tracker object.

*/

_ga.trackSocial = function(opt_pageUrl, opt_trackerName) {

_ga.trackFacebook(opt_pageUrl, opt_trackerName);

_ga.trackTwitter(opt_pageUrl, opt_trackerName);

};

/**

* Tracks Facebook likes, unlikes and sends by suscribing to the Facebook

* JSAPI event model. Note: This will not track facebook buttons using the

* iFrame method.

* @param {string} opt_pageUrl An optional URL to associate the social

* tracking with a particular page.

* @param {string} opt_trackerName An optional name for the tracker object.

*/

_ga.trackFacebook = function(opt_pageUrl, opt_trackerName) {

var trackerName = _ga.buildTrackerName_(opt_trackerName);

try {

if (FB && FB.Event && FB.Event.subscribe) {

FB.Event.subscribe(‘edge.create’, function(targetUrl) {

_gaq.push([trackerName + ‘_trackSocial’, ‘facebook’, ‘like’,

targetUrl, opt_pageUrl]);

});

FB.Event.subscribe(‘edge.remove’, function(targetUrl) {

_gaq.push([trackerName + ‘_trackSocial’, ‘facebook’, ‘unlike’,

targetUrl, opt_pageUrl]);

});

FB.Event.subscribe(‘message.send’, function(targetUrl) {

_gaq.push([trackerName + ‘_trackSocial’, ‘facebook’, ‘send’,

targetUrl, opt_pageUrl]);

});

}

} catch (e) {}

};

/**

* Returns the normalized tracker name configuration parameter.

* @param {string} opt_trackerName An optional name for the tracker object.

* @return {string} If opt_trackerName is set, then the value appended with

* a . Otherwise an empty string.

* @private

*/

_ga.buildTrackerName_ = function(opt_trackerName) {

return opt_trackerName ? opt_trackerName + ‘.’ : ”;

};

/**

* Tracks everytime a user clicks on a tweet button from Twitter.

* This subscribes to the Twitter JS API event mechanism to listen for

* clicks coming from this page. Details here:

* http://dev.twitter.com/pages/intents-events#click

* This method should be called once the twitter API has loaded.

* @param {string} opt_pageUrl An optional URL to associate the social

* tracking with a particular page.

* @param {string} opt_trackerName An optional name for the tracker object.

*/

_ga.trackTwitter = function(opt_pageUrl, opt_trackerName) {

var trackerName = _ga.buildTrackerName_(opt_trackerName);

try {

if (twttr && twttr.events && twttr.events.bind) {

twttr.events.bind(‘tweet’, function(event) {

if (event) {

var targetUrl; // Default value is undefined.

if (event.target && event.target.nodeName == ‘IFRAME’) {

targetUrl = _ga.extractParamFromUri_(event.target.src, ‘url’);

}

_gaq.push([trackerName + ‘_trackSocial’, ‘twitter’, ‘tweet’,

targetUrl, opt_pageUrl]);

}

});

}

} catch (e) {}

};

/**

* Extracts a query parameter value from a URI.

* @param {string} uri The URI from which to extract the parameter.

* @param {string} paramName The name of the query paramater to extract.

* @return {string} The un-encoded value of the query paramater. underfined

* if there is no URI parameter.

* @private

*/

_ga.extractParamFromUri_ = function(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;

}

var query = decodeURI(parts[1]);

// Find 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]);

}

}

return;

};

[/code]

This references all the code needed to push the data to Google. If you look into the code you can see that you can track the following:

  • Facebook Like (edge.create)
  • Facebook Unlike (edge.remove)
  • Facebook Send (message.send)
  • Twitter Tweet

All you need to do get this tracking on your site is modify your current code.

Tracking Facebook

If you’re using the asynchronous JavaScript code then you’ll need to change your Facebook API code to the code that is below. Remember to change YOUR_APP_ID for your Facebook applications ID. You’ll notice there is a _ga.trackFacebook function, this is what does the magic here.

[code lang=”js” htmlscript=”false”]

[/code]

Then you can use the HTML5 or XFBML version of the like button on your page as normal.

Tracking Twitter

For the asynchronous Twitter code you will now need to use the following amended code. You can see a new function in this, _ga.trackTwitter.

[code lang=”js” htmlscript=”false”]

[/code]

You should be able to install the twitter buttons as usual on your page.

Not using the Asynchronous code?

If you do not use the asynchronous Facebook and Twitter code, then you only need to add a small bit of code to cover both the Facebook and Twitter interactions. It is as simple as adding the below code just before the closing </body> tag.

[code lang=”js” htmlscript=”false”]

[/code]

When all the code is in place and the code is posted to live, you will be tracking social interactions on your site. We’ll have another blog post coming very soon that will delve into the data that this produces and also how to use the reports.

We’re a full service social media agency. Check us out on Twitter and hook up on Facebook. Please leave your comments below. . .

This post was written by Rob McNair

Rob has experience advising some of the worlds most iconic brands. He thrives on helping improving social media knowledge within organisations with the ultimate goal of making theirs brands more social, transparent and accountable.