Track Facebook Like Buttons in Google Analytics
I posted recently about event tracking, arguing that everything on your site should be worthy of tracking because everything on your site should be valuable. When people wonder about the value of website elements, what often comes to mind is social media.
Social media is difficult to track, and as a result, it’s notoriously difficult to assign value to it. So, adding tracking to the few places you can is important. One of those places that we frequently encounter is the Facebook Like button.
Last week, Google introduced Social Interaction Tracking in Google Analytics. Essentially, this allows you to put events from social media interactions into a special category that groups all social engagements together. We’ve been tracking social media interactions on our clients’ sites for quite a while, but until now this was done with event tracking. The new format, using the Social Interaction reports, lets you view the data through reports that are specifically tailored for this kind of activity. It also lets you more easily group any kind of social interaction together, and provides some automatic segmentation of socially engaged visitors.
So, using this new code, here’s my update on how to track Facebook “Like” buttons in Google Analytics. In this example I use the latest code from Facebook, so you’ll want to update any existing Like buttons you have. I also used the latest, asynchronous version of the Google Analytics tracking code.
Getting your Facebook Like Button code
The first thing you’ll need is the code that actually creates the Like button, which can be obtained from Facebook. Facebook requires you to be a registered Facebook developer in order to make your buttons, which means confirming that you’re a real person either by a text to your mobile phone, or by entering credit card information.
In the post I mentioned above, I said that everything that happens on your site can be tracked — but that some things, including iframes and entirely-external JavaScript cannot easily fit into the mix. Facebook Like buttons can fit into either category. There’s an iframes version, which simply loads in a tiny window into Facebook that’s outside of the reach of JavaScript. The consequence: you can’t track the iframes Like button.
The other method uses Facebook’s XFBML. This version is mainly JavaScript-driven, but includes one very cool feature: Facebook provides a function to handle a Like event. That is, Facebook gives you an opportunity to add extra code to be executed whenever a “Like” happens. This is the perfect spot for Google Analytics event tracking, so make sure to choose the XFBML version of the Like button.
Facebook will give you some code that looks something like the following. Of course, APP_ID_HERE and PAGE_URL will both be replaced by your App ID from Facebook, as well as the URL of the page to Like — both of these parameters are set automatically when you generate the button. The settings you choose when you generate the button will change the second line.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID_HERE&xfbml=1" type="text/javascript"></script>
<fb:like href="PAGE_URL" send="false" width="100" show_faces="false" font=""></fb:like>Adding the Google Analytics social tracking
What you need to add is a simple line of code that adds a new JavaScript function. This function’s purpose is to execute whenever the Like button is clicked, and fire a Google Analytics tracking code when that happens.
The asynchronous (async) version of the code looks like this:
<script type="text/javascript">
FB.Event.subscribe('edge.create', function(href, widget) { _gaq.push(['_trackSocial', 'Facebook', 'Like', href]); });
</script>You may also want to track “Unlikes”, cases where a visitor clicks the Like button again to remove the page from their Liked content. Using the async method, add this to the JavaScript:
FB.Event.subscribe('edge.remove', function(href, widget) { _gaq.push(['_trackSocial', 'Facebook', 'Unlike', href]); });Here’s what the final code looks like when you’ve added the new tracking snippet. Again, APP_ID_HERE and PAGE_URL, in red, need to be replaced. The new tracking code is highlighted in color:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID_HERE&xfbml=1" type="text/javascript"></script>
<fb:like href="PAGE_URL" send="false" width="100" show_faces="false" font=""></fb:like>
<script type="text/javascript">
FB.Event.subscribe('edge.create', function(href, widget) { _gaq.push(['_trackSocial', 'Facebook', 'Like', href]); });
FB.Event.subscribe('edge.remove', function(href, widget) { _gaq.push(['_trackSocial', 'Facebook', 'Unlike', href]); });
</script>So that’s it! Google Analytics tracking for Facebook “Like” buttons on your website. Once people start to ‘Like’ your pages, you’ll see the data show up in the Visitors > Social area of your Google Analytics account (in the new version).
Using the Data
Once you have your tracking in place, your web analyst can make use of Google Analytics segmentation and a little bit of smarts to answer some really cool questions. Are the same visitors who “Like” products the same ones who actually buy them? Do posts, pages and articles with more Likes serve as the landing pages for more converting visitors? Is there a best position for social media buttons to get the most shares, Tweets and Likes without distracting from conversions?
All of these questions can be answered with this data. Together with the referral data from incoming Facebook visitors, these insights can give you a sense of how valuable Facebook Like buttons are on your site and how you can best make use of them.
Until next time,
Colin
