How to Implement Smart App Banners on a Website to Promote App Downloads
Have you noticed how some sites promote their own app to download when you visit their website while browsing through Safari on an iPhone, iPad, or iPod touch? This is done through a little pop-up menu that appears at the top of Safari when browsing some sites with iOS 6 onward, and it’s done through something called “Smart App Banners”. If you haven’t seen this on the web yet, here is what it looks like at the top of a site:
These are surprisingly easy to implement, all that is needed is the addition of a new <meta> tag in the web pages <head> section that references the app id, like so:
<meta name="apple-itunes-app" content="app-id=#########"/>
Replacing “#########” with the appropriate app-id, which if you’re a developer you almost certainly already know. For web developers, you can get the app id by knowing the iTunes/App Store link, which contains the app id within the URL string. Googling for the clients app like “App Name App Store” is usually enough to find this instantly.
For example, this is the link for the Kayak app (app chosen because their mobile website uses Smart App Banners):
In this case, “305204535” is the app-id code that would need to be plugged into the aforementioned meta tag.
Apple has detailed documentation on this, check out the developer library for more information.
This tip is really going to be most helpful for web developers and application developers, and anyone else who happens to have their own app and their own website where they’d like to prompt users to download that app. For those with websites and without apps, setting the Apple Touch Icon is equally as important, since that controls what a user sees when bookmarking a website to their iOS home screen. That’s just a matter of adding a file named “apple-touch-icon.png” to the primary website directory, though everyone should take the time to make a retina-ready version of that touch icon.
Heads up to MarketingLand for the tip idea.