A Better Custom Air Install Badge + Google Analytics

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.


// handles clicks on the action button
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 var tracker:AnalyticsTracker;
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;
        }

Source files!

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!

This entry was posted in rss reader and tagged , , , . Bookmark the permalink.

9 Responses to A Better Custom Air Install Badge + Google Analytics

  1. VAHID says:

    Hello
    I cant download :
    AirSWFError
    Thanks for good app

  2. michaelb says:

    very nice !>.
    going to put some love into this one… but like the flow thus far.. (check it and works too !).
    respect,

    codeKnow

  3. Ileana Dinh says:

    Hey, just found your site from digg. This isn’t not something I would typically read, but I liked your thoughts on it. Thanx for creating an article worth reading!

  4. Steven Sacks says:

    How do I configure your badge for AIR 2.7.1? Yours is configured for AIR 3.0 Beta.

  5. hari says:

    this code also give the same error for me..

    any suggestions..
    im using adobe air 3.0

  6. gio says:

    same error
     “The application could not be installed. Try installing it again. If the problem persists, contact the application author.”
    Error# 2032

    i dont know why

  7. Hii I know this is an old thread and that by know I might be the only person in the world who want to use an Air install badge, but I have an issue with it. Weather I use your code or the official one, I run into the issue where if Air runtime is not installed on the computer at all, I can’t click on the “yes” button of the Air installer overlay badge (nor I can on the “no” button too). This issue happens both on OS X and Windows, on any versions and any browser.

    Any idea about that?
    Thanks!

  8. I tried to use the Tab key / Enter key to navigate through the badge and it works. It seems to be a focus problem.

Leave a Reply

Your email address will not be published. Required fields are marked *