How To Create A Banner For iOS Apps On Your Website (Smart App Banners)

Apple recently released an awesome feature to allow developers to promote their apps from their websites.  It is extremely easy and quick to create the banners for your iOS apps on your website – it literally involves implementing one line of code and voila!  This feature is known as “smart app banners” and is part of the new feature offering of iOS 6.

Some caveats:  these banners appear only on iOS (not OS X) powered devices and only on Safari based web browsers.  So for browsers using the Chrome browser these smart app banners won’t display.  The banners are “smart” because they are linked into information from the App Store. For example if you have the app installed already, the button will say “Open” and if the app in not currently installed on your device the button will display the “view” an clicking on it will lead the user straight to your app’s entry in the App Store.  In other words the smart app banner is a kind of extension of the App Store itself, nicely promoting your app from your website.

You can see an example below of how the Smart App Banner appears on a website.

how smart app banners appear on websites

The smart banners also have a “close” button so that if the ad is annoying users they can easily dismiss it.  Once closed the ad won’t display again.

How To Create Smart App Banners For Your Website

In under 5 minutes you can have your smart app banner up and running.  This is the outline of the code that you will need to insert into the <head> section of your website.

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Simply replace the “myAppStoreID” with your App Store id.  If you don’t know how to get this, you can either go into iTunes Connect, click on “Manage Your Applications” and then click on the app in question.  In the top section under “Identifiers” you’ll see your App Store ID listed.   Alternatively, go to your iTunes listing on the web and grab the number that appears straight after “id” in the url.

If you have an affiliate ID number you can insert that instead of “myAffiliateData”.  The app argument section is a bit more advanced, that allows you to pass information to your app once it launches.

As an example, this is how the code appears on my own website:

<meta name="apple-itunes-app" content="app-id=548200639 affiliate-data=1720307">

That’s it!  In under 5 minutes you can have your smart app banner set up!

To see how the banner looks on this site, just open up makeappmag.com on your iOS device using Safari.

Comment below and let me know what you think of the smart app banners.

Should everyone use it?  Is there a case for NOT using it?

Author: David Janner

David Janner is a former M.D. and the Editor-in-Chief of MAKE APP Magazine. His passion is app development and app marketing. You should follow him on Twitter and Facebook and Google+ in order to get the most important industry related news, hot off the press. If you would like to arrange a 15 minute app marketing session to discuss your App Store Optimization strategy, contact him here.

623 thoughts on “How To Create A Banner For iOS Apps On Your Website (Smart App Banners)”

Leave a Reply

Your email address will not be published. Required fields are marked *