Giacomo Balli profile picture
Giacomo Balli
The Mobile Guy

Over a decade of mobile experience at your service.
I help business owners leverage mobile technology.

Let's Chat LinkedIn

Smart App Banners by Apple - How to Implement

I have over 50 apps in the store (not counting those commissioned by companies) and I just finished implementing Apple's new smart app banners. As you can probably imagine it was incredibly tedious.
Smart app banners are a new feature in iOS6+ "that provides a standardized method of promoting apps on the App Store from a website", as Apple directly explains it. This means that your device will show you a banner, at the top of the screen referencing the app indicated by the developer. The idea is to make it extremely easy for the user to view the content they reached in the native app (if installed on the device).Smart App Banner exampleFor the moment, nothing prohibits you from including in the meta tag an AppID that is not related to the page (for example to always promote one particular app).Smart app banner on iphoneThe "smart" part comes to play when dealing with different scenarios:
- not Apple device: nothing is shown (no broken code or fallbacks to include)
- iOS < 5.1.1: nothing is shown (no broken code or fallbacks to include)
- iOS6+ and app is installed: shows banner asking to open the native app
- iOS6+ and app is not installed: shows banner asking to download the native app
The code snippet you need to add to the HEAD section of your HTML is
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
 ... pretty easy huh?!

Customizing

As you probably already noticed there are three elements that you can edit: app-id, affiliate-data and app-argument.
AppID is the only required element. This is the unique id of the app you wish to be referenced in the banner. In order to find this you can log into your iTunes Connect account (it will be in the top left part of the app details page, Apple ID) or search for your app using Apple's Link Maker Tool. All ids will be a nine character number.
For example, if this were the link to your app: http://itunes.apple.com/us/app/donca-social-app-for-globe/id562792748?ls=1&mt=8, the AppId would be 562792748.
Affiliate is the first optional parameter. Now that the public is used to getting things for free (or basically free), the way a huge chunk of online revenue is made is using affiliate marketing. This consists of providing direct links to downloads and if a user follows through you get a commission. It was very nice on Apple's part to include this. If you're registered as an iTunes Affiliate on LinkShare, you can include your siteId and partnerID and earn commission on each download.
In order to find the correct values to insert, head over to the iTunes page on LinkShare and grab your ids. These final parameter should be something like partnerId=30&siteID=Jl/RSHcRp5M
Argument is the second optional parameter. When you open a native app using a custom url scheme, you can pass arguments. these are particularly useful to direct the user to a specific page or action rather than the usual "landing". In the case we used above, viewing the content you reached, say an article, you could make this a url or unique article id in your database. By doing so, you will deliver a seamless experience to the user while switching from mobile website to native app.
A random example would be passing http://articleId/224456
The tricky part might be account for it from within the app with something like this:
-(BOOL)application:(UIApplication*)app openURL:(NSURL*)url     sourceApplication:(NSString*)sApp annotation:(id)ann {
if (url != nil) { // Parse url and alter your launch state as appropriate. } return YES;}
However, it has to be said that although smart app banners are smart they're certainly aren't geniuses. In order for the to be really smart app banners the should implement:
- extra argument for selectively show the banner in case it's already installed (for example when simply promoting)
- extra argument to set if the banner should be shown only once or every time they access the page
- ability to place the banner above the viewport (completely outside of Mobile Safari)
- smart system to deal with different affiliate networks (LinkShare, TradeDoubler, DGM Pro).

#affiliate, #smart-app banners
Published: Tue, Oct 9 2012 @ 4:30:50
Back to Blog