We get asked very often how to track Facebook “Like” buttons inside Google Analytics, so here’s a post that will show you how to do it. There are basically three steps – first, you need to get the Like button on your pages using the XFBML / Javascript version of the Like Button. Next, you’ll need to fire some Google Analytics code in a Facebook event that tells us when a successful “like” action has occurred. Lastly, you need to find where it all ends up in Google Analytics and take action based on your new data!
1. Get a Facebook Like Button on your page(s)
The first step is to actually get a Facebook Like Button on your page. The quickest way to do this is to go here:
http://developers.facebook.com/docs/reference/plugins/like
Just fill out the form and click the “Get Code” button…you’ll see something like this pop up:
Now, you’ve got two options here. The iFrame version is admittedly the easiest to install, but unfortunately you don’t have any way to track when someone actually clicks and successfully “likes” your page as a result. There’s no onClick event you can use for an <iframe>, or for a <fb:> tag for that matter. And even if you could, the click itself doesn’t tell you if someone actually successfully liked your page or not – remember, they have to log into Facebook first, via a popup that might even be blocked in some browsers, so your click and Like counts may be very different.
So instead, we’re going to use the XFBML version (highlighted).
To implement this, you’re going to need to use the Facebook Javascript SDK – basically it works like this (and you can view the source of this page – you’re looking at a working example):
- Update your
<html>tag to include - Add the proper Open Graph Protocol meta tags – this is not necessarily required but a good thing to do.
- Reference the Facebook Javascript library – we recommend you use the following asynchronous version (make sure to put your own App ID in there):
- Add the XFBML that you generated above (make sure to update it with your own page URL as the source and add any available attributes you might want) where you’d like your button to appear on your page:
xmlns:fb='http://developers.facebook.com/schema/' xmlns:og='http://opengraphprotocol.org/schema/'
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'INSERT YOUR APP ID HERE', status: true, cookie: true,
xfbml: true});
};
(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);
}());
</script>
<fb:like href="http://www.somesite.com/somepage"></fb:like>
2. Fire a Google Analytics Event when a “Like” action occurs
OK, at this point you’ve got your Like button up and running. Now in order to track these in Google Analytics, we’re going to use Event Tracking to fire an event whenever someone successfully Likes the page. You can choose to set this up in whatever hierarchy you like, but here’s one you might want to use:
Category: “facebook”
Action: “like”
Label: URL of the page that was “liked”
Using the _trackEvent() method of the pageTracker object, the Google Analytics javascript code would look like this:
pageTracker._trackEvent('facebook','like', href);
Note: This is the synchronous version of the Google Analytics code and assumes a javascript variable called href contains the URL of the page that’s being “liked”
So the last step in this process is to actually fire this code only when a successful Facebook like occurs. To do this, we’re going to subscribe to an event that Facebook exposes to us when the successful “like” action occurs. When we detect that event, we’ll fire our _trackEvent code. Here’s the code that will do it:
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
pageTracker._trackEvent('facebook','like', href);
});
</script>
Note: The safest placement of this code is somewhere BELOW your standard Google Analytics tracking code – this will ensure that the pageTracker object has been defined before you try to use it
That’s it! Feel free to get creative here…want to use a Custom Variable to create a segment of either visitors (scope = 1) or sessions (scope = 2) that “Liked” something? Then all you would have to do is something like this (make sure your slot 1 is available and you want this at a visitor scope for the exact code below):
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
pageTracker._setCustomVar(1,'facebookLiker','true',1);
pageTracker._trackEvent('facebook','like', href);
});
</script>
Want to stick this data into a database so you can use it for any number of customized reasons? Just fire some AJAX in there. Just about anything you can accomplish with Javascript can be done with each Like event.
3. Find that data in Google Analytics and USE it!
Now, you can log into your Google Analytics account and head over to the Content > Event Tracking reports and take a look at the Categories, Actions and Labels as you’ve defined them:
Note that here we’ve drilled down to the Category of “facebook” and the action of “like” – now we’re looking at a list of the URL’s we passed in – or in our case the actual blog posts that people “liked.” They’re a bit ugly since they’ve been formatted for proper URL encoding, but hovering over the label itself will let you see the URL that was “liked” pretty clearly.
So what do we do with it?
Well, this is one more set of data that can be used to identify what content resonates with your user base. Which are the popular themes of blogs? Which are the authors that our visitors like the best? Which topics do people like to read about? We can look at the Site Usage tab right here to understand if people who like certain blog posts are any more engaged (think bounce rate, time on site, average pageviews per visit) than others. We can look at our Ecommerce tab and find out if people who like certain pages are more or less likely to, say, sign up for one of our live Google Analytics or Website Optimizer Seminars for Success trainings. With this knowledge, we can tailor the content that we write to the things that people like the best and the things that get people to engage with our site and convert on our goals.
And don’t forget about your Advanced Segments! Below you can see a quick Advanced Segment configuration that will quickly let you compare those Facebook Likers to any other segment of traffic you care to define:
Hope this helps a few of you out, and we’d love to hear how you’re using this in the comments!
