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","INSTALL_AIR_APP"); } 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/INSTALL_AIR_APP
/download/badge/INSTALL_APP
/download/badge/INSTALL_FAIL
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 zipped up my modified badge.fla and badge.swf if you want to download and use it just like my example without changes.
Hi All,
The zipped up package above is for an old version of the badge. It doesn’t work anymore.
Instead, go download this badge:
http://labs.adobe.com/wiki/index.php/AIR_Badge
Then you can make the modifications I mentioned above to get google analytics working with it.
I’ll try and upload a new archive soon.
Hi Marc.
Thanks for the great article. I’m trying to modify the badge so I can track downloads of my new AIR app, but I’m having trouble figuring out how to compile the source code properly from the latest badge SDK located at http://www.adobe.com/devnet/air/articles/badge_for_air.html
I’ve made the proper changes to the AIRInstallBadge.as file but I can’t figure out how to compile the FLA file with it and turn it into an SWF file. Do I need the Flash IDE to do this? All I have is Flex Builder 3. Sorry if this is a dumb question, as I’m pretty new to Flex.
Thanks for any help you can provide.
Yes, you’ll need the Flash IDE to compile it. There’s a free trial
Did you ever make these changes to the beta badge and upload anywhere?