built on AIR - - - - so it runs on Win, Mac and Linux:

Track user clicks on your AIR Badge – a plugin for WordPress

This plugin places a custom AIR Install Badge and tracks user clicks on it in real-time within WordPress. It displays counts for a number of different actions on its configuration page. It works with a customized Adobe AIR badge and jQuery.

UPDATE latest version: 1.2 get it here

I am using the AIR Badge that was made by Grant Skinner (see Adobe’s DevNet page for more), with the addition of an ExternalInterface call to make the click visible.
Of course, all kudos go to Peter Elst for the original AIR Badge plugin. I reworked his idea into a php-class and added the count display on the configuration page.

User tracking for the AIR badge

It’s quite simple to add user tracking to the AIR Badge, if you use a tracker like Google Analytics. You need to add an ExternalInterface call to the AIRInstallBadge.as – I am referring to the one that comes with the sample AIR Badge from Grant Skinner. The ExternalInterface connects to the Google pagetracker API with the _trackPageview call, for example like this (in javascript): pageTracker._trackPageview("AIRbadge/install") This will display a users click on the “install” button as a pageview in GA. For Actionscript 3 it would be like this:

//in AIRInstallbadge.as
//import flash.external.ExternalInterface; 

// handles clicks on the action button
private function handleActionClick(evt:MouseEvent):void {
   if (action == "close") {
   } else if (action == "install" || action == "upgrade" || action == "tryagain") {
     // //track these actions with Google Analytics
      //var badgeAction:String = "/AIRbadge/"+action;
      var gaJS:String = "pageTracker._trackPageview";
      ExternalInterface.call(gaJS, badgeAction);

      // check if it's installed every 5 seconds:
      airSWF.installApplication(appURL, airVersion, appInstallArg);
   } else if (action == "launch") {
      airSWF.launchApplication(appID, pubID, appLaunchArg);

Tracking real-time and in WordPress

But although Google Analytics certainly looks very pretty, it’s not real-time tracking, and I decided not to use it for this site. Instead, I am using the cool WassUp plugin and StatCounter (also has a WP plugin). WassUp has a really nice Dashboard widget that displays what’s going on in a graph (from Google :0). Both track in real time. And both lack an API to track clicks on flash with… so I was blind to what was happening with the downloads/installs of the Telexer app… My first plan was to make an extention to the AIR Badge WordPress plugin from Peter Elst. But in the end I re-used my earlier DiggBadge plugin code, where I also use jQuery to track clicks, and an options page to configure settings.

blago AirBadge displaying click counts
I added some garbage disposal: when deactivating the plugin, it leaves no unused options in the WP database.

*quick how to*

To make it work, you need to add an External Interface call to your AIR Badge. There’s a set of sample files in the zip, or you could follow along with these notes.

1. prepare the AIR badge

In the AIRInstallBadge.as, add: import flash.external.ExternalInterface; to the package.
Declare two vars in the class:
//count clicks
protected var siteUrl:String;
protected var clicksObj:Object;

Add the variable needed to send the jQuery get request; place this in the function that receives the flashvars on init:
siteUrl = validateString(params.siteurl);
Next, find the function that handles the click (handleActionClick()), and add this call on the events that you’d like to track clicks for:
this calls:

//---process download clicks in WordPress---
protected function addDownloadCount($action:String):void {
	var clickType:String = $action;
	if(!clicksObj) clicksObj = new Object();

		if(ExternalInterface.available) {
			clicksObj.siteurl = siteUrl;
			clicksObj.clicktype = clickType;
			ExternalInterface.call("count_airbadge_click", clicksObj);
	}catch( e:Error ){}

2. prepare the plugin

UPDATE: you can skip this step in version 1.1, where you can manage your file location, pubid and appid from within the Settings page. Read about the update here.
You need to hard-code some variables in the plugin itself. These would be values that will be unlikely to change over time, but are unique to your blog and set-up.
In the file airbadge.php, find the function: get_airbadge_snippet() and change the location to your AIRInstallBadge_hh.swf, your appid and the pubid. The appid corresponds with the id you have put in while publishing your AIR file. Grant Skinner’s Badger app will easily get the pubid for you.

3. install the plugin

– unzip the files to a local folder
– copy the blago-airbadge folder to your WP plugin folder
– you don’t need to upload the airbadge-source folder

4. activate

– activate the plugin on your WP admin > plugins page
– make sure you visit the Settings page to configure the plugin.
IMPORTANT: You need to disable the inclusion of the javascript libraries swfObject and/or jQuery, if other plugins are already adding those to the head of your pages.

5. add Air Badge tag

– add this to your page – on one line – where you want your custom Air Badge to appear:

[airbadge] application name, full url to your application.air, 
application version, full url to badge_img.jpeg[/airbadge]

As an example, the one for the Telexer on this site would be:

[airbadge] blago Telexer, 
http://www.blagoworks.nl/telexer/update/badge_img.jpeg [/airbadge]

To see if everything is working, click on your newly-placed AIR Badge and then visit the Settings page to see if the numbers have changed.

How does it work

From the options it gets from the Settings page, the plugin constructs an swfObject to replace the [airbadge] tag with. This contains the variables that the Badge needs to work, and also an extra variable with the url to the WordPress application, so that clicks can be registered. The plugin writes the neccessary javascript includes into the header of your WordPress page. One of them contains the javascript function that the ExternalInterface calls:


ExternalInterface.call("count_airbadge_click", clicksObj);


function count_airbadge_click(obj){
		ajaxUrl 	= obj.siteurl;
		clickType 	= obj.clicktype;
	if(ajaxUrl!="" && clickType!=""){
		jQuery.get( ajaxUrl, {airbadge_clicktype:clickType},
			//alert('js getting return data: '+data);
			}, 'text' );

This javascript function then sends a jQuery GET request to the php page, where it is used to count clicks per type of user interaction – was it a click on “install”, or rather on “try again”?
This could be replaced with a call to the Google Analytics API of course, passing it the variable for the clicktype, to have Google count the clicks. But then you’d only know a day later…

download blago Air Badge Clicktracker WP plugin v1.2, as a zip (198.45 kB) downloaded 73 times

The download contains the plugin and a sample AIR badge with externalinterface call in place. The local testfile will not install any Air app – it only demonstrates the javascript call. If you decide to uninstall the plugin, you can clear the counts and options the plugin has saved: you need to set a check before de-activating. The counts are only removed if you set this check, so you have the option to leave the counts in the database, if you need to de-activate and then want to activate again.

note: as it was made for this site, this plugin only counts clicks on one AIR badge; there is no interface (yet) to differentiate multiple badges.

  • Digg
  • Reddit
  • del.icio.us
  • StumbleUpon
  • Mixx
  • Tumblr
  • Technorati
  • NewsVine
share and connect
Posted in category AIR, WordPressTagged , , Bookmark the permalink
Post a comment or leave a trackback.

One Comment

  1. Tebogo
    on September 16, 2011 at 19:16 | Permalink

    Thank you very much for blogging about this. It came in very handy – Good job with Telexer

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Please leave these two fields as-is: