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 yoursocial 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.

Assumption

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.

Adding the tracking script

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  tag:

<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.

Adding Facebook Like button tracking code

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&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:

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

Adding Twitter button tracking code

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  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>

Implementing Social Tracking in WordPress

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

Viewing the Analytics

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

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.

That’s it.