Track Social Widget Events Using Google Analytics

Follow Me on Pinterest

There is a time when you are building your website that will need to track a users social share activity. Whether it be a Google Analytics event or you just want to be able to increment a count in your database.

Facebook, Google & Twitter all provide functionality that allows you to do this by providing callback functionality to handle a user interaction with your widget.

Below shows how we would acheive this using html and javascript.

<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
  <head>
  	<title>Tracking You Social Share Widgets</title>
  	<!-- Open Graph Meta -->
  	<meta property="og:title" content="YOUR SITE TITLE" />
    <meta property="og:site_name" content="YOUR SITE NAME" />
    <meta property="og:url" content="YOUR SITE URL" />
    <meta property="og:description" content="YOUR SITE DESCRIPTION" />
    <meta property="og:image" content="YOUR SITE IMAGE URL" />
    <meta property="og:type" content="YOUR SITE TYPE" />
    <meta property="fb:app_id" content="YOUR FACEBOOK APP ID" />
    <link rel="canonical" href="http://www.example.com" />
	<!-- We use the explicit load to render a google plus button -->
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <!-- Our google analytics code -->
    <script type="text/javascript">
	   var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'YOUR ANALYTICS CODE']);
	  _gaq.push(['_setDomainName', 'YOUR DOMAIN']);
	  _gaq.push(['_setAllowLinker', true]);
	  _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>
  <body>
  	<!-- Our social widgets -->
  	<div id="facebook"></div>
    <div id="google">
      <g:plusone></g:plusone>
    </div>
    <div id="twitter">
    	<a href="https://twitter.com/share" class="twitter-share-button" data-url="YOUR SITE URL" data-text="YOUR TWEET TEXT">Tweet</a>
	</div>
    <!-- Google render code -->
    <script type="text/javascript">
		//render the plus one button
		gapi.plusone.render("google", {"size": "medium", "callback": PlusOneCallback});
		//function to track th plus one event
		function PlusOneCallback(plusone) {
			//track plus one event
			_gaq.push(['_trackEvent', 'SOCIAL_SHARE', 'google']);
		}
    </script>
    <!-- Facebook render code -->
    <div id="fb-root"></div>
	<script type="text/javascript">
    //run the script code to get the facebook javascript sdk
    (function(){
        var e = document.createElement('script');
        e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
    //run when sychronisation of facebook javascript sdk is finished
    window.fbAsyncInit = function(){
		//initialise the application
		FB.init({appId: 'YOUR FACEBOOK APP ID', status: true, cookie: true, xfbml: true, oauth: true});
		//build the like button for the page
		document.getElementById('facebook').innerHTML = '<fb:like send="false" layout="button_count" width="450" show_faces="false" style="border:none; overflow:hidden; width:120px; height:21px;"></fb:like>';
		//parse the button
		FB.XFBML.parse(document.getElementById('facebook'));
		//subscribe to the like event
		FB.Event.subscribe('edge.create', function(response) {
			//track that the user has liked the page
            _gaq.push(['_trackEvent', 'SOCIAL_SHARE', 'facebook']);
        });
    };
    </script>
	<script type="text/javascript" charset="utf-8">
        window.twttr = (function (d,s,id) {
            var t, js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
            js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
        }(document, "script", "twitter-wjs"));
        <!-- determine when twitter is ready -->
        twttr.ready(function (twttr) {
            // bind events here
            twttr.events.bind('tweet', function(event) {
                _gaq.push(['_trackEvent', 'SOCIAL_SHARE', 'twitter']);
            });
        });
    </script>
  </body>
</html>

Using these callbacks allows you to determine if a user has successfully shared content from your page and respond accordingly.

Filed Under Code Share, Events, Social.
Bookmark the permalink.

Let me know what you think:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>