It is very important that before we move forward, you understand the difference between event tracking & social tracking and difference between normal users’ interactions & social interactions:
1. Event tracking is implemented by calling the _trackEvent() method whereas social tracking is implemented by calling the _trackSocial() method.
2. Event reports are available in the visitors section and social reports are available in the content section of the new Google analytics interface.
Event Tracking Report
Social Tracking Report
Please Note: Social reports are available only in the new Google Analytics interface.
3. Social interactions (or social actions) are subset of users’interactions. A click to a share button (like facebook button) is a user’s interaction. However it can be called as a social interaction only when the user actually shared/engaged with the data (like blog post, picture, article etc) via the share button/social plugin. Event tracking can track clicks to a share button but can’t track what user did after clicking on the button (like whether a user actually shared the data). For e.g. When a user clicks on a share button like ‘tweet’ button, event tracking counts the click as an interaction. But it is possible for the user to cancel sharing after clicking on the tweet button. So in this case the user has not actually tweeted say your blog post. But since he has clicked on the tweet button, event tracking will still report this interaction as a social interaction. That’s why event tracking is not ideal for tracking social interactions.
Google Analytics’ ‘Social interactions tracking’ on the other hand can track what the user did after clicking on the share button/social plugin by interacting with the API of the share button/social plugin. For e.g. social tracking can track whether a user like, unlike or share your blog post after clicking on the facebook button or whether the user actually tweeted your blog post after clicking on the tweet button. This is something which is not possible through event tracking.
Implementing Social interactions tracking
1. In order to implement Social Interaction tracking, make sure that you have the latest version of Google Analytics tracking code(GATC).
<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>
.
</head>
Example of latest version of GATC
2. To send social interaction data to Google Analytics we call the _trackSocial() method wherever we have added the share button/social plugin:
_gaq.push(['_trackSocial', network, socialAction, opt_target]);Where,
network => Name of the social network being tracked e.g. Facebook, Twitter, LinkedIn etc. This parameter is required to be passed to the trackSocial method.
socialAction => Type of the social action being tracked e.g. Like, unlike, send, Tweet etc. This parameter is required to be passed to the method.
opt_target => This parameter is optional. It is a URL which receives the social action.
Please note: _trackSocial seems to track only those social sharings which were done through social plugin/share button on your website. It doesn’t seem to track re-tweets or sharing done on some third party site or third party plugins like tweetmeme. So if your blog post is tweeted 10 times via a share button on your website and then later re-tweeted 65 times then also _trackSocial counts only 10 tweets. So in short, i don’t see social interactions being tracked across the web. This is not what i was expecting from Google
Tracking Google +1 Social interactions
Google analytics automatically tracks the social interactions associated with Google +1s once you have placed both the Google +1 button and latest version of the Google Analytics tracking code on the web pages of your website. These interactions are automatically captured in the social reports of Google Analytics. So you don’t have to place any tracking code for Google +1 button. However you must add this button to your web pages. Following is the asynchronous JavaScript code for the Google +1 button which you can use to place the button on your web pages:
<!– Google Plus one button code starts here –>
<!– Place this tag where you want the +1 button to render –>
<g:plusone size=”medium”></g:plusone>
<!– Place this tag after the last plusone tag –>
<script type=”text/javascript”>
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!– Google Plus one button code ends here –>
Tracking Facebook Social Interactions
For facebook, social actions can be: ‘like’,’unlike’, ‘follow’, ‘send’,’comment’ etc. Through ‘like’ button a user can share your web page on his facebook profile with just one click. Through send button a user can send (share) your web page to his friends. Similarly through comment button a user can comment on any web page of your website. If you want to track all social actions provided by facebook then you need to install all social plugins of facebook. You can get the list of such plugins here.
Please note: you can track only those social actions for which you have installed/placed social plugin on your website. For e.g. if you want to track facebook comments, then you first need to install facebook comments plugin on your website. I have added facebook ‘like’ and ‘send’ buttons to my blog and following is the button code:
<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<script type=”text/javascript”>_ga.trackFacebook();</script><fb:like send=”true” show_faces=”false” layout=”button_count” width=”150″></fb:like>
Please note: I have added following additional line of code to the facebook ‘like’ and ‘send’ button code:
<script type=”text/javascript”>_ga.trackFacebook();</script>
ga.trackFacebook() is a Google analytics function through which you can give your users the ability to override the tracker name. Here is how the function code looks like:
// Create a function for a user to call to pass in the options.
function trackFacebook(opt_pageUrl) {
try {
if (FB && FB.Event && FB.Event.subscribe) {
FB.Event.subscribe(‘edge.create’, function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'like',
targetUrl, opt_pageUrl]);
});
}
} catch(e) {}
}
Now according to Google’s ‘Social Interaction Analytics‘ documention, to capture facebook’s social actions in Google analytics, you need to call the facebook’s edge.create event and create a call back function which can send the social interactions data to Google Analytics via _trackSocial method. Here is the code for that:
<script>
(function() {
var e = document.createElement(‘script’);
e.async = true;
e.src = (document.location.protocol == ‘file:’ ? ‘http:’ : document.location.protocol) + ‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({xfbml: true});
FB.Event.subscribe(‘edge.create’, function(targetUrl){
_gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});
FB.Event.subscribe(‘edge.remove’, function(targetUrl){
_gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});
FB.Event.subscribe(‘message.send’, function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});
FB.Event.subscribe(‘comment.create’, function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'comment', targetUrl]);
});
FB.Event.subscribe(‘comment.remove’, function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'uncomment', targetUrl]);
});
};
</script>
Through the code above you can track facebook ‘like’, ‘unlike’, ‘send (share)’, ‘comment’ and ‘uncomment’ social actions. Finally your facebook button and tracking code will look like this:
<!– Facebook button and tracking code starts here –>
<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><script type=”text/javascript”>_ga.trackFacebook();</script><fb:like send=”true” show_faces=”false” layout=”button_count” width=”150″></fb:like>
<script>
(function() {
var e = document.createElement(‘script’);
e.async = true;
e.src = (document.location.protocol == ‘file:’ ? ‘http:’ : document.location.protocol) + ‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({xfbml: true});
FB.Event.subscribe(‘edge.create’, function(targetUrl){
_gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});
FB.Event.subscribe(‘edge.remove’, function(targetUrl){
_gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});
FB.Event.subscribe(‘message.send’, function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});
FB.Event.subscribe(‘comment.create’, function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'comment', targetUrl]);
});
FB.Event.subscribe(‘comment.remove’, function(targetUrl) {
_gaq.push(['_trackSocial', 'facebook', 'uncomment', targetUrl]);
});
};
</script>
<!– Facebook button and tracking code ends here –>
Copy-paste this code wherever you want to add your facebook ‘like’ and ‘send’ button.
Please Note: You will be able to track ‘comment’ and ‘uncomment’ social actions only when you have installed Facebook comments social plugin on your web pages.
Tracking Twitter Social Interactions
For twitter, social actions can be: ‘tweet’, ‘click’, ‘follow’ etc. If you want to track all social actions provided by twitter then you need to install the official twitter button on your web pages. You can’t track twitter social actions through Tweetmeme button or other twitter type buttons. I have added the official twitter button to my blog using the following button code:
<!– Twitter button code starts here –>
<a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”horizontal” data-via=”seohimanshu”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
<!– Twitter button code ends here –>
You can get your twitter button code from here.
Now according to Google’s ‘Social Interaction Analytics‘ documention, to capture twitter’s social actions in Google analytics, you need to bind a call back function to the tweet event. Here is the code for that:
<script type=”text/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]);
}
});
twttr.events.bind(‘follow’, function(){
var targetUrl;
if (event.target && event.target.nodeName == ‘IFRAME’) {
targetUrl = extractParamFromUri(event.target.src, ‘url’);
}
_gaq.push(['_trackSocial', 'twitter', 'follow', targetUrl]);
});
twttr.events.bind(‘retweet’, function(){
var targetUrl;
if (event.target && event.target.nodeName == ‘IFRAME’) {
targetUrl = extractParamFromUri(event.target.src, ‘url’);
}
_gaq.push(['_trackSocial', 'twitter', 'retweet', targetUrl]);
});
twttr.events.bind(‘favorite’, function(){
var targetUrl;
if (event.target && event.target.nodeName == ‘IFRAME’) {
targetUrl = extractParamFromUri(event.target.src, ‘url’);
}
_gaq.push(['_trackSocial', 'twitter', 'favorite', targetUrl]);
});
twttr.events.bind(‘click’, function(){
var targetUrl;
if (event.target && event.target.nodeName == ‘IFRAME’) {
targetUrl = extractParamFromUri(event.target.src, ‘url’);
}
_gaq.push(['_trackSocial', 'twitter', 'click', targetUrl]);
});
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]);
}
}
}
</script>
Through the code above you can track twitter’s ‘tweet’, ‘follow’, ‘retweet’ (though i have not seen it working), ‘favorite’ and ‘click’ social actions. Finally your twitter button and tracking code will look like this:
<!– Twitter button and tracking code starts here –>
<a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”horizontal” data-via=”seohimanshu”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
<script type=”text/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]);
}
});
twttr.events.bind(‘follow’, function(){
var targetUrl;
if (event.target && event.target.nodeName == ‘IFRAME’) {
targetUrl = extractParamFromUri(event.target.src, ‘url’);
}
_gaq.push(['_trackSocial', 'twitter', 'follow', targetUrl]);
});
twttr.events.bind(‘retweet’, function(){
var targetUrl;
if (event.target && event.target.nodeName == ‘IFRAME’) {
targetUrl = extractParamFromUri(event.target.src, ‘url’);
}
_gaq.push(['_trackSocial', 'twitter', 'retweet', targetUrl]);
});
twttr.events.bind(‘favorite’, function(){
var targetUrl;
if (event.target && event.target.nodeName == ‘IFRAME’) {
targetUrl = extractParamFromUri(event.target.src, ‘url’);
}
_gaq.push(['_trackSocial', 'twitter', 'favorite', targetUrl]);
});
twttr.events.bind(‘click’, function(){
var targetUrl;
if (event.target && event.target.nodeName == ‘IFRAME’) {
targetUrl = extractParamFromUri(event.target.src, ‘url’);
}
_gaq.push(['_trackSocial', 'twitter', 'click', targetUrl]);
});
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]);
}
}
}
</script>
<!– Twitter button and tracking code ends here –>
Copy-paste this code wherever you want to add your official twitter button.
Please Note: There is no need to add following line of code in the head section of your document to enable Google Analytics Social tracking:
<!– Google Analytics Social Button Tracking –>
<script type=”text/javascript” src=”http://app.tabpress.com/js/ga_social_tracking.js”></script>
Tracking LinkedIn Social Interactions
To track Linkedin social actions via Google Analytics you first need to install the official linkedin share button on your web pages. Unfortunately linkedin call back function ‘data-success’ doesn’t work. This has been an issue for the last several months. If ever this call back function starts working then the following code might track linkedin’s social actions:
<!– Linkedin button & tracking code starts here –>
<script src=”http://platform.linkedin.com/in.js” type=”text/javascript”></script>
<script type=”IN/Share” data-counter=”right” data-success=”LinkedInShare”></script><script type=”text/javascript”>
function LinkedInShare() {
_gaq.push(['_trackSocial', 'LinkedIn', 'Share']);
}
</script>
<!– Linkedin button & tracking code ends here –>
