How to Add Social Tracking For Google Analytics In Your Site

For all of you who have implemented the social sharing buttons on your blog/website, don’t you wish that you can track the traffic generated from the clicks of these buttons? You can’t do that in the past, but with the new social tracking feature in Google Analytics, you can do it now. By adding a few lines of code to your existing Google Analytics code, you can quickly get GA to track the number of clicks on your social sharing buttons and the effectiveness of your social media campaign.

At the moment, the social tracking feature in GA only supports Facebook, Twitter and Google +1. The Google +1 tracking is already integrated to GA, so you don’t have to add any extra code. This article will show you how to implement the tracking code for Facebook and Twitter.

Before we start, I have to assume that you are using the newer asynchronous Google Analytics code on your site. It should look something like this:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxx-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>

If not, go to your Google Analytics account, grab the new code and add it to your site.

Download this minify javascript and upload to your server (the original script can be found here).

Add the following code to your header file, just before the </head> tag:

<!-- Google Analytics Social Button Tracking -->
<script type="text/javascript" src="http://url-to-script/ga_social_tracking_min.js"></script>

Replace “url-to-script” to the actual URL where you upload the javascript file.

In your web page, locate the section where you display the Facebook Like button code. It should look something like this:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=222584734419298&amp;xfbml=1"></script>
<fb:like href="" send="true" width="450" show_faces="true" font=""></fb:like>

Just below this code, add the following:

<script type="text/javascript">_ga.trackFacebook();</script>

The complete code should look like this:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=222584734419298&amp;xfbml=1"></script>
<fb:like href="" send="true" width="450" show_faces="true" font=""></fb:like>
<script type="text/javascript">_ga.trackFacebook();</script>

For Twitter’s Tweet button, we need to add a callback function to activate the tracking. All you have to do is to copy/paste the code to your <head> tag.

<script>
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
// Setup a callback to track once the script loads.
twitterWidgets.onload = _ga.trackTwitter;
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>

If you are using WordPress, one plugin that you can use to implement the tracking code is Social Media Tracking.

Log into your Google Analytics account. If you have not switched to the new version, do it now.

ga-new-version

Under the “Visitor” section, you should see a “social” link. click the “Engagement” link and you should be able to view your social engagement statistics.

ga-social-engagement

That’s it.