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.

We were excited at the prospect of taking on Yoggrt. Knowing the name that Yoggrt has established for itself it will probably come as no surprise that we will be keeping Yoggrt its own entity under BuySellAds.com. Some things are changing, however. One exciting thing that has happened since our ownership began a few days ago is the launch of a refreshed design at Yoggrt.com.

We are excited to invite publishers such as Go Squared, 0to255, and Chris Pederick as well as advertisers including Capo, WP Coder, and Light CMS and others into the BSA family.

Publishers and advertisers alike will now be able to take control of the ads served by Yoggrt through the powerful BuySellAds backend. This will include features such as A/B split testing, super fast asynchronous ad code, and live stats tracking.

As an introductory offer to advertisers we are offering $50 off your first ad purchased through Yoggrt for the next 30 days. Use the discount code “Blog Post” to get in on this super savings. Place your ad order here.

So go check out the new website and welcome join me in welcoming Yoggrt to the family!

In addition, we have added oAuth integration for publishers who wish to have the tweets sent by BSA automatically (once they have been approved of course). However, we are not yet forcing oAuth on every publisher and you are still free to use the current manual method. If you are already selling Sponsored Tweets with us, just go to the edit zone page and check the “Auto Tweet” option. We will redirect you to get authorization and then you will be setup and ready to go.

Like any normal business, before we commit to projects we like to dig a little deeper. Estimating their potential impact on user happiness, retention, the bottom line, etc. help us prioritize.

So, I thought I would give BSA users & spectators a chance to chime in on what they would like to see built on top of a BSA API. What products or services would you like to see built on top of a BSA API? What would you use it for? I suspect we’ll get plenty of “BSA iPhone App” answers, which is fine, but I’m curious to see if there are some outside-of-the-box uses out there that will surprise us and push us over the edge on this project. If you would rather not post publicly here in the comments, feel free to email your idea to me personally at todd@buysellads.com.

In The Design Galaxy you can find out more about the blogging planets, which ones orbit only part of the galaxy, and the planets close by. We guarantee you won’t get lost. You might actually (re)discover your favorite blog. Have a happy BuySellAds year!

BuySellAds.com is excited to announce the immediate availability of a new Cocoa Framework for Mac Developers. The CocoaFramework is an easy way for developers to integrate Ads directly into their Mac applications. How easy? Check out the short screencast and developer documentation here.

Featured applications

The framework is already in use by the popular Mac applications, AppBodega and Kiwi. Ads for AppBodega can be purchased now and Kiwi will be available soon.

Resources

More information, resources, and a demo application please visit the new developer section. For questions and help getting your Mac application listed with BSA, please contact Gregory.

Facebook fan count

We noticed that publishers have been actively building up their following on Facebook, and many of them have a very impressive following. Facebook fan pages have become yet another extension of a website and online brand. Therefore, it only makes sense for us to include Facebook fan counts as part of the public stats section on publisher buy now pages. To add your Facebook fan count to your buy now page, go to the Publisher Dashboard > Edit Site, and add your fan page URL. Go back to the Publisher Dashboard, click on “update stats” and your fan count will appear on your buy now page.

The hat tip for this idea goes to Adriana of Scene360. Thanks Adriana!

Tweet This

To help promote ad space, publishers will often tweet links to their BSA buy now page. When done in moderation, this can be a great way to make sure your Twitter followers are aware of the ad space for sale on your site. We wanted to make this easier for publishers by providing a shortened link for each buy now page. On the Publisher Dashboard, each site has its own http://bsa.ly/[key] link that goes to the buy now page and a link to tweet about it.

As always, if you have any feedback, please don’t hesitate to send me an email: todd _at_ buysellads.com (attn: spam bots – I know my _at_ trick won’t fool you, but it makes me feel better).

We’re proud to announce that the ad analytics in your BSA accounts are now real-time. What this means is that the stats update within a minute or two of when the impression or click occurred. This new release of our stats collection and parsing process is a significant upgrade to our infrastructure. In the coming weeks (and on an as-needed basis moving forward) we will be plugging in additional stats collection servers to this new setup. And, naturally, the distribution of these servers will be somewhat strategic in their geographic location, allowing us to improve the response time (even as little as 10 milliseconds is a big deal to us) of our stats tracking pixel.

So, what does this mean for BSA users?

It’s very simple. Advertisers get real-time access to ad performance stats. Publishers also get that same real-time access to ad performance stats. And, more importantly, your ads/website will load faster as we continue to distribute the tracking pixel geographically.

Questions, concerns? Please ask below in the comments or send me an email personally to todd _at_ buysellads.com.

