First of all we need a better AIR Install Badge, because the AIR SDK has evolved, some things are deprecated now, like pubID – but still need it in order to make the badge work correctly (currently if you don’t specify an publisherID, you’re asked to install the application although is installed).
Furthermore it seems that it doesn’t work 100% (many cases when after pressing the button several times the download isn’t triggered or errors occur) and thus had to offer a direct download version.
After the previous customization of the badge using the templates and instructions on Adobe DevNet which seemed quite heavy, there were also too many dependencies to elements of fla (hiding them with alpha been dirty), hard to debug and not so custom (just an image and text, some colors to change).
So I started to create a better badge.
First time I tried to apply a concept of OOP, inheritance, and created the CustomAIRInstallBadge subclass of AIRInstallBadge. After compiling, flash ide throws this error: “../CustomAIRInstallBadge.as, Line 3 1152: A conflict exists with inherited definition AIRInstallBadge.actionFld in namespace public.” and you can’t override a function of main class of fla inside of it because will throw this error: “1150: The protected attribute can only be used on class property definitions.”.
The only solution remaining was to modify the code of air install badge directly or to create one from scratch. I got the source code after I “googled it”, fixed the pubID problem, commented all dependencies except actionFld and actionButton and come up with two file templates(the fla and the main class) plus a html file to test the implementation. Source files.
You can modify the fla according to your needs as long as you keep just 2 instances (actionFld – to display messages and actionBtn – button for download) and stage dimensions over minimum size(width: 217, height: 180) required for air installer dialog box. Now you can create complex animation and cool effects for your download badge. The possibilities are endless.
Tracking Downloads with Google Analytics
Let’s see how we can integrate google analytics for flash with our custom install badge to track the downloads. We have to modify handleActionClick function from CustomAirInstallBadgeTemplate.as to call another function when the button is pressed.
protected function handleActionClick(evt:MouseEvent):void {
if (action == "close") {
hideDialog();
enableAction(prevAction);
} else if (action == "install" || action == "upgrade" || action == "tryagain") {
// check if the app requires a manual install of beta 3:
var beta3ManualInstall:Boolean = (airVersion.toUpperCase() == BETA_3_VERSION_STRING && productManager.installed && productManager.installedVersion.substr(0,5) != "1.0.6");
if (beta3ManualInstall) {
showDialog(getText("beta3"),getText("beta3text"));
enableAction("close");
} else {
showDialog(getText("installing"),getText("installingtext"));
disableAction();
// check if it's installed every 5 seconds:
timer.reset();
timer.start();
airSWF.installApplication(appURL, airVersion, appInstallArg);
//Our custom code
this.onDownloadHandler(action);
}
} else if (action == "launch") {
airSWF.launchApplication(appID, pubID, appLaunchArg);
showDialog(getText("launching"),getText("launchingtext"));
enableAction("close");
}
}
And the onDownloadHandler function will look like this:
private function onDownloadHandler(action:String):void
{
if(!tracker)
{
tracker = new GATracker(this,"your-tracking-code"/*UA-11111111-1*/,"AS3",true/*debugging,in production set to false*/);
}
tracker.trackPageview("AIRBadge/[" + this.getLocation() + "]/" + action);
}
private function getLocation():String
{
if(ExternalInterface.available)
{
return ExternalInterface.call("window.location.href.toString");
}
return null;
}
And that’s it. You have a custom air install badge that tracks clicks in Google Analytics!
P.S.: The code can be improved to track the download after a successful install. Let’s see some examples!
