Have you ever noticed that when you visit some most popular websites (like PayPal or Trello), the Safari browser displays a beautifully laid out banner ad which contains a description of their iOS app and a call to action to download (if not installed) or view (if already installed) it? This is a feature is called Smart App Banner and is introduced in iOS 6 intended to promote your iOS app to users visiting your website and thereby driving more users to the mobile app.
Advantages of Smart App Banner over a custom ad banner implementation
Of course, one may think that custom implementation of a similar banner would be an easy implementation on the server (web) side, but Smart App Banner offers many features that are very hard or may not even be possible to achieve.
- Common look and feel across other products and hence won’t be mistaken as clickbait or spam advertisement
- Clean presentation at the top without obstructing the main web content
- Easy to get rid of, and once closed, it won’t re-appear on subsequent visits
- Intelligently identify whether the app is installed, and thereby redirecting directly to the app instead of app store
- If the app does not support the user’s device (due to minimum SDK version or location), the smart app banner won’t be displayed
- Displays progress bar inside the banner to convey installation progress of the app from the app store
Alright, enough said about the benefits. Now, let us look at how to implement these smart app banners for your website and thereby giving a boost to your iOS app.
Implementing Smart App Banner
To get a Smart App Banner setup, you only need two things
- Appstore id of your app
- Access to your web app backend
Step 1: Get Appstore id of your app
The easiest way to get the appId is to inspect the Appstore URL. Usually, appId will be appended towards the end of the URL. For example, in Canadian Appstore, Paypal URL is https://apps.apple.com/ca/app/paypal/id283646709 where “283646709” is the app id.
However, this way of finding the appId from the App Store URL is not officially documented and may change any time in the future. Alternatively, you can locate the appId inside your iTunesConnect account under the App Information tab.
Step 2: Add meta tag to your website.
Once you have your appId, we need to tell Safari that an in-market app is linked to this website. This is done by adding a meta tag inside the head tag of your website as shown below.
<meta name="apple-itunes-app" content="app-id=app-id-from-step1"/>That’s it! When a new user comes to your site, Safari will identify your app in the app store and show the Smart App Banner.
What’s next?
There is also a provision to provide extra information in the meta tag in order to make seamless navigation to the iOS app. You can read more in the Intelligent deeplink from Smart App Banner article.
Conclusion
Smart App Banner is truly a smart way to increase traffic to your iOS app, and it takes care of many use cases on your behalf that you’ll have to manually implement on your website otherwise.