How to Set Up An iOS and Android Smart App Banner

This blog post was originally published in 2015. You can also read one of our newer posts on how to use web to app banners on mobile.

It has been well known for a while that users prefer native mobile apps to mobile websites. However, deep linking to and from apps is not as robust as it should be compared to the web, so mobile websites are still a prominent part of mobile phone usage, especially for discovering new apps.

For example, imagine an existing user shares an article from your app to Facebook, and a number of new visitors click on that article. If you take them to the appropriate App Store page instead of showing them the article, there will be a lot of angry people who just close the store and go back to Facebook. This is where a mobile site with a Smart App Banner can come into play.

What Is A Smart App Banner?

A mobile smart banner uses a fraction of the screen on a mobile website to inform and encourage users to open the native app, or install it if they don’t have it. It’s a smart link that includes all the routing logic to automatically open up the app when it’s installed or fall back to an App Store page if not.

As you can see, the content is still available on this mobile site page without the app, but the banner at the top of the screen presents an option to download or open the app if the user so chooses. For new users, showing a mobile site with a banner delivers a clear and unobtrusive onboarding model, where they can interact with your mobile website and convert into full app users when ready.

What Does Apple’s iOS Smart App Banner Do?

In iOS 6, Apple released a fully integrated smart app banner into Safari. Its look and feel has evolved since then, into what you see below, but still functions the same way.

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:

1. 1. The call to action “View” will always change to “Open” when iOS detects that the app is installed.

1. While downloading the app, the smart banner will show a progress bar.

It also comes with some significant limitations:

1. 1. It only works on iOS Safari.

1. 1. The layout, color, and contents cannot be changed

1. 1. No click or download tracking

1. Deep linking (taking users to specific content) only works if the app is already installed.

Is There An Android Smart App Banner?

Because of the fragmentation of the Android ecosystem and browser choice, Google has never released an Android smart banner. All Android developers have had to roll their own or adapt a pre-existing solution. This is a major hassle if you are a mobile developer who has built for both Android and iOS and desire consistent behavior and attribution measurement.

Apple’s introduction of the iOS smart banner spawned the development of a few different third-party options with Android compatibility. Unfortunately, progress on these alternatives has stalled in recent years, leaving developers out of luck once again. Here are a couple of the more popular examples:

1. 1. Smart app banner plugin for jQquery https://github.com/jasny/jquery.smartbanner (no longer maintained)

1. Smart app banner without jQuery requirement https://github.com/kudago/smart-app-banner

The Branch Cross-Platform Smart App Banner

Tens of thousands of apps use Branch’s iOS or Android smart app banners on a daily basis to link to their app, using both dynamically generated links from the native iOS/Android SDKs and marketing links manually created on the Branch dashboard. These links work on every operating system and browser to deliver users to your app or to the App Store, depending on the situation.

Leveraging this expertise, we have built a fully customizable, cross-platform, trackable, deep linking smart app banner. Gone are the days of worrying about how to make a smart banner for your app’s mobile website, or about finding an external smart banner creator. By building a way to link from the web to app across all browsers, including Safari, Chrome, Firefox, and stock Android browsers, we’ve created a way to route your users to the platform with the highest engagement no matter which browser they use.

Example Branch banner on iOS:

Example Branch banner on desktop:  

By using a Branch smart app banner, you get all the functionality of Apple’s iOS smart app banner plus these awesome features:

1. Smart Routing to the Mobile App or Appropriate App Store

When the banner is tapped and the app is currently installed, it will open the app. If the app is not installed, it will take the user to the appropriate App Store page.

2. Cross-Platform Support

Works on all mobile browsers and mobile operating systems. Easily create an iOS smart banner or Android smart banner once, and use everywhere.

3. Installed App Detection

If you have the Branch SDK in your app and the user has opened at least once, we are able to automatically update the call to action from “Install” to “Open” just like Apple – or allow you to customize the respective call to action messages.

4. Custom Audience Targeting

Tailor the Smart Banner look and feel as well as a call to action, based on specific behaviors of yours users both across mobile web and your app.  For example, use a different banner for your most active users.

5. A/B testing

Without changing any code on your page, run experiments to identify the optimize Smart Banner audience targeting and creative to drive the greatest conversion of new app installs as well as app re-opens.

6. Download Tracking

On the Branch dashboard, we provide rich analytics to track how many people viewed and clicked the banner, and how many installed or opened the app. This can tell you how well a mobile web page is converting, and help you optimize your growth efforts.

7. Deep Linking

You can specify a dictionary of data that you want to pass into the app, so that you can take the user to a specific product, or piece of content within the app – also referred to as deep linking. Branch’s industry-leading matching accuracy means that you even receive those deep link parameters on first install from an App Store, in order to customize the onboarding flow for all users – newly acquired or re-engaged.

8. Customizable Smart App Banner Creative – Layout, Color, Content, and Icons

To support a native look and feel with your mobile website, or just to customize the experience, Branch Journeys enables you to fully customize all visual aspects of your banner using a graphical editor or directly editing CSS.  This includes the app title, description, call to action button, rating stars and number of reviews. It’s all tuneable to fit your site’s design.

How to Configure the Universal Smart App Banner with Journeys

Branch also offers Journeys, a premium solution that allows you to codelessly create and deploy web to app assets such as smart banners. With Journeys, brands can:

1. Create an unlimited number of potential audiences based on web and app activity, referring site, operating system, and more.

2. Choose from a number of pre-built templates and have full control over the layout and design of your assets.

3. See real-time performance, segmented by Journey. Attribute down-funnel actions back to the Journey. Implement improvements without changing code.

Guide to Configure the Universal Smart App Banner

It’s very easy to get started with the Branch Journeys Smart App Banner. You can either follow the below step-by-step guide, or request a Branch demo to meet with a member of our team.

Step 1: Configure Your Link Routing

First, head to https://start.branch.io and follow the instructions. You’ll define all the different endpoints so that Branch knows where to redirect the user in every scenario.

Step 2: Add the Web SDK to Your Site

Next, retrieve your Branch key from the dashboard at https://dashboard.branch.io/#/settings. Paste the code snippet below into the Javascript tags on your site. Add the key you retrieved from the settings page in the ‘YOUR-BRANCH-KEY’ section.

Step 3: Set Up Your Journeys Smart App Banner

Head to the Journeys section of the Branch dashboard and follow the wizard to configure your smart app banner. You can also find full Journeys documentation on our developer portal.

Step 4: Configure Your iOS or Android App for Deep Linking

Lastly, you can set up your native app for deferred deep linking and install tracking very easily by following the integration instructions located on this site for iOS or Android.

All done!