Tracking Twitter Buttons in Google Analytics

By Colin Temple July 16, 2012

A while back, I wrote some posts on tracking some social buttons in Google Analytics, including Facebook likes and LinkedIn shares. I figure it’s about time I complete the round-up. So, next on the list: Twitter buttons.

Tweet Buttons

When you generate a Twitter button for your website, you’re given code that looks something like this:

<a href="https://twitter.com/share" data-via="YOUR_TWITTER_NAME">Tweet</a>

This is basically a simple link which will be replaced dynamically using JavaScript. The above example is for a button that tweets the current page. If you’re specifying the URL to tweet, your code will be different. You’ll also have your own twitter name in the place of YOUR_TWITTER_NAME, of course.

You also get some JavaScript that is meant to load a widgets.js file. Twitter actually has two versions of this code, one synchronous and one asynchronous. Asynchronous is generally better for your page load times, so we’ll be using that one in this example. So, somewhere on your page you should have the following code as well:

<script>
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"));
</script>

As was the case with Facebook, Twitter was nice enough to give us a callback function that is executed whenever a Tweet is successfully sent from such a button. In order to add Google Analytics social media tracking to this action, you just need the following code added to the page:

<script>
twttr.ready(function (twttr) {
  twttr.events.bind('tweet', function(event) { _gaq.push(['_trackSocial', 'Twitter', 'Tweet', document.title]);  });
});
</script>

This code will first wait for the asynchronous JavaScript to load, then track a social engagement event called ‘Tweet’ in the network ‘Twitter’, as well as sending the title of the page being tweeted. The URL of the page the action occurs on is also sent automatically and appears in the reports. Again, if you are specifying a URL to tweet, you will probably need to replace document.title with the name of the page to tweet, in quotes.

Follow Buttons

Twitter also provides buttons that allow visitors to quickly follow your tweets. The code for such buttons looks like this:

<a href="https://twitter.com/YOUR_TWITTER_NAME" data-show-count="false">Follow @YOUR_TWITTER_NAME</a>

You’ll need the asynchronous code given above to make this button function as well. Again, Twitter’s callback functions let you recognize whenever someone performs a follow action, and you can track the social media engagement accordingly. The following code will do the trick:

<script>
twttr.ready(function (twttr) {
  twttr.events.bind('follow', function(event) { _gaq.push(['_trackSocial', 'Twitter', 'Follow', event.data.screen_name]);  });
});
</script>

This code tracks a social action called ‘Follow’ in the network ‘Twitter’, and sends the Twitter name of the user followed. Please note also that all code on this page uses the Google Analytics asynchronous tracking code. If you’re using the traditional snippet, you’ll need to make modifications.

All of this allows you to gauge the effectiveness and utility of Twitter buttons on your site. Using segmentation, you can see whether people who tweet articles/posts/content are more engaged or likely to purchase than others, or whether certain content gets you more Twitter followers.

So, that’s basically it — use the code above and start measuring the impact of Twitter buttons on your site’s traffic. The results will show up within Google Analytics under Traffic Sources > Social > Social Plugins.

Cheers,

Colin

2 Responses to “Tracking Twitter Buttons in Google Analytics”

  1. Herrie Says:

    How can I add both to my Joomla website?
    I now use this:
    In the ‘index.php’

    in this document:

    var _gaq = _gaq || [];
    _gaq.push([‘_setAccount’, ‘UA-16213141-1′]);
    _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);
    })();

    Any help to compose a new file to include, using this code?
    Social Buttons Plugin from Social Dance to show the buttons

  2. Muskie Says:

    Thanks for this, I had trouble getting Twitter button clicks to track, Google+ is of course the easiest and there seems to be more documentation / examples for Facebook.

    The best way is of course a plugin but for old but important pages it is good to know how to do it by hand.

    Cheers,

Leave a Reply