Delivering Advertising to Adobe AIR Apps with OpenX AdServer

For AIR applications that have access to an internet connections, delivering ads via OpenX is very easy with just a little code. For this basic implementation, we’ll use AIR’s built-in WebKit browser, which accepts JavaScript delivery perfectly, by using an instance of the HTMLLoader class. This is the same approach I’ve taken with my own AIR application, Brush Manager, which is authored in Flash CS4 Professional. Being completely ActionScript based, the same code should be able to be used in the Flex environment (maybe with very few modifications for public and private identifiers). HTML/JavaScript based applications should be able to use a similar approach, if the ads aren’t already integrated completely into the code base for the app.

As a follow up to this post, I’ve turned this into an ActionScript 3 class for easy use in both Flash and Flex. Here’s the new post and download link.

Just a note that this WILL NOT work for Flash applications targeted to the Flash Player plugin – ONLY AIR applications.

//Import the HTMLLoader and related classes
import flash.html.*;
import flash.net.*;

//Create a new HTMLLoader instance to hold the ad(s)
var html:HTMLLoader = new HTMLLoader();

//URL of the OpenX delivery page
//this is a regular HTML document on your server with the OpenX invocation code
var urlReq:URLRequest = new URLRequest('http://domain.com/ad_page.html');

//Set parameters for the HTML component before adding it to the display list

//Width & Height of the HTML component
html.width = 125;
html.height = 125;

//X & Y positioning coordinates (relative to the parent movie clip/sprite/object)
html.x = 0;
html.y = 0;

//We want links in this component to open in the default system web browser
// If you don't do this, the link will open in the HTML component instead.
html.navigateInSystemBrowser = true;

//Give the HTML component a transparent background so it blends into the application background
html.paintsDefaultBackground = false;

//Add the HTML component to the display list
parentMovieClip.addChild(html);

//Load the OpenX delivery page
html.load(urlReq);Code language: ActionScript (actionscript)

Additional Tips & Tricks

• CSS in the head of the delivery page can be used to style and position ad blocks.
• CSS should be used to clear any margin or padding of the default browser window. This makes positioning easier.
• Overflow may need to be hidden as well to hide scrollbars.
• JavaScript is always enabled in AIR (it is one of the base components), so normal JavaScript invocation methods work perfectly.
• Ad clicks may not work properly in the AIR debug player, but work perfectly in published and installed AIR files. Both impressions and clicks are tracked as they should be.
• For banner/ad rotation, either use JavaScript in the head of the delivery page or write a refresh script using a timer in ActionScript in your Flash document. Use the html.reload(); method to refresh the HTML Loader instance in ActionScript.
• If there is any chance your application may not have access to an internet connection, use the air.net library to create a URLMonitor to test for connectivity and only attempt to load your ads if a connection is available. If your application is offline, trying to load the URLRequest will throw an ActionScript error.
• This method, extended a little, could be used to create an ad loader much like the one seen in YouTube’s video player with text-based ads.

Have anything to add?

Have any of you used any other or similar methods to integrate ads into an AIR app? What discoveries have you made?