Upcoming LunaMetrics Seminars
Washington DC, Dec 1-5 Los Angeles - Anaheim, Dec 8-12 Pittsburgh, Jan 12-16 Boston, Jan 12-16

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.

iFrames for Facebook

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.

Jonathan Weber

About Jonathan Weber

Jonathan Weber is the Data Evangelist at LunaMetrics. He spreads the principles of analytics through our training seminars all over the East coast. The next seminar he'll be leading will be a Google Analytics training in Boston. Before he caught the analytics bug, he worked in information architecture. He holds a Master’s degree from the University of Pittsburgh School of Information Sciences. Jonathan’s breadth of knowledge – from statistics to analysis to library science – is somewhat overwhelming.

http://www.lunametrics.com/blog/2011/04/28/iframes-facebook-part-2-track/

21 Responses to “iFrames for Facebook Part 2: How to Track”

joe says:

Hi Jonathan,
Interesting workaround. In your page tab solution would it fire two clicks? One for the redirect and one for the FB tab?
Thanks.

Grant Eagle says:

Hi Jonathan, thanks for the post really useful although could you give me a way to make sure the GA code completes before the redirect??

Eivind Savio says:

Hi

I have a question to Jonathan myself, but since that question is partly related to the question for Joe I will answer your question first:
Yes it will fire 2 clicks, or more correctly, 2 pageviews. One for the redirect and one for the FB tab.

To Grant:
I’m using a different method than Jonathan (although it is built on the same principle).

In my version all the tracking is done without a redirect page, instead I’m forcing my iFrame page to be framed by the Facebook Tab page (a redirect occurs, but I’m not using a redirect page). To be able to do this I’m first checking if the __utm.gif is loaded using javascript. If it is loaded I create a fake page name in GA, and then I force the page into the Facebook iFrame.

I’m planning to publish my solution, but since I experience some issues with both my solution and the solution in this blog post I haven’t done so yet.

The issue is Internet Explorer. No data is recorded for the pageview within the iFrame, only the redirect is tracked.

Do you experience the same problem with Internet Explorer Jonathan?

Eivind Savio says:

To answer myself about the Internet Explorer problem (but I don’t have a solution).

Tracking Internet Explorer users in Google Analytics (or other web analytics tools) visiting your Facebook iFrame is really problematic. Only users with their Privacy Settings set to Low will be tracked.

Since Facebook doesn’t have a P3P policy either (P3P can be a workaround with iFrames on third party domain with IE), I’m for the moment out of luck with the Internet Explorer problem.

Jonathan Weber Jonathan Weber says:

Elvind — yes, you are correct that only IE users with privacy settings of “low” can be tracked in IE. As far as I know, there’s no way to get this to work with IE without P3P headers, which as you noted Facebook does not have implemented.

Eivind Savio says:

Hi again Jonathan.
I think I have to correct myself. It doesn’t matter if Facebook haven’t implemented P3P.

You’ll find my solution for Tracking Facebook iFrames here (solution inspired by your blog post):
http://www.savio.no/blogg/a/104/how-to-track-facebook-iframes-with-google-analytics

Jonathan Weber Jonathan Weber says:

Elvind — that’s great. It’s been a long time since I’ve dealt with third-party iFrame issues in IE (since I always steer people clear of it when possible), but it’s good to see that this can successfully be implemented on Facebook.

Rick says:

Have you ever run into the problem where Firefox does not track?

I’m monitoring traffic for requests to the _utm gif and only IE and Chrome are tracking requests. Firefox never sends anything yet there are no JS error and it requests the analytics js file from google ok.

When I view the iframe directly (no facebook wrapper) Firefox works then too

I’ve tried clearing cache & cookies and run in safemode, but Firefox still doesnt want to track… at a loss

I have been looking for tracking iframe fan page on google for a long time, and have been getting old stuffs on fbml stuffs. Thanks for sharing these information and I will definitely apply it and come back with the results…

lydiangwy says:

Hi Jonathan, thank you for this article!
I have a question on a specific scenario:

what if i am not currently running ad campaigns to drive visits to the tabbed page?
instead, they land there directly.
in that case, creating a page on my site will not work because i am not redirecting them at all.

what workaround can you suggest?

Troy Morris says:

Question: Does this redirect off Facebook affect Facebook ad tracking? It seems as though you would lose some of the social tracking Facebook Advertising gives you.

Vlad says:

Guys, and what about if iFrame app uses different domain than the original site? Should the cross-domain implementation be used? Or is it enough to use original tracking code?
Thanks in advance.

Hello there, I discovered your website via Google whilst searching for a related topic, your website came up, it looks good. I’ve bookmarked to favourites|added to my bookmarks.

Paul says:

There’s actually a way to do this without the re-direct in the middle, which is a lot cleaner and safer.

You can pass your tracking variables(e.g. utm_source=foo&utm_medium=bar&utm_campaign=zing) url encoded in a variable called app_data to the page tab url. The app_data variable will be added to the signed request passed to your iframe.

So if your normal tracking vars are:
utm_source=foo&utm_medium=bar&utm_campaign=zing

You can point your ads to link to:
facebook.com/mypage?sk=app_MYAPPID&app_data=utm_source%3Dfoo%26utm_medium%3Dbar%26utm_campaign%3Dzing

Parse the signed_request as your normally would on your tab page, the that string will be available in it as app_data. You can then write out your analytics tags on the page. (Assuming you’ve set your P3P header.)

Paulo Reiss says:

Hello all, I found this an amazing solution to a problem that I really needed to be solved.

However, when we applyed on a campaign, exactly as mentioned on the post, I noticed a loss of around 80% of the Facebook media ad clicks that would not become visits to the landing page tab.

This doesn’t make any sense, appears that Google Analytics is not tracking correctly at all! Anyone had problems like this? Maybe something related to the tag position on the source code?

Thanks in advance.

Jhonatan says:

Hey,

Thank you for that post.
I’m not sure that it would work for adwords ads because you can only redirect within the same domain : eg http://www.mydomain1.com/cat1 ==> http://www.mydomain1.com/anothercat.

Which means you won’t be able to do the following http://www.mydomain1.com/myfacebookapp ==> http://www.facebook.com/mytaburl

Has anyone been able to work that around ?

Cristina says:

Hi!!

I have an iframe on Facebook and let me know if I can see where they come from traffic sources in Google Analytics and it did not appear s.static.ak.facebook.com

I heard that FBML was substituted by iFrames which is the best way to create a welcome page on facebook, but to use it i need iFrames codes otherwise it’s impossible, so i was wondering if anyone of you could give me that blessed codes to do a welcome page beautiful like this(it’s an italian page ok Facebook): ~ Jenny Graphics.

Good article on how to make GA show proper results. Cheers!

Leonardo says:

Nice article!

What about if the user’s settings are setted with a secured connection (https)?

Facebook redirects to the s-static.ak.facebook.com.

Does it make any difference? Should we put a function like:

if is http

_gaq.push([‘_addIgnoredRef’, ‘static.ak.facebook.com’]);

if is https

_gaq.push([‘_addIgnoredRef’, ‘s-static.ak.facebook.com’]);

It would probably work! Wouldn’t it?

Thanks =)

Franklyn Vankilsdonk says:

You are so right Richard! Serena is an inspiration all by herself. . . and an excellent writer. Thanks again Serena. Richard, beautiful work!