Mar 30, 2022
This blog post was originally published in 2015. It has been updated to reflect changes in the current iOS landscape, and the lack of changes in the Android landscape.
It has been well known for many years that users prefer native mobile apps to mobile websites. However, deep linking to and from apps is still not as robust as it should be compared to the web. Because of that, 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 mobile app to Facebook, and a number of new visitors click on that article. If your links are taking those visitors to the App Store page for your app, instead of showing them the article, that’s a lot of disgruntled users who lose interest and return to Facebook. This is where a mobile site with a Smart App Banner can come into play.
In this post, we’ll describe the various smart app banner options available on iOS and Android, including how to create fully customized smart banners using Branch Journeys.
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 to install it if they don’t have it. It’s a smart link that includes all the routing logic needed to automatically open up the app when it’s installed, or fall back to an App Store page if not.
In iOS 6, Apple released a smart app banner for Safari. Its look and feel has evolved since then, but it still functions the same way.
Apple’s banner does have some unique characteristics that other 3rd party smart banners cannot easily replicate:
It also comes with some significant limitations:
If you want to use the basic Safari smart banner, all you need to do is include the following meta tag in the HTML head of your web page:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL">
Your app argument allows you to associate your app and the intended in-app destination with the corresponding webpage on your site. This association passes the destination, along with other information (for example whether the user is logged in) on to the app.
To learn more about the default Safari banner, check out Apple’s documentation page: Promoting Apps with Smart App Banners.
Note: if you have enabled Universal Links for your domain and the app is already installed on the device, Safari will automatically show a smaller version of the app banner. This “Universal Links banner” cannot be disabled.
Because of the fragmentation of the Android ecosystem and browser choice, Google has never released an Android smart banner. Chrome offers something called the Native App Install Prompt, but it is difficult to implement, provides very little developer control, and has never been widely adopted.
Apple’s introduction of the iOS smart banner initially spawned the development of a few different open-source options with Android compatibility. Unfortunately, progress on these alternatives has stalled in recent years, leaving developers out of luck once again.
This is a major hassle if you are a mobile developer who has built for both Android and iOS, and are looking for consistent behavior and attribution measurement.
Fortunately, there is a solution: tens of thousands of apps use iOS and Android smart app banners powered by Branch’s Journeys tool. These work on every operating system and browser to deliver users to your app or to the App Store, depending on the situation.
Gone are the days of worrying about how to make a smart app banner for your app’s mobile website, or finding an external smart banner creator. With Branch Journeys smart banners, you get all the functionality of Apple’s iOS smart app banner, plus all of the following:
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 by 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.
It’s very easy to get started with Branch Journeys. You can either follow the step-by-step guide below, or request a Branch demo to meet with a member of our team.
First, head to our dashboard and follow the instructions to create your free account. You’ll define all the different endpoints so that Branch knows where to redirect the user in every scenario.
Next, retrieve your Branch key from the dashboard under Account Settings > Profile. Paste the code snippet below into the Javascript tags on your site. Add the key you retrieved from the settings page in the ‘’key_live_YOUR_KEY_GOES_HERE’’ section.
<script> // load Branch (function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent logEvent disableTracking".split(" "), 0); // init Branch branch.init('key_live_YOUR_KEY_GOES_HERE'); </script>
Head to the Journeys section of the Branch dashboard and follow the wizard to configure your smart app banner. If you have under 10k monthly active users (MAUs), you can activate Journeys for free. You can also find full Journeys documentation on our developer portal.
Lastly, you can set up your native app for deferred deep linking and install tracking very easily by following our integration instructions for iOS or Android.
All done!
Explore our guide for more thoughts on how to optimize Journeys for app users, or read up on how to track app downloads from smart banners.
To help you fuel cross-channel and cross-platform mobile growth, our team works hard to deliver the most current, relevant resources.