Steve Souders, a pioneer in website performance and Google’s Performance expert, did some performance testing of 3rd party content (including ad networks). The results are here: http://stevesouders.com/p3pc/. If you look at the ad networks included in his tests, BSA’s ad code is by far the fastest of them all and is classified as having a “small” impact on page load time. The reason for this is very obvious — our non-blocking asynchronous ad code.

Our asynchronous ad code is something we’re very proud of. In fact, I think we should start promoting this sexy feature more than we do. We didn’t have to make asynchronous ad code, and our business would be fine if we had not done this. But, that’s not the way we were thinking before deciding to spend a decent amount of time converting our ad code to be asynchronous. It was a ton of work, and to be candid… it was VERY painful, making the switch from the old ad code to the async ad code. But it was totally worth it, our publisher sites that use the async code load faster. The question we asked ourselves when deciding whether or not to do this project was “Is there a good reason NOT to do this?”. I think that it would be hard to argue that having asynchronous ad code actually makes us more money — and that’s exactly why no other ad networks have made this same investment, it doesn’t effect their bank account.

At the end of the day, I am not going to hold my breath while waiting for other ad networks to do what is right and provide an asynchronous version of their ad code. Sure, maybe Google will do it with AdSense some day, but other than Google I doubt any other ad networks will do this any time soon. I know, I’m not being very optimistic here, but for good reason. Look at it this way: if BuySellAds.com, a very small company with 1.5 core engineer’s (I’m only counting myself as half an engineer) can do this in 3 week’s time… why can’t other ad networks do this? Ad networks with 10′s of engineers! What are you waiting for? Now that we have shown that it is possible, reliable, and provides our users with measurable page load time improvement there isn’t a good reason not to do this. You can even copy techniques used in our ad code.

If my rant above is not enough, here’s a look at reactions from some of our publishers after they installed our async ad code:

Remember the day Michael Jackson passed away? Several news websites were crushed by the traffic and crashed. It wasn’t because the news websites could not handle the traffic; it was the ad networks blocking ad code that slowed things down. It is a known fact that ad networks are a key bottleneck when it comes to website performance. We decided that it was time for some innovation in ad code delivery methods, and are proud to announce our new non-blocking, and truly asynchronous JavaScript ad code.

If the major ad networks like Google AdSense, Yahoo! Network, AOL Advertising, as well as the popular ad serving products such as Google AdManager and OpenX converted their ad code to be non-blocking, the internet as a whole would become an order of magnitude faster. I genuinely hope that the larger ad networks will step up to the plate and follow our lead on this. A faster internet is a happier internet. This is a big deal.

Why is this a big deal?

Speed
Plain and simple: your website will load faster for your visitors. JavaScript is a performance burden on your website. It blocks additional resources in the page from downloading and blocks elements below from rendering (see Steve Souders Loading Scripts Without Blocking article for more info).  It has also been rumored that site speed may soon affect Google page ranking.

Better Data
It is generally accepted that ad networks will report slightly different impression level data than your website analytics software. There are a variety of reasons for this. Slow or partial page loads is one of these reasons. Faster ad code means fewer slow or partial page loads and therefore better data.

Why should you care?

Let’s face it, ad networks slow down the internet.  Since online advertising is part of our livelihood it is important for us to do what we can to make online advertising less evil. Making websites load faster is important.

How can you get the new snippet?

Login to your BuySellAds.com account and go to your Publisher Dashboard. Click on the “get ad code” link for each of your ad zones and follow the instructions on that page. The main snippet below will need to be installed right after the opening <body> tag:

<!-- BuySellAds.com Ad Code -->
<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = '//s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- END BuySellAds.com Ad Code -->

Then, for each ad zone, you will need to install the following snippet where you want the ads to appear. Note: this snippet will be unique for each ad zone, please get the appropriate snippet from the “get ad code” page for your ad zone (this link is on your Publisher Dashboard):

<div id="bsap_[zone]" class="bsarocks [sitekey]"></div>

Important: If you install the new version of the ad code, you MUST install it for all of the ad zones on your site. If you don’t, there is a chance for a race condition here and there if the bsa.js asynchronous ad code has not downloaded by the time the browser tries to render each zone.

Of course, your current install of the BSA ad code will work just fine, but it’s in your best interest to upgrade to the new BSA ad code install to reap the performance improvement. This async install of the BSA ad code is now our default install and we will be working to encourage publishers to make the change until we can phase out the legacy version 100%.

Special Thanks

We would not be “clued-in” to techniques and methods for doing this without the work of Google Evangelist and YSlow creator Steve Souders. His book High Performance Web Sites is a must read, and we also suggest keeping up with his blog: http://www.stevesouders.com/blog/ – there is a wealth of information there now, and he will be publishing some posts in the coming weeks on 3rd party content (ads, widgets, analytics) that I am sure will be valuable.  Steve was also kind enough to take a look at our snippets before todays release.

header image copyrighted by Roland