In Fork 2.4.2 we will introduce automagical Google Analytics Social tracking. Although 2.4.2 is yet to be released (Tuesday July 5), We want to give a quick intro on how to enable this new feature. (If you can't wait to integrate it into your personal site, you can download the code on Github)
First you need to integrate the Google Analytics tracking code. This can be done, by copy-pasting the code into the field <head> scripts in the Settings-tab. Btw, you can enable the new PageSpeed-tracking here by adding
_gaq.push(['_trackPageLoadTime']); into the tracking code.
The code will look like the one below:
var _gaq = _gaq || ;
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
var s = document.getElementsByTagName('script');
When this is done, we need to configure the Facebook-settings. You will need an Facebook-application. The application is required to use FBML-tags.
If you don't have a Facebook-application already, you can create one at: https://developers.facebook.com/apps
Once the application is created, you can enter the data in the correct fields at the bottom of the Settings-tab in the CMS. Also enter at least one profile id. This will load the Facebook JS SDK by default and will enable some other Facebook-related features.
That's all! No, offcourse you will also need to integrate the
<fb:like>-tag into the correct template. Once you integrated the like-button, all likes, unlikes and shares will automatically be tracked in Google Analytics.
If you want to integrate Twitters Tweet-button, you just need to follow the instructions on http://twitter.com/about/resources/tweetbutton. The social tracking will be configured automatically.
How does it work
Facebook: When an application is configured, the FBJS-SDK is loaded in a asynchronous way. Once it is loaded it will call the
jsFrontend.facebook.afterInit method. In this method we subscribe to the correct events, but only if the GA-tracking-code is available. Each time an event is fired, we us the
_gaq.push method to track a new social event.
Twitter: when frontend.js is loaded it will fire
jsFrontend.twitter.init, in this method we check if the GA-tracking-code and the
twttr-object (loaded by the integration of the Tweet-button) are available, we subscribe to the event. As for Facebook we track the event into Google Analytics.
In Google Analytics you will see the data under the social tab (Visitors - Social)
If you have any questions, feel free to add the in the comments.