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".
Image may be NSFW.
Clik here to view.
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:
- 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
- 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 to send 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.
My Facebook iFrame Page can be found at this adress:
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:- http://www.savio.no/facebook/?utm_source=newsletter&utm_medium=email&utm_campaign=yourcampaign
In regards of campaign tagging, I really recommend my own Google Analytics Campaign URL Tool. :)
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
Change values in red, and add the code between <head> and </head> to your iframe page.
- <script type="text/javascript">
- // This script is provided AS IS without warranty of any kind.
- // See http://www.savio.no/blogg/a/104/ for more information.
- // Smacked together by Eivind Savio May 2011
- var FacebookURL = 'http://www.facebook.com/YourFacebookPage?sk=app_123456789';
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
- _gaq.push(['_addIgnoredRef', 'static.ak.facebook.com']);
- // If Google Analytics is loaded and this page isn't framed inside our Facebook URL, frame the page.
- if (_gaq.push && self.location == top.location) {
- // Create a fake URL that we can filter in Google Analytics. This pageview also sends the traffic source data to Google Analytics.
- _gaq.push(['_trackPageview','/facebook/campaign-tracking/']);
- // Tracking done, let's frame the page
- setTimeout(top.location.href = FacebookURL, 200);
- } else if (self.location == top.location) {
- // If Google Analytics doesn't load within 2 seconds, refresh and frame the page anyway. People dislike waiting. Change the time if you like.
- setTimeout(top.location.href = FacebookURL, 2000);
- } else {
- // The Page is Framed. Let's track it.
- _gaq.push(['_trackPageview']);
- _gaq.push(['_trackPageLoadTime']);
- }
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
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.
Image may be NSFW.Clik here to view.
The problem isn't related to Google Analytics, you will get the same problem with other web analytic tools. The problem is related to Internet Explorer and 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 cookies from 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.
I have generated 2 files:
- P3P reference file: http://www.savio.no/w3c/p3p.xml
- The reference file should always be located at the adress /w3c/p3p.xml
- Full P3P policy: http://www.savio.no/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.
Image may be NSFW.
Clik here to view.
Image: P3P XML File missing.
Image may be NSFW.
Clik here to view.
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:
- protected void Application_BeginRequest(Object sender, EventArgs e)
- {
- //
- HttpContext.Current.Response.AddHeader("p3p", "CP=\"IE is often a NIGHTMARE\"");
- }
P3P Header for "old" ASP
ASP implementation may look like the following (implement this as the first code in your .asp iFrame page):
- <% Response.AddHeader "P3P","CP=""IE is often a NIGHTMARE"""%>
P3P Header for PHP
PHP implementation may look like the following (implement this as the first code in your .php iFrame page):
- <?php
- header('P3P: CP="IE is often a NIGHTMARE"');
- ?>
P3P Header for PHP using .htaccess
PHP implementation may look like the following (source):
- <IfModule mod_headers.c>
- Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IE is often a NIGHTMARE\""
- # OR THIS, SIMPLER
- Header set P3P "policyref=\"/w3c/p3p.xml\""
- </IfModule>
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.
Related articles
- How to Track Traffic from Facebook Likes, Send or Comments in Google Analytics
- Tracking Facebook Likes, Share, Send & Comments as Social Engagement in Google Analytics
- Behavioral Targeting using Facebook Connect & Google Analytics Custom Variables
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.