Posts tagged with “google”

June 12, 09

The end of anonymous clicks (but don't be afraid)

Recently Google has enabled events tracking for all Analytics accounts – that opens a whole new world for the click hunters – just imagine how useful it might be for usability testing – you can find out if anyone is actually interacting with the new interface that took you 3 weeks to develop.
The official Google Analytics for Flash guide covers pretty much everything what you need to know to set it up for your SWFs and it's all easy peasy when you've got ga.js handy on your HTML page.

But what if you want to give your SWF away (by providing the embed code that links to your SWF) and still be able to track the referrer? You don't know who will be embedding your SWF thus you can't tell if the ga.js will be available.

Fortunately Google covers that matter as well – all you need to do is to import the whole AnalyticsTracker class (which is 100% compatible with the latest ga.js tracking code – at least that's what Google says) available at http://code.google.com/p/gaforflash, set the MODE to AS3 and stop worrying about any Analytics specific Javascript on the HTML page.

All pretty. The only thing is that there's no (direct) way of getting the referrer URL of the SWF that generated the event into your stats, so you won't know who had embedded your file. You could check loaderInfo.url but this will ONLY return the SWF's host location aka your site address and that's no use.

How to get the URL of a page that embeds my SWF then?
There's a simple trick – the page URL is stored in window.location.href and you can use ExternalInterface to get that out. It's actually pretty easy.

Let's go with the example code:

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;

const TRACKING_CODE:String = "UA-XXXXXXX-X";
const MODE:String = "AS3";
const DEBUG:Boolean = false;

var GAtracker:AnalyticsTracker;
var referrer:String;

GAtracker = new GATracker(this, TRACKING_CODE, MODE, DEBUG);

if (ExternalInterface.available)
{
    try
    {
        referrer = ExternalInterface.call("window.location.href.toString");
        if (referrer && referrer.indexOf("file:/") != -1) referrer = "localhost";
        if (!referrer) referrer = "unknown";    
    }
    catch (error:SecurityError)
    {
        trace("A SecurityError occurred: " + error.message);
    }
    catch (error:Error)
    {
        trace("An Error occurred: " + error.message);
    }

} else {
    trace("External interface is not available.");
}

As we don't use any Javascript we have to set the tracking code in AS3 along with the MODE set as AS3. Also, there's built-in debugger in the GATracker library which might be actually pretty handy.

Castles in the sand... box
Then we'll try to get the referrer URL – it's important to set <param name="allowscriptaccess" value="always" /> on the <object> tag, and the attribute for the <embed> tag allowscriptaccess="always" in your embed code to allow ExternalInterface access Javascript, otherwise Flash Player will spit out this SecurityError: A SecurityError occurred: Error #2060: Security sandbox violation: ExternalInterface caller [your SWF's host address] cannot access [the URL of the site where your SWF is embedded on].
We can catch it (which we do) but ain't get no URL then.

Got ya, how do I get to track events?
Easy tiger! For example, if you want to track the event of user pressing the video play button to start playback, just fire up this line:

GAtracker.trackEvent("Video", "Play: " + referrer, fileURL);

Where fileURL is the video file URL.

And finally...
Make sure you deploy your SWF on the live site, nothing gets tracked when the SWF is tested in Flash IDE or the local file system as Google explains:

Currently, Flash tracking is available for any Flash content embedded in a web page. Tracking of data sent from Adobe Air, Shockwave, or via the Flash IDE (e.g. using Test Movie) is not supported at this time.

Oh, well.

Any example/demo?
Sure, try to embed the code below on your blog (i.e. as a private post) to see how it works.

<object width="400" height="300" type="application/x-shockwave-flash">
    <param name="movie" value="http://play.blog2t.net/files/event-tracking/tracker.swf" />
    <param name="allowscriptaccess" value="always" />
    <embed
        type="application/x-shockwave-flash"
        width="400" height="300"
        allowscriptaccess="always"
        src="http://play.blog2t.net/files/event-tracking/tracker.swf"
    />
</object>
06:27 PM | | 1 Comment | Tags: , , ,