IFrames For Facebook Part 2: How To Track

In Part 1: How to Implement, Brian told you all about how to get an iFrame app or tab set up in Facebook. Now I want to talk about how we can track it.

In the past, there were a number of methods for trying to track Facebook using Google Analytics. None of them worked particularly well (for a bunch of boring technical reasons like image caching and cookie domains). Now, however, since we’re putting our very own pages on Facebook via iFrames, the situation is much improved.

Before I go any further with the How, let me be clear about the What:

• We can track iFrame applications on canvas pages or on tab pages in our Facebook profile. This includes any interaction people take within the iFrame, as well as information our app can get from Facebook through its SDK (such as whether they “like” us already or not). We’ll get the same tracking on the iFrame pages as any other page on our own website.
• We cannot track behavior on non-iFrame pages on Facebook — even something on our profile if it’s not an iFrame, like your Wall or Info page, for example. And if someone gets to our pages simply by browsing from elsewhere on Facebook, we don’t know where exactly they came from (Facebook obscures this for privacy reasons).

Tracking Code

Put the regular Google Analytics tracking code on the pages you’re including in your iFrame. Here are some guidelines about additional things you may want to keep in mind:

• You may want to create a filtered profile that includes just the pages that are on Facebook, so that you can easily track their traffic separately.
• If the pages for your app are on your regular site’s domain, they share the same cookies that your regular site does. This means GA already recognizes a returning visitor, uniques get counted correctly, etc. Basically, the Facebook app functions as an extension of your site, even though folks are seeing it on Facebook.
• If there are interesting things people can do with your app (and there should be!) set up goals, events, or other GA methods to measure them as appropriate. You could, for example, set a custom variable for all the people who’ve “liked” your page, or even just visited your Facebook tab before, so that you can connect that fact to all the conversions that happen over on your site.
• You may want to make an alteration to the tracking code as described below.

Traffic Sources

One tactic that’s becoming more common is to use social media as landing pages for advertising and marketing campaigns. For example, you might run promotions that link to your app or tab saying “Try our app and enter for a chance to win X” or “Like us on Facebook and get a free shipping coupon” or whatever.

What we commonly do in Google Analytics is use campaign-tagged URLs to measure these kinds of sources of traffic. We can do this with Facebook, too, but we may need to be a little tricky.

If you are sending people to an app directly (that is, to a canvas page with a URL like apps.facebook.com/my-app-name), you can include campaign tags in the landing page URL and they are passed through to the iFrame page. No problems there.

If you are sending people to a tab page (that is, to a tab within your profile with a URL like www.facebook.com/my-page-name?sk=something, for example), Facebook obscures the referrer to the iFrame page. It’s always something like static.ak.facebook.com/platform/page_proxy.php, and the campaign parameters don’t get passed through. (Facebook does these things, not to make your analysis difficult, but for privacy reasons.)

However, there is a solution for tracking campaigns linking to tab pages, and it’s a pretty simple one. There are two parts to making it work:

1. Create a page on your site that redirects to the Facebook tab, and link to this page from your ads with the appropriate campaign URLs. On this page, run the GA tracking code before the redirect.
2. Add _addIgnoredRef(“static.ak.facebook.com”) to the tracking code on your iFrame page(s) in your Facebook tab.

In step 1, when a user lands on this page, the GA tracking code runs, sees the campaign tags, and records the campaign values into your cookies. Then we send them along to the Facebook tab.

In step 2, when the user gets to the Facebook tab with the iFrame, the cookies already exist with the right values (and since the iFrame pages are on the same site as the original redirect page, there’s no problem with sharing those cookies). However, what we don’t want to happen is for GA to see the referrer for the iFrame page and say “Oh, this is a referral from Facebook” and overwrite the campaign information that’s already in that cookie.

So, we use _addIgnoredRef, which is a function in Google Analytics that just ignores a certain referrer. By including this, referrals from static.ak.facebook.com (that is, to all our iFrame pages) will simply be treated as direct and not overwrite any information that’s already in the campaign cookie.

Here’s what the code should look like, depending on which flavor of the Google Analytics tracking code you’re using:

// asynchrounous version
_gaq.push(['_addIgnoredRef', 'static.ak.facebook.com']);

// standard version
pageTracker._addIgnoredRef('static.ak.facebook.com');

This should come after you specify your account number but before the _trackPageview (because that’s the point at which the cookies get written, so we have to tell it to ignore the referrer before that).

Then, all our campaign parameters work out, and we don’t get static.ac.facebook.com overwriting any of the campaign info.

The Data

You get all the same data in GA you’d get for any page on your site, because the iFrame pages are pages on your site. You can also include them in goal funnels, use them to define advanced segments, etc. Your Facebook app or tab basically becomes just like any other page in your GA data.