Tracking Custom Facebook Tab Pages With Universal Analytics

I was recently involved in setting up Universal Analytics tracking for custom Facebook tab pages for a client. At the start of this project, I set out to source some examples.

And although I found a couple of excellent topical resources (e.g. Eivind Savio or Lunametrics), none of the resources I found described how to do this with Universal Analytics. The resources I found all described tracking custom Facebook tab pages with the asynchronous version of the Google Analytics tracking code.

Now that I have figured out how to do this with Universal Analytics I decided to write this blog post. Hopefully it will be of use to people who want to track their custom Facebook tab pages with Universal Analytics.

First of all, what are custom Facebook tab pages ?

Tabs are the navigation items under the profile image on your Facebook page. You will typically see tabs such as “Timeline”, “About”, “Photos” etc.

Facebook also offers the possibility to create custom tabs. An example of such a custom tab page is the Coca Cola Store.

Until 2011, custom tab pages used to be created using Facebook Markup Language (FBML).

Since March 2011, custom tabs are created using iframes. Since these iframes can contain HTML, Javascript and CSS this opens up a realm of possibilities in terms of design, but also tracking these Facebook iframe tab pages with Google Analytics.

How is tracking Facebook iframe tab pages different from tracking regular web pages ?

The main issue with tracking traffic to Facebook iframe tab pages is that Facebook will not reveal the real referrer. Instead, you are most likely to see a referrer like “static.ak.facebook.com” popping up in your list of traffic sources. And when you use Google Analytics campaign tracking parameters in the URLs that send traffic to your iframe tab pages, those parameters will not be passed on. So you won’t be able to track your campaign traffic.

Other than that, tracking Facebook iframe tab pages with Universal Analytics works exactly the same as tracking any other web page. You can use event tracking and set up goals to track the usage of your tab pages.

Work-around to ensure correct referrer tracking

What you need to do to make sure referrer information is recorded correctly, is to set up a redirect page. This redirect page is where you point all campaigns with campaign tracking parameters and traffic generation actions. The role of this redirect page is to redirect to the Facebook iframe tab page.

On this redirect page, you add a piece of Javascript code containing the Universal Analytics tracking code. This code should fire before the redirection kicks in. Hence the delay in the code fragment here below. This will ensure referrer information is passed on and tracked correctly.

<script type="text/javascript">
	/**
	 * Analytics.js script
	 */
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	/**
	 * Analytics.js configuration
	 */
	var propertyId = 'UA-XXXXXXXX-X';
	var fakeUrl = '/facebook/campaign-tracking/';
	/**
	 * Facebook configuration
	 */
	var profileId = 'Facebook app title';
	var appId = 'app_XXXXXXXXXXXXXXXXX';
	/**
	 * Create Analytics.js tracker object
	 */
	ga('create', propertyId, 'auto');
	ga('require', 'displayfeatures');

	/**
	 * Function that redirects the user to the Facebook app
	 */
	var gotoFacebook = function () {
		top.location.href = [
			'https://www.facebook.com/',
			profileId,
			'/',
			appId,
			window.location.search
		].join('');
		};
		
	/**
	 * If this page is not an iframe (framed), redirect to Facebook
	 */
	if (window.location === top.location) {
		if (typeof ga !== 'function') {
			setTimeout(gotoFacebook, 2000);
		}
		else {
			ga('send', 'pageview', fakeUrl);
			setTimeout(gotoFacebook, 200);
		}
	}
	/**
	 * Otherwise, just track the page
	 */
	else {
		ga('send', 'pageview');
	}
</script>

Things to note:

1. When copying the above code fragment don’t forget to replace:

• “Page title” by the name of your page
• “UA-XXXXXXXX-X” by your Google Analytics account details
• “Facebook app title” by the title of your app
• “app_XXXXXXXXXXXXXXXXX” by the id of your app

2. In the above code fragment, the redirect page creates a virtual pageview named “/facebook/campaign-tracking/”. You need to filter out those pageviews from your Google Analytics reports.

3. Filter “static.ak.facebook.com” from your list of referrers using the Referral Exclusion option, which you will find under “Property” -> “Tracking info” in your Google Analytics “Admin” menu .

That’s it. Thanks to Mickael van der Beek for lending his JavaScript expertise.