How to Track Facebook iFrames with Google Analytics

How to Track Facebook iFrames with Google Analytics

When Facebook launched Facebook iFrame Tabs for Pages, tracking visitor interactions, goals or whatever inside the iFrame in for example Google Analytics suddenly seemed very easy. A common answer in forums when people asked about this was “just add your regular Google Analytics code to your iFrame page“.

Unfortunately things aren’t that easy. If you just add your regular Google Analytics script to your iFrame page, you are missing 2 important things:

  1. Tracking traffic sources to your Facebook iFrame Tab is not possible
    • Facebook will be the referral for all the traffic to your Facebook iFrame Tab
  2. Visitors using Internet Explorer will not be tracked

In this blog post I show you how these problems can be overcomed.

Handling the Traffic Source Problem

In an earlier blog post LunaMetrics explained how tracking Traffic Sources to the Facebook iFrame Tab Page could be done (I recommend you read the article from LunaMetrics since they also explains some other important things). The method is tosend the visitor to a page outside Facebook that will track the traffic source, and then redirect the visitor to the Facebook iFrame Tab Page.

However, if you just redirect the visitor, Google Analytics will probably not track the visit since the Google Analytics script will not be able to load before the redirect occurs. In other words, you must use a delayed redirect.

The delay can either be “wait 1 second, hope Google Analytics has loaded, and then redirect”. Or as I do in this script, check if Google Analytics probably has loaded, and then redirect (or frame the page as I do).

Since I’m framing the page, I don’t have to create an additional redirect page. Everything is handled by the script in the Facebook iFrame Page.

As an example, I have created a Facebook iFrame Tab Page at this adress:

  • http://www.facebook.com/Savio.no?sk=app_180487048663627

If I want to track the traffic source to that page, I will link to my iFrame Page and not to the Facebook iFrame Tab Page.

Lets pretend that my Facebook iFrame Page can be found at this adress:

  • https://facebook.savio.no/

If you would track campaign traffic to the Facebook iFrame Page (ex. promote your Facebook Page in a newsletter), then you should add campaign tracking to the URL like this:

  • https://facebook.savio.no/?utm_source=newsletter&utm_medium=email&utm_campaign=yourcampaign

Google Analytics tracking code for Facebook iFrame Tab Pages

Below is the Google Analytics code I’m using to track Facebook iFrame Pages. The code handles:

  • Campaign tracking
  • Delayed redirect if the visitor is landed on the iFrame Page
    • The code is checking if _gaq.push is loaded before it redirect the user to the Facebook iFrame Tab

Add the code between <head> and </head> to your iframe page.

 Why Internet Explorer Privacy Settings can make your life miserable

To be able to make things work in Internet Explorer can be a nightmare, whether it is CSS, javascript or in this case – tracking Facebook iFrame Tab Pages in Google Analytics.

Internet Explorer - Cookies blockedThe problem isn’t related to Google Analytics, you will get the same problem with other web analytic tools. The problem is related to Internet Explorerand handling of cookies from a third party website inside an iFrame.

If the users Privacy Settings in Internet Explorer is set to “Medium” or higher, Internet Explorer will block cookiesfrom your iFrame Page and Google Analytics, and the visit will not be recorded.

The solution: P3P (Platform for Privacy Preferences)

To get around this problem you will have to send a P3P (Platform for Privacy Preferences) Header in your iFrame Page.

A P3P Header may look something like this:

P3P: CP=”NOI DSP COR CURa ADMa DEVa TAIa OUR BUS IND UNI COM NAV INT”

What you add as a CP value doesn’t really matter. CP=”Eivind is Cool” will also work. So where do the quoted CP values come from?

I had a really hard time before I was able to get P3P work in Internet Explorer. On my way to a working solution I came across the P3P Policy Editor from IBM. This editor has generated the values for my P3P Header based on the information I added to my P3P XML file.

  • P3P reference file: http://www.yourdomain.com/w3c/p3p.xml
    • The reference file should always be located at the adress /w3c/p3p.xml
  • Full P3P policy: http://www.yourdomain.com/w3c/full-P3P-policy.xml

Just to be specific, creating and uploading P3P XML files isn’t necessary, but if you want to show your Internet Explorer visitors your Privacy Preferences upload these files.

Internet Explorer - P3P XML File missing

Image: P3P XML File missing.

Internet Explorer - P3P XML File Reference in place

Image: P3P XML File Reference in place.

Below you find code examples of how to send a P3P Header in ASP.NET, ASP and PHP.

P3P Header for ASP.NET using global.asax

ASP.NET implementation may look like the following:

P3P Header for “old” ASP

ASP implementation may look like the following (implement this as the first code in your .asp iFrame page):

P3P Header for PHP

PHP implementation may look like the following (implement this as the first code in your .php iFrame page):

 P3P Header for PHP using .htaccess

PHP implementation may look like the following (source):

Source: Manipulating HTTP Headers with htaccess

The easiest method to identify if your P3P Header is sent, and if Google Analytics is tracking the visit in Internet Explorer, is to install ieHTTPHeaders.

If you see anything that could be improved or errors (I’m not a programmer), or if you just found this article valuable, feel free to comment.

Happy tracking your Facebook iFrame Page.

Be the first to comment on "How to Track Facebook iFrames with Google Analytics"

Leave a comment

Your email address will not be published.

*