(almost 3 years ago) by adianteapps
Smart App Banners are those banners that appear at the top of the screen of your smartphone browser, that provide
a link to download an app. If you have a mobile app and a web, you can lead downloads of your app from
your web using these banners for any visitor using an smartphone. Therefore, these banners are a great tool
to promote your mobile app.
In this article you will learn how to create your own app Smart App Banner.
Example of Smart App Banner
In the example of the image above you can observe the Smart App Banner of the Feliz Navidapp webpage. In order to include your own banner you need to be able to edit the HTML source code of your webpage.
Smart App Banner for iOS
In order to display the banner whenever a visitor opens your web using an iOS device (iPhone, iPod or iPad) you only
need to include the following line within the
head element of your HTML code:
<meta name="apple-itunes-app" content="app-id=myAppStoreID">
You need to change the
myAppStoreId with your app's id. You can find it on the App Store download
For example for the previous example app, Feliz Navidapp The
App Store URL is:
So the id is: 771141588. If we set this id within the code:
<html> <head> ... <meta name="apple-itunes-app" content="app-id=771141588"> ... <head> ... <html>
For more info, here you have the complete reference of Apple Smart App Banners.
Smart App Banner for Android
There is no native support on Android for Smart App Banners, but you can use a jQuery plugin instead.
First, download the plugin and upload
to your server
Then, you need to include two fragments of code. The first one within the
<meta name="google-play-app" content="app-id=com.package.android"> <link rel="stylesheet" href="/path/a/jquery.smartbanner.css" type="text/css" media="screen">
Modify the path to jquery.smartbanner.css and set it to the path where you uploaded the file on your server.
Replace the package name
com.package.android with your app package name. You can also find it on the
download URL for the Google Play:
The second piece of code has to be included at the end of the
You also have to update the route to the file jquery.smartbanner.js
So, putting it all together:
Your Smart URL
If you create your mobile app on adiante apps, you already have a smart URL available. Instead of sharing multiple download addresses (for iPhone, iPad, Android...), you only need to share one address. And this address is smart: if it is opened by an Android device, the user is redirected to Google Play, and can download your app with a single click; if the link is opened by an iOS device, the App Store is opened showing your app profile page. If the address is opened by a desktop computer, it displays a landing page with Google Play and App Store links.
Promote your app
In this article we have seen how we can redirect mobile web traffic to increase our app downloads using a Smart App Banner. You can also make many other things to promote your app. You can read this article about how to promote a mobile application.