So after I built my sparkling new Jekyll-based blog and wired up the usual third party widgets such as Disqus and Twitter buttons, I wired up Google Analytics (GA) to ensure that I start recording analytics on the website and get a better understanding of the blog’s traffic.
When it came to wiring up GA with social media on the blog (and namely the Twitter follow and tweet buttons), I was surprised that a simple google did not return a concise walk through of how this should be done given how social media has become a mainstream medium for many businesses in this day and age.
Although the process is relatively straight forward, I decided to write a quick blog post on how I ended up putting it all together. To be honest, I am currently still brand new to the blogosphere and thought this could be something straight forward to get me started to get my learning and thoughts out there.
To skip this write-up right to the final solution click here.
The importance of tracking social media
Writing a blog post or any content on the web is more akin to a stab in the dark; you don’t really know if it is relevant for people or if there is an audience for the material that you are discussing. Hence, the importance of understanding the impact of your content on people… and what better way to track it nowadays by measuring reactions on social media.
Not only are you getting page views for content that you have produced, but some people thought it was worthy of their time to share it with others in their network. Tracking how many times an item was re-tweeted or followers that were added to your profile can provide a huge insight on what grabs your audience’s attention.
The next step after having harnessed all this information is to obviously act on it by analysing it… but that’s a topic for another blog post.
Setting up Twitter widgets
To add a Twitter widget to your website such as a twitter like or follow button, it is as simple as embedding the following on your page:
In this post I will be mainly focusing on Twitter integration but the principles explained can work for any other social network that you are using.
Twitter API object
By embedding a twitter widget, your page will have access to Twitter’s API via the
twttr global object when the
page loads. If you open the source of
widget.js you will find something similar to the following line:
twttr object gives you access to Twitter-dubbed “Web Intent Events”
by subscribing to twitter events that you are interested in knowing about when they take place. Examples of such
events that you can listen to are like
widget.js resource loads asynchronously, you need to wait before binding events. This means that you
will need to wrap any event bindings in a callback function which will be executed when everything has loaded:
A heads up - Twitter has the following word of warning about using their API:
Note that Web Intent events are not supported in Internet Explorer before version 8, and may not function fully in browsers that don’t support the browser postMessage API (such as Chrome for iOS.)
What most documentation online misses telling people is that the
twttr object will not be available on initial
page load, but only after the DOM has completely loaded.
If you are using JQuery as a framework on your page, you can use their
window.onload, however, as this
Stackoverflow thread illustrates its not that simple and you are better off using
a framework that does all the cross-browser plumbing for you for free.
Setting up Google Analytics
Adding (GA) is very straight forward and there are plenty of resources online that talk about to do so. The two gotcha’s that I had to get my head around when I was doing this recently were the following:
1. Classic vs Universal Analytics
It seems that GA has two tracking codes that can be used - Classic Analytics (ga.js) and Universal Analytics (analytics.js) with the latter being the new defacto that you should be using. Universal Analytics is pretty much the new API that GA is introducing and Classic will soon be deprecated. If you are using Classic GA and want to upgrade, you can follow this walkthrough.
2. Embedding Universal Analytics in your page
If you have worked with GA in the last couple of years, you will remember that the recommended location to embed the
GA resource scripts is at the bottom of the page just before you close the
</body> tag. The new Universal Analytics
tracking code is however asynchronous, and hence can be embedded in your page’s
<header> tag without forcing your
HTML content to wait until the file is downloaded.
Tracking Social Media with Google Analytics
As part of GA’s new Universal Analytics API, it has introduced a new more specialised way to track social events instead of the generic event tracking measure. The new social interaction tracking has the added benefit of introducing a consistent method for recording social interactions, which in turns results in a consistent set of reports that allow you to compare social interactions across multiple social networks - finally GA going social first!
To send a social interaction, you simply need to invoked the
send command with the
social hit type to the
object made globally available when you embed GA.
Putting it all together
To put all the above pieces together, you can track Twitter follow and tweet interactions on your page by using the following snippet:
To provide my reports with as much rich information for me to make sense of it, I also include the URL of the page that a user triggers any Twitter interactions from because that is a very important piece of information for me. I extract the page URL and title from the meta data of the page. You might want to play around with how you pull out this information to suit your site.