Manbolo Blog

Manbolo Team Blog, creators of MeonArchives

Invasion of the Smart App Banners

On iOS 6, Apple has introduced the Smart App Banners, a new way to promote your native app from your website. It’s basically a banner that is displayed automatically on your website, with the App Store icon of your app, the rating, and some screenshots on iPad. If the app is not installed, clicking on the Smart App Banner opens the App Store app page. If the app is installed, clicking on it will launch the app.

Here are some examples:

Le Monde.fr:

Le Monde.fr Smart App Banner

Instapaper:

Instapaper Smart App Banner

Photo Discover:

Photo Discover Smart App Banner

Check The Weather:

Check The Weather Smart App Banner

And, of course, Meon on iPhone:

Meon iPhone Smart App Banner

And on iPad (notice the additional screenshots):

Meon iPad Smart App Banner

Integrating a Smart App Banner in your website is straightforward: you just have to add one line in your html header, inside the <head> tag:

<meta name="apple-itunes-app" content="app-id=400274934">

where 400274934 is your application id. You can even provide an URL scheme that will be passed to your app when the app is installed and the user clics on ’Open’. You can add parameters to this custom URL scheme, to provide some context on your app; for instance: launch the app in a specific state, on some profiles etc…

For example, let’s say that Meon respond to the URL scheme x-meon://. This URL scheme can take an integer parameter, level, that indicates to the app to launch the specific level. Your smart app banners could then be:

    <meta name="apple-itunes-app" 
            content="app-id=400274934,
            app-argument=x-meon://level=10">

In your application delegate, you juste have to implement the following selector:

- (BOOL)application:(UIApplication *)application
             openURL:(NSURL *)url
   sourceApplication:(NSString *)sourceApplication
          annotation:(id)annotation

(available from iOS 4.2). This selector is called if your app is already running or if your app starts from scratch. In this example, the url variable would be the app-argument of the Smart App Banner x-meon://level=10. Usually, sourceApplication contains the bundleId of the launching application, but in the case of the Smart App Banner, the value is nil.

Finally, if you’re a TradeDoubler or LinkShare affiliate [1], you can add also your affiliate identifier and get a small percent of affiliation.

    <meta name="apple-itunes-app"
            content="app-id=400274934, 
            app-argument=x-meon://level=10,
            affiliate-data=partnerId=30&siteID=bk33jlLDYJo">

As you can see, adding a Smart App Banner to your website is very simple, so don’t hesitate.

From jc.

All Posts