Flash tracking: What you should know

By
Wesley Swanepoel
on December 4, 2007 8:54 PM | | Comments (2) | TrackBacks (0)
It is important to know what kind of tracking exists as you might just be in a tight spot one day being asked to implement tracking of some sorts. While this isn't rocket science - going back and forth between your company, the tracking vendor and the client can quickly snowball hours into days.
It is important to know what kind of tracking exists as you might just be in a tight spot one day being asked to implement tracking of some sorts. While this isn't rocket science - going back and forth between your company, the tracking vendor and the client can quickly snowball hours into days.

There exist quite a few tracking vendors if you will, that all offer services to track websites in general. Due to the increase in Flash websites they had to adjust their services to include Flash. More and more complete flash sites are appearing to the dismay of a lot of people, especially usability experts. While some of their arguments has some merit I think it is probably best to leave this one alone for this post.

A recent post in NY Times suggests that maybe tracking and web user statistics has gone too far. Maybe we have breached that inevitable privacy can of worms that everyone is dancing around. But for the time being as a Flash developer I do think it is important to know what tracking exist and how to implement them.

Obviously there exist a lot of different tracking vendors out there. I will cover the most obvious ones that I personally have worked with. So lets get crackin'.

How does Flash tracking work?

The way it works is relatively simple. In most of the type of tracking some Javascript code sits in the HTML container page. Flash then invokes this method and passes some parameters to the method. The Javascript method then organise these values into key-value pairs (for e.g. country=GB&language=EN). The method then makes a server request for what is usually a very small blank image and attaches these values to it using a GET. Some vendors may request some other file but the idea stays the same. Key-value pairs are added to the request and sent to the server. The server doesn't make any response back to the calling command cause these responses wouldn't be handled by the client (Flash).

With any flash tracking you will require some code from the vendor to incorporate into the HTML container and then called from events within your flash website. Usually this is Javascript method but some do have their own components.

GoogleAnalytics

I only recently listed some of my own sites on GoogleAnalytics and am very impressed with the ease of use when comes to reporting. It's an amazing free service and you should use it.
  • Sign-up for a google account if you haven't already done so
  • You can use your Google account to sign in at http://www.google.com/analytics/
  • Once sign in follow the steps to add a new website to your account
  • You will be given some code to copy into your page. Place this code in your flash container page before the <body> tag
  • The "/folder/file" values you enter are the page and sections that will show in the reporting. The default with HTML sites are the folder and filenames. But this can be anything you want it to be. Especially in Flash as you might want to track an event or interaction from the user, e.g.

AS2
home.onRelease = function():Void
{
      var trackingStr:String = "javascript:urchinTracker('WEZSIDE | HOME');";
      if (ExternalInterface.available)
      {
             ExternalInterface.call( trackingStr );
      }
      else
      { 
             getURL( trackingStr );
      }
}

AS3
...
btn.addEventListener( MouseEvent.CLICK, onClick );
...
private function onClick( e:Event ):void
{
     var trackingStr:String = "javascript:urchinTracker('WEZSIDE | HOME');";
     navigateToURL( trackingStr );
}


Omniture

Omniture is used by some of the larger corporates as it delivers some in-depth reporting. The implementation of Omniture doesn't differ that much. Flash tracking with Omniture can be done in two ways. The first would be a javascript function call as with GoogleAnalytics and Webtrends, and the second is a Flash component called ActionSource. At the time of writing this article the v3 ActionSource component has not been completed and so AS3 sites will have to use the javascript implementation.

First implementation:
  • include the .js file received from Omniture in your container HTML page
  • call the javascript method as per the example below with the correct parameters passed

AS2
home.onRelease = function():Void
{
	var trackingStr:String = "javascript: var s=s_gi('your_report_suite_here'); " + 
	s.prop1='some Traffic value'; " + 
	eVar4='some Commerce value'; " + 
	s.events='event3'; " + 
	s.linkTrackVars='prop1,eVar4,events'; " + 
	s.linkTrackEvents='event3'; " + 
	void(s.tl(true,'o', 'my custom link'));";
	
	ExternalInterface.available ? ExternalInterface.call( trackingStr ) : getURL( trackingStr );
}


AS3
...
btn.addEventListener( MouseEvent.CLICK, onClick );
...
private function onClick( e:Event ):void
{
	var trackingStr:String = "javascript: var s=s_gi('your_report_suite_here'); s.prop1='some Traffic value'; s.eVar4='some Commerce value'; s.events='event3'; s.linkTrackVars='prop1,eVar4,events'; s.linkTrackEvents='event3'; void(s.tl(true,'o', 'my custom link'));"
	navigateToURL( trackingStr );
}


Second implementation:
  • Install the Omniture ActionSource component. This will be supplied by Omniture or downloaded from the Omniture reporting suite once logged in.
  • Copy the OmnitureActionSource.swf generated from the reporting suite to your deploy location
  • Load the OmnitureActionSource.swf through Actionscript
  • Drag the component onto the Stage and give it an instance name
  • Below is an example of a method I use to call the component's track methods with the correct account details associated. Note that the values are example values.

AS2

...
/**
* Omniture tracking method. This method requires an instance of the ActionSource component to be on the Stage and the OmnitureActionSource.swf to be fully loaded.
* @param asSource The Omniture component that is on the _root stage level
* @param pageId Page ID as defined by you
* @param pageURL Page URL as defined by you
* @param type Type which refer to tracking a virtual page or a link
* @return Nothing
*/
public static function omnitureTrack(aSource:MovieClip, pageId:String, pageUrl:String, type:String):Void
{
 aSource.account = "wezsideblogspot";
 aSource.pageName = pageId;
 aSource.pageURL = pageUrl;
 aSource.charSet = "ISO-8859-1";
 aSource.currencyCode = "GBP";
 aSource.trackClickMap = true;
 aSource.movieID = "";
 aSource.visitorNamespace = "wezside";
 aSource.dc = 031;
 aSource.trackingServer = "wezside.img.com";
 aSource.trackingServerSecure = "wezside.com";

type == "page" ? aSource.track() : aSource.trackLink();
}

Webtrends

Webtrends works exactly like GoogleAnalytics and Omniture's first implementation. The only difference would be the javascript call.

AS2

home.onRelease = function():Void
{
 var trackingStr:String = "javascript:dcsMultiTrack('WEZSIDE', 'HOME');";
 ExternalInterface.available ? ExternalInterface.call( trackingStr ) : getURL( trackingStr );
}

AS3

...
btn.addEventListener( MouseEvent.CLICK, onClick );
...

private function onClick( e:Event ):void
{
 var trackingStr:String = "javascript:dcsMultiTrack('WEZSIDE', 'HOME');";
navigateToURL( trackingStr );
}

Testing

In order for tracking to work the function you are calling must exist within the page holding the Flash file.

If you are on a PC using IE do the following:
  • Download Fiddler - http://www.fiddlertool.com/fiddler/
  • Open IE and go to Tools » Fiddler
  • Open your page in IE
  • Trigger the event that will call the tracking code


If you are on a PC or a Mac using Firefox do the following:You will now be looking for the image request your tracking code should make. This will tell us that the code is working. If the code is working it will make a succsesful request HTTP 200. The HTTP header will show some request to a server with the domain name to the tracking vendor you are using, for e.g. http://stats.webstrends.live. When you click on this request you should see one long string of letters, i.e. querystring. Among these wil be the info you added to the function call in Flash. Make sure these are the values you added and voila! For an easy view of the querystring values in Fiddler, click on the SessionInspector tab -> Webforms and you should see the key-value pairs in a more readable format.

Categories:

Tags:

0 TrackBacks

Listed below are links to blogs that reference this entry: Flash tracking: What you should know.

TrackBack URL for this entry: http://www.wezside.co.za/cgi-bin/mt/mt-tb.cgi/6

2 Comments

By Mary on September 24, 2008 1:21 AM

I'm using your omniture second implementation:
...
/**
* Omniture tracking method. This method requires an instance of the ActionSource component to be on the Stage and the OmnitureActionSource.swf to be fully loaded.
* @param asSource The Omniture component that is on the _root stage level
* @param pageId Page ID as defined by
* @param pageURL Page URL as defined by
* @param type Type which refer to tracking a virtual page or a link
* @return Nothing
*/
public static function omnitureTrack(aSource:MovieClip, pageId:String, pageUrl:String, type:String):Void
{
aSource.account = "wezsideblogspot";
aSource.pageName = pageId;
aSource.pageURL = pageUrl;
aSource.charSet = "ISO-8859-1";
aSource.currencyCode = "GBP";
aSource.trackClickMap = true;
aSource.movieID = "";
aSource.visitorNamespace = "wezside";
aSource.dc = 031;
aSource.trackingServer = "wezside.img.com";
aSource.trackingServerSecure = "wezside.com";

type == "page" ? aSource.track() : aSource.trackLink();
}

and it's giving me an error: 1136: Incorrect number of arguments. Expected 3.

By Wesley Swanepoel on September 24, 2008 7:13 AM

I suspect this is old as Omniture made some changes. I will update the post to reflect this. If you go to my second post Omniture in depth and scroll to the end of the page you will get links to download the latest TrackingManager class. Let me know if you get stuck.

Leave a comment