By GregoryNote: This is a guest post by Brandon Hall, the CTO at CurationSoft. CurationSoft is a desktop-based content marketing software that offers content curation for any web platform. Their BuySellAds directory listing can be found here.
How To Integrate BuySellAds in your Adobe AIR App
When CurationSoft decided to launch a free version of our software, it was an easy decision to also add advertisements into the application. After some research, we found BuySellAds to be the best choice as a partner due to their flexible ad rates, killer interface and willingness to support all platforms.
Thankfully, the integration into Adobe AIR was simple and here’s how you can do it. Integration should take you all of 5 minutes once you’ve decided on your ad sizes and where to put the ad blocks in your software.
Step 1: Ad Placement
For our ad placements we decided to include two 320×50 banners in the footer of our application. We felt the footer was the most appropriate place for the ads because it best preserved the application’s user experience. Ultimately, we want our users to upgrade to a paid account and we always try to keep that in mind.
Step 2: Hosting the Ads
Rendering Javascript in a Flex App isn’t the simplest thing in the world. For some reason, Adobe doesn’t have an impressive HTML component. The HTML library included isn’t very easy to use and won’t execute Javascript out of the box. An easy solution, however, is to place the BuySellAds code in hidden pages on your website. The hidden page should not be public and only used within the application.
Step 3: Serving the Ads
Here’s how the code looks in our software:
What we’ve got here is our container which is the Canvas control and two HTML controls for remotely loading our pages and serving the ads. An important note is that we set the background color on the Canvas control to #EFEFEF – we also set the background color on our hosted pages to the same color. These colors give the ads some design consistency and match the app.
You’ll also notice the height and width of each HTML control is 10 pixels larger than the actual ad block. The extra padding is added around the view to prevent scrollbars from appearing within the application.
Finally, the left, right, top and bottom settings are only for consistent placement within the Canvas control. Here is how our layout looks when designing in Flash builder:
Step 4: Making sure clicks open in the system browser
The magic in the code above is the creationComplete call. Without the creationComplete call, any clicks within the HTML control will not work because of the poor Javascript implementation by Adobe.
What we want to do is change htmlloader property for each HTML component to ensure any clicks open in the default system browser. We simply put the code below anywhere in our MXML file and we’re set to go.
private function openInSystem():void
{
ad1.htmlLoader.navigateInSystemBrowser = true;
}
private function openInSystem2():void
{
ad2.htmlLoader.navigateInSystemBrowser = true;
}
The Final Product
Upon running our software, we see the “Advertise Here” blocks successfully running in the application’s footer. Clicks are also captured and open directly in the user’s default browser. All of this was finished in about 5 minutes.
