Marc Hughes


Home
Blog
Twitter
LinkedIn
GitHub
about
I am a developer from a bit west of Boston.

AIR Install Badge + Google Analytics

10 Feb 2008


I use Google Analytics to track web usage.  It's a great tool and since I mainly use AdWords for advertising, it really fills my needs.

A big part of Analytics is "goal" tracking.  You set up a goal page, and Analytics will tell you all kinds of information about the users who hit that goal.  In the past I set up my general "Download" page as a goal.  But visiting the download page, and actually downloading the application are two very different things.  It would be a lot more valuable to track who actually downloads vs. who went to the download page.

My main product is an AIR application.  It uses an AIR badge installer to let people install the application.  

By modifying the install-badge code slightly, and adding a javascript function we can detect when someone clicks the install badge.  Furthermore, we can even track if they had to install the application + the AIR runtime, or just the application.  Here's how...

First, open up the badge.fla file that comes with the AIR SDK in Flash.

Next, open up the AIRBadge.as source file.  Find the "onButtonClicked" event handler and add in some ExternalInterface calls to report back to the webpage on what's clicked.




private function onButtonClicked(e:Event):void {
try {




switch (air.getStatus()) {
case "installed" :
root.statusMessage.htmlText =
"<p align='center'><font color='#" +
_messageColor +
"'>Downloading... Click the 'Open' button when prompted.</font></p>";
_air.installApplication( _appURL, _airVersion );

try
{
ExternalInterface.call("badgeClicked","INSTALL
APP");
}
catch( e:Error ) {} // eat any errors to not interfere with the installation

break;
case "available" :
try
{
ExternalInterface.call("badgeClicked","INSTALLAIRAPP");
}
catch( e:Error ) {} // eat any errors to not interfere with the installation

root.statusMessage.htmlText = "<p align='center'><font color='#" +
messageColor +
"'>Downloading... Click the 'Open' button when prompted.</font></p>";
_air.installApplication( _appURL, _airVersion );
break;
case "unavailable" :
try
{
ExternalInterface.call("badgeClicked","INSTALL
FAIL");
}
catch( e:Error ) {} // eat any errors to not interfere with the installation

// do nothing
break;
}
} catch (e:Error) {
root.statusMessage.text = e.message;
}
/* clearInterval( global.installIntId ); */
}

Notice that I also modified the message displayed to the user.   I always thought the message displayed was a bit confusing.

As you can see, we're calling a badgeClicked function with three different parameters depending on the status of the currently installed AIR runtime.  Now... over to the HTML for the download page we need to define that function.


function badgeClicked( clickType )
{
urchinTracker("/download/badge/" + clickType );
}

Assuming you already have the analytics code set up on the page, that's it!  
Now, when a user uses the download badge to install, you'll see an entry like one of these:

/download/badge/INSTALLAIRAPP
/download/badge/INSTALLAPP
/download/badge/INSTALLFAIL

in your google analytics, and you can track that like any "real" page view.

If you have multiple AIR badges throughout your site, you can modify your badgeClicked method to differentiate them.

A few things to make this work:
  • Make sure your allowscriptaccess is set to "always" in your flash embed code.
  • Make sure your regular analytics code runs before the user can click on the badge (just setting it up like normal will do)
You can see a full HTML example by viewing the source of this page.

I've <a href="http://www.rogue-development.com/downloads/Badgeplusgoogleanalytics.zip">zipped up my modified badge.fla and badge.swf if you want to download and use it just like my example without changes.