iOS 6 Smart App Banners

What is a smart app banner?

A Smart App Banner is a little known new feature built into iOS 6 Safari that makes it easy for webmasters to add a banner at the top of your website when viewed on an iPhone or iPad on iOS 6.

It displays some information about the app, the icon, title, the publisher, the app rating, price and an option to view it on the app store (or a cancel button to dismiss the banner).

If you already have the app installed, it gives you an option to open the app in one tap, instead of directing you to the app store. 

You can see an example of the banner on my good friend ChrisJeff's website for the iOS game Space is Key.

How do I implement this on my website? 

Apple has made this very easy for developers to implement with just one line of code in the <head> section of the page you want the banner to display, the code is below and the only change you need to make is to add your own app-ID instead of the generic 12345678. You can find this in the iTunes Connect website.

 
Smart App Banner on the Space is Key website.

Smart App Banner on the Space is Key website.

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

The above shows the banner in its most basic usage, there are a few optional parameters you can pass to the banner. 

  • affiliate-data: Use this if you are an iTunes Affiliate to earn commision on purchases generated by your banner click.
  • app-argument: Use this parameter to pass a url to your application that allows to route to  a particular view in your application. An example use of this may be if you host a news website and a user is viewing an article, you can link them to your app and open up that same article. Or a more creative use is having a secret level on your game only accessible through a link on your website. 

Why do I need it? 

    App discovery is tricky these days. The Smart Banners provide a great interactive way for users browsing your website to download your app, or open your app.

    Utilising a small part of the screen, it gives potential users an easy familiar 'App Store Style' visual to download your app. After a quick glance of the banner, they know the logo, title & rating and have a one click button to view more information. 

    Does Apple provide any documentation on this? 

    Of course! Check out their developer documentation by clicking here

    Source: http://developer.apple.com/library/ios/#Do...