Smart App Banners

How often do you get annoyed by the following? You look up something on Google on your iPhone and you find an answer in a forum. When you click-through the search result the forum does not just show you what you were looking for, but it pops up a large annoying alert informing you that with their native app the reading experience would be so much nicer. And it does so even if you gave in some time earlier and had already installed the app.

Fortunately it has been announced that Apple will include a smart solution to this problem in iOS 6. Safari will gain the ability of automatically displaying such banners.

Now there are actually 2 kinds of problems that are being solved at the same time. The first being that the owner of the website simply wants to inform you that “there’s an app for that”. An automatic and unobtrusive way to advertise their iOS app to you. It shows you the app icon, the name of the maker, what it costs and there’s a smart button. This either opens the app page on the app store or even opens the app if you already have it.

It Is Served

There might have been several pages that implemented the necessary META tag right after the WWDC presentation, but the first time I ever saw it in the wild was on the TED.com website.

Even though this relates to unpublished technology there are already several guides on the internet informing us as to what the appropriate HTML additions are to achieve the displaying of these banners. Or we can simply inspect the META tags present at a website that has them already implemented. That of that makes them public knowledge that we can comment on.

The META tag has the name “apple-itunes-app” and in its content it has the “app-id” which is the internal identifier that every app has on the Apple App Store. If find out your App ID you can peruse Apple’s iTunes Link Maker or you simply inspect one of the long-form URLs leading to your app on the app store. There’s a long number in there and that is it.

The second kind of problem that the banners solve in a smart way is to actually allowing website makers to deep-link to specific content. Like in the TED example above I’ve opened up a page of an individual video. If I have the TED.com app installed then tapping the banner button should also open up the app to this very same video.

This is achieved by the second (optional) parameter in the tag, named “app-argument”. This has to be a valid URL because it is passed as NSURL into the app, similar to launching the app with a custom URL scheme. Here TED.com simply passes the URL of the video page to the app because this is probably the permalink to this piece of content. Their app will know how to go to the video that corresponds to this URL.

People have already begun to embrace these two usage scenarios. Blogs and content sites are specifying deep-link URLs to open content people found on Google in their native apps. App makers are using the tag to use the banners are ads.

Stephen Darlington of Wandle Software has published a WordPress plugin that adds Smart App Banner capability to any WordPress blog. You get a new box in which to enter the app id for each post or page. If set then the appropriate basic tag is added.

I have this plugin running on Cocoanetics.com until my web designer updates my custom theme to support them without plugin. I’m thinking of having the simple banners on all iOS app pages and if I am ever going to do a dedicated reading app then I would want to pass the current page’s permalink to the app as well as argument.

App Implementation

I’m not telling you any secrets here because handling Smart Banner arguments is exactly the same as handling reacting to opening via custom URL scheme.

You need to be using the modern application:didFinishLaunchingWithOptions: delegate method instead of the outmoded applicationDidFinishLaunching. The newer method returns a BOOL of YES if it is able to handle a URL. If a URL was passed then you find it in the options dictionary via the UIApplicationLaunchOptionsURLKey.

But this is not yet a good place to handle it. If you return YES here, then application:openURL:sourceApplication:annotation: (new in iOS 4.2) will be called giving you the opportunity to handle the passed URL. So you won’t have to go digging for the URL in the dictionary, just use the url parameter passed here.

At this point it is up to you what you do with the NSURL or even how it is constructed. If it is a permalink to a web page then you probably have a method to retrieve the matching article. If it is a custom scheme then you will know how to parse its parts and derive the appropriate command from it.

You’re not limited in any way. Say if you have a web service where different pages show different functions, then you could map via a custom URL scheme to the matching pages/functions inside your app.

Conclusion

If you are amongst the content providers who are guilty of the JavaScript Nag Alert then please implement Smart App Banners as soon as you can. If you have a content app, then pass the appropriate deep-link URLs to allow people to seamlessly transition from the small-text web page to the wonderfully optimized version in your app.

If you are an app maker then consider adding the necessary META tag to your product pages, either by hand or with the help of the mentioned plug-in.

Smart App Banners are a really great invention. I am certain that they will find wide adoption because they are simple to support in apps and even simpler to implement on web sites. Hardly any technology is simpler than only having to add a META tag.

Categories: Recipes