Smart app banner

About

Smart App Banners provide a unified method of promoting apps. A smart app banner shows the details of the app, its icon, ratings and price information. They are usually presented as a fairly unobtrusive banner at the top of webpages.

How to implement on IOS:

To add a Smart App Banner to a website, include the following meta tag in the head of each page where you’d like the banner to appear:

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

You can include three comma-separated parameters in the content attribute:

• app-id: (Required.) Your app’s unique identifier. To find your app ID from the iTunes Link Maker, type the name of your app in the Search field, and select the appropriate country and media type. In the results, find your app and select iPhone App Link in the column on the right. Your app ID is the nine-digit number in between id and ?mt.
• affiliate-data: (Optional.) Your iTunes affiliate string, if you are an iTunes affiliate. If you are not, find out more about becoming an iTunes affiliate at http://www.apple.com/itunes/affiliates/.
• app-argument: (Optional.) A URL that provides context to your native app. If you include this, and the user has your app installed, they can jump from your website to the corresponding position in your iOS app. Typically, it is beneficial to retain navigational context because:
• If the user is deep within the navigational hierarchy of your website, you can pass the document’s entire URL, and then parse it in your app to reroute them to the correct location in your app.
• If the user performs a search on your website, you can pass the query string so that they can seamlessly continue the search in your app without having to retype their query.
• If the user is in the midst of creating content, you can pass the session ID to download the web session state in your app so they can nondestructively resume their work.
• You can generate the app-argument of each page dynamically with a server-side script. You can format it however you’d like, as long as it is a valid URL.

How to implement on Android:

Criteria for android:

In order to show the native app install prompt to the user, your site must meet the following criteria:

1. Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)
2. Includes a Web App Manifest that includes:

a. short_name

b. name (used in the banner prompt)

c. icons including a 192px and a 512px version

d. prefer_related_applications is true

e. related_applications object with information about the app

3. Served over HTTPS

If this criteria are met, chrome will fire a beforeinstallprompt event. You will have to listen for this event and notify the user your native app can be installed with a button or other element that will generate a user gesture event.

Differences between Android and IOS smart Banner

IOS

Android

Configuration

This is done by adding a meta tag inside the head tag of your website

Done inside a manifest file added in the root directory.

Version

iOS 6 +

Available in Chrome 44+

banner view

Safari will identify your app in the app store and automatically show the smart app banner.

After beforeInstallPrompt event is triggered, it shows as a prompt(modal dialog) or mini-info-bar

App ID

added in the meta tag.

Added in the manifest file

To get the ios banner look on android, there will have to be a custom implementation targeted at android devices.

Additional Info:

On IOS, this banner has two different outcomes when clicked. If the app is installed, the banner will open it up by calling its URI scheme with accompanying deep link parameters. If the app is not installed, the banner will take the user to its App Store page.

Apple’s banner does have some unique characteristics that other 3rd party smart banners cannot easily replicate:

• The call to action “View” will always change to “Open” when iOS detects that the app is installed.
• While downloading the app, the smart banner will show a progress bar.

It also comes with some significant limitations:

• It only works on iOS Safari.
• The layout, color, and contents cannot be changed
• No click or download tracking
• Deep linking (taking users to specific content) only works if the app is already installed.

Users can easily dismiss a Smart App Banner by tapping the X button on the left. Once dismissed, it doesn’t show itself again for that user on that website, even if the website is reloaded.

The only way to get it to show again is if the user clears some metadata on that iOS device.

Some Website that implements smart App Banners

• Facebook:

The image shown above is what smart app banner looks like on facebook. This appears on all facebook pages. It’s usually fixed at the top. Once the X button on the left is clicked, it takes up to 2 days before it reappears.

• Zoom:

Based on my investigation on zoom, I was able to find out they have their custom implementation of “smart App Banner” for android.

React Smart Banner Package:

https://github.com/patw0929/react-smartbanner

Reference:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

https://developers.google.com/web/fundamentals/app-install-banners/native

https://developer.android.com/distribute/best-practices/grow/drive-installs

https://googlechrome.github.io/samples/app-install-banner/