Bobby 10:08 am on Aug 18, 2011 Reply
Tags: , Flash, , iFrames, security   

Google Analytics (GA) sometimes has problems tracking within iFrames. This problem happens when the iFrame content is served from a domain that is different than the domain in the address bar. Websites that use a partner site for checkouts or a 3rd party for their shopping cart are often battling these issues. There are much more graceful alternatives to using iFrames, but sometimes resources limit your options, and you need to have visibility into these iFrame content pages.

This security issue isn’t exclusive to GA. Browsers are trying to protect users from XSS (cross site scripting) vulnerabilities, so they throw security warnings and/or stop scripts from running on the iFrame page. In this scenario, the default security settings on most browsers are enough to prevent the Google Analytics tracking code from successfully firing off the image request to the GA servers, but each visitor has the ability to easily change those settings.  Keep this in mind when digging into the reports to debug this problem. Just because you see all browsers represented in the reports does not mean that you don’t have a tracking problem. Those visitors could have relaxed security settings.

Flash Solution

There are a few workarounds for dealing with this security situation that will help to capture a lot more traffic. One workaround involves the use of Adobe Flash.

The GA Flash tracker can be used as an alternative to JavaScript in order to overcome security issues within iFrames. I’ve used Flash Builder 4.5 but any Flash development tool should do the trick as long as you also use the additional components supplied by gaforflash.

The SWC Flash components (analytics, analytics_flash) must be installed in the bin folder of Flash Builder. For example:C:Program Files (x86)AdobeAdobe Flash Builder 4.5sdks4.5.0bin

The .MXML file looks like this:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute"

width="1"

height="1"

addedToStage="onComplete()">

<mx:Script>

<![CDATA[

import com.google.analytics.GATracker;

import com.google.analytics.AnalyticsTracker;

 

public var tracker:AnalyticsTracker;

 

private function onComplete():void

{

tracker = new GATracker( this, "UA-XXXXXXX-X", "AS3", false );

tracker.setDomainName("checkout.thirdpartyservice.com")

tracker.setAllowLinker(true);

tracker.setAllowHash(false);

tracker.trackPageview( "/thankyou_lastpage/" );

}

]]>

</mx:Script>

</mx:Application>



The GA code syntax for these MXML files is the same as in JavaScript except that here the underscore is omitted.

A new Flash file would need to be created for each step in the checkout process that is handled within that iFrame. That means you would change the code that identifies each page. The example above is the last page. The previous step would have the last line changed as follows:

tracker.trackPageview( “/confirmation_page/” );

 

Close more Gaps

The approach described in this section is not going to capture users that do not have Flash enabled. If Flash is not enabled, you may want to write a plugin detection script which defaults to the JavaScript method of activity tracking.

If it seems like a lot of work to capture these visitors, you can do nothing and depend on the third party to do the funnel analysis and get back to you about where the holes are in their checkout service.

You can learn more about Google Analytics Tracking for Flash on the Google Code website.