Displaying ads in your mobile AIR application

I’ve seen a few Tweets from people who were asking about adding ads to their mobile AIR applications… Well… There’s actually a hidden gem in the AIR documentation… But… As most of you probably never read any docs ;-) I thought I’d highlight it here.

The trick is simple… Use the StageWebView class. You set the StageWebView object viewport to cover the area in your application in which you want to display the ad. Then you load an HTML page that contains the code for requesting and displaying ads. And tadaaaa… You have ads in your mobile AIR application.

Here’s an example of an HTML page that loads an ad from AdMob.

<html>
<head>
<title>Ad jig</title>
<script type="text/javascript">
    var admob_vars = {
    pubid: 'admob_pubID', // change to your publisher id
    bgcolor: 'ffffff', // background color (hex)
    text: '000000', // font-color (hex)
    test: true, // test mode, set to false if non-test mode
    manual_mode: true
};

function showAd()
{
    _admob.fetchAd(document.getElementById('adspace'));
}
</script>
<script type="text/javascript" src="http://mm.admob.com/static/iphone/iadmob.js"></script>
<style type="text/css">
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>
</head>
<body onload="showAd()">
<div id="adspace"></div>
</body>
</html>

The following ActionScript code will display the ad page in your mobile AIR application.

//Set up web view object
var webView:StageWebView = new StageWebView();
webView.stage = this.stage;
var adViewPort = new Rectangle( 0, 0, this.stage.stageWidth, 60 );
webView.viewPort = adViewPort;
webView.addEventListener(ErrorEvent.ERROR, onWebViewError );
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, onWebViewLocChanging );
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, onWebViewLocChange );

//Copy the html file outside the app directory
var templateFile:File = File.applicationDirectory.resolvePath( "adview.html" );
var workingFile:File = File.createTempFile();
templateFile.copyTo( workingFile, true );

try
{
    webView.loadURL( workingFile.url );
}
catch (e:Error)
{
    trace( e );
}

function onWebViewLocChange( event:LocationChangeEvent ):void
{
    trace( "Change to" + event.location );
    if( event.location != workingFile.url )
    {
        //Reset location back to our ad display page
        navigateToURL( new URLRequest( event.location ) );
        try
        {
            webView.loadURL( workingFile.url );
        }
        catch (e:Error)
        {
            trace( e );
        }
    }
}

function onWebViewLocChanging( event:LocationChangeEvent ):void
{
    trace( "Changing " + event.location );
    event.preventDefault();
    navigateToURL( new URLRequest( event.location ) );
}

function onWebViewError( error:ErrorEvent ):void
{
    trace( error );
}

But what if you want to use the mobile Flex framework? Well… Sönke Rohde actually wrote a wrapper around the StageWebView class so you can use it as a Flex component. By using this wrapper it becomes as easy as adding this one line of code to your app.

<components:WebView source="adview.html" width="300" height="50"/>

Note: This approach will most likely also work with other ad networks. Also not that this only works on mobile AIR applications. The example does not work in desktop applications, or when testing mobile applications on the desktop, due to local-versus-remote sandbox restrictions.

Kudos to Adobe’s learning resources team for putting this example together and to Sönke for creating the StageWebView UIComponent.

Now go make some money ;-)

Show Comments

Hide Comments

Comments are closed.