Boosting Mobile App Engagement with Smart Banners

Smart Install Banners

Smart install banners allow users to seamlessly install the product's mobile app from its mobile website. When a user visits the site from his mobile device, the banner appears and prompts him to interact with the site's corresponding mobile app. If the app is not installed on his device, tapping the banner will automatically direct him to the app's entry in Google Play or App Store. If the app is installed, the banner will either not show up (for Android) or open the installed app (iOS). Since product discovery happens in mobile sites, smart install banners help increase user acquisitions in the mobile apps.

Smart banners, in general, require the following before they are displayed:

• The mobile device loading it should support the app
• The app is available in the user's current location

Smart App Banners for iOS

The smart app banner for iOS devices has been fully integrated into iOS 6 Safari. It is presented at the top of the page with the app logo, title and app store rating. It also allows users to close the banner if they don't want to see it or install the app. Here's an example of a smart app banner for iOS:

Adding the smart app banner to your site is as easy as adding a meta tag at the head of a page. You should include it in all of the pages where you would like the banner to be displayed. The simplest you can do with it is:

<meta name="apple-itunes-app" content="app-id={store_app_id }">

• store_app_id is anine-digit number that contains your app's ID.

Additional content to the meta tag can be added as follows:

<meta name="apple-itunes-app" content="app-id={ store_app_id }, affiliate-data={ affiliate_string }, app-argument={ deep_link_url }">

• affiliate_string is your iTunes affiliate string if you have one.
• deep_link_url is a URLthat provides navigational context into your app. If the user has an app installed on his device and taps on the banner, he will be directed to the proper location in your app. This makes the user's experience more seamless.

Check your banner while visiting your site using a Safari browser.

Native App Install Banners for Android

There have been a lot of third party libraries that tried to implement a similar smart banner on Android browsers. Fortunately, Google finally decided they needed a smart app banner of their own. Native app install banners for Android were then implemented on Chrome for Android Beta 44. It displays similar information about the app but appears at the bottom of the page.

The following requirements must be met to fully integrate a native app install banner into your mobile site:

• Your site must be served on an HTTPS server
• You should have a manifest file
• The user should've been at your site twice on two separate days over a two-week duration

Manifest File

A manifest file is a JSON file that allows you to control how your app is launched. To integrate it into your site, you first need to deploy it,then add a link tag to your site page that points to the manifest file as follows:

<link rel="manifest" href="manifest.json">

This is an example of a manifest file:

{ "name": "Android - Mobile Application",

  "short_name": "Android",

  "icons": [{

    "src": "icons/launcher-icon-144x144.png",

    "sizes": "144x144",

    "type": "image/png"

  }],

  "prefer_related_applications": true,

  "related_applications": [{

    "platform": "play",

    "id": "com.google.android.mobileapplication"

  }],

  "start_url": "./index.html",

  "display": "standalone" }

You are required to provide a short_name and an icon with 144x144 dimensions. It is also recommended to provide icons of different sizes for different device resolutions. To enable the app install banner, you must add a related_applications array with attributes:platformandid, which stands for Google play and your app ID respectively.

Since it requires that the user has visited the site on two different days, it can be harder to test. One thing you can do is to set the chrome://flags/#bypass-app-banner-engagement-checks on your Chrome browser. You will be able to check your banner if it appears as it should, assuming your site complies with the other requirements.

For more examples on app install banners, you can check out some from Google Chrome's github.