Category: blog

The results are in and the requested topic is “Integrate Google Analytics into Flash.” The poll has been reset and is ready to recieve your post requests, so keep voting! It’s located in the side bar!

Overview:

Tracking your visitors and attempting to better understand them is a large part of even having content on the web. Since the days of visitor counters displayed proudly on every site, along with dozens of animated gifs to the days when site were designed solely with efficiency and conversion in mind. There are many services that will do this for a fee and other that will do it for free. A popular free web analytics tool is provided by Google. Google Analytics is started by including JavaScript on each page the user wishes to track. This JavaScript loads larger files from the Google webserver and then sets variables with the user’s account number. This JavaScript is used to track and log page views and visitors interaction with the site. This post discusses what to do if your site includes a lot of interactive flash elements you wish to track as well. With the little Google has published related to this(New Code, Old Code), I’ve tried to fill in.
Note: This explains how to set up to track flash events as page views, which does have a drawback- it inflates your pageviews in the analytics and in turn may skew your data. Il’l beposting again soon about how to use then new event tracking, which would track flash events not as pageviews, but as events and thus not inflate the page view count.

Steps:

1. If you haven’t already, install Google Analytics on your site. (Note that your analytics tracking code must be placed on the page above the flash call(s) to _trackPageview or urchinTracker)
2. Determine which events in flash you want to track.
3. Place in the external.interface code in your actionscript at the specific event(s).
4. Watch the events get logged in you Google Analytics Reports!

Example:

Here’s a simple example, say you want to track how many times an object is clicked or dragged by a user or how many times it bounces (something that could be tracked but doesn’t necessarily have any required user interaction). In this example flash file I have a ball which bounces off the walls and users can click to drag and even throw it, press the spacebar to create more balls and toggle the gravity on and off with the arrow keys (up is weightlessness, and down is gravity). Each of these events has code to communicate with Google Analytics JavaScript and track the events. I made my own function to call the google analytics code. Do I hear “but sometimes I want to use the new version of Google analytics, and sometimes I want to use the old one…” Have no fear, this function works for either one, or even both. If you’re not using the newer code the calls to the functions in the new code (pageTracker._trackPageview()) will be ignored and vice versa, if you are using the new code, then the calls to the functions in the old code (urchinTracker()) will be ignored, since the functions are not defined. You can track virtually anything with this method. I’ve exaggerated greatly in this example- just to show the variety of different ways this can be used. You might want to make certain the things you track will be useful and relevant for you.

Here is the swf file, I’ve added a text box that will print all actions that are logged to Google Analytics
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/01/integrategoogleanalytics/integrategoogleanalytics.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

[/kml_flashembed]

track Google Analytics actionscript function
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
function trackGA(action:String) {
//Old Google Analytics Code
ExternalInterface.call(“urchinTracker(‘/urchin/IntegrateGoogleAnalytics/”+action+”‘)”);
//New Google Analytics Code
ExternalInterface.call(“pageTracker._trackPageview(‘/pageTracker/IntegrateGoogleAnalytics/”+action+”‘)”);
trace(“Google Analytics Tracking: ” + action);
}
[/cc]

Calls to Google Analytics actionscript function
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
trackGA(“swfLoaded”);
trackGA(“ball/”+_root.id+”/created/”);
trackGA(“ball/”+this.ballNum+”/released/”);
trackGA(“ball/”+this.ballNum+”/pressed/”);
trackGA(“ball/”+this.ballNum+”/bounced/top”);
trackGA(“ball/”+this.ballNum+”/bounced/left”);
trackGA(“ball/”+this.ballNum+”/bounced/right”);
trackGA(“ball/”+this.ballNum+”/bounced/bottom”);
trackGA(“gravity/on”);
trackGA(“gravity/off”);
[/cc]

Download:

IntegrateGoogleAnalytics.zip

Update:

Here is a screenshot of my Google Analytics Top Content after I search for “pageTracker/IntegrateGoogleAnalytics” (because I’m using the new code version, if I were using the old version I’d search for “urchin/IntegrateGoogleAnalytics”). This just shows that every event was logged to Google Analytics. This screenshot was taken mere hours after this post published.

New Event Tracking technique tutorial rather than posting each event you want to track in flash as a pageview it can be a specific event!