adiante apps

the easiest way to build your own mobile app

(over 2 years ago) by

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 banner on an iphone smartphone
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 address. For example for the previous example app, Feliz Navidapp The App Store URL is:

 
https://itunes.apple.com/us/app/feliz-navidapp-felicita-la/id771141588?mt=8

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 jquery.smartbanner.css and jquery.smartbanner.js.

Then, you need to include two fragments of code. The first one within the head element:

<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:

https://play.google.com/store/apps/details?id=com.adianteventures.adianteapps.feliz_navidapp

The second piece of code has to be included at the end of the body.

<!-- copy body -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="/path/a/jquery.smartbanner.js"></script>
    <script type="text/javascript">
      $().smartbanner();
    </script>
    <!-- end copy body -->

You also have to update the route to the file jquery.smartbanner.js

So, putting it all together:

<html>
  <head>
    <!-- copy head -->
    <meta name="google-play-app" content="app-id=com.adianteventures.adianteapps.feliz_navidapp">
    <link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
    <!-- end copy head -->
  </head>
  <body>
    ...
    <!-- copy body -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="jquery.smartbanner.js"></script>
    <script type="text/javascript">
      $().smartbanner();
    </script>
    <!-- end copy body -->
  </body>
</html>

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.

In our Feliz Navidapp example, its smart URL is http://www.adianteapps.com/FelizNavidapp.

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.

About this blog

adiante apps helps you to create an awesome mobile app and to succeed in your mobile marketing strategy and app promotion.

apps builder, mobile marketing, mobile strategy

Recent articles

view blog

Follow us


Chairman

About us

adiante apps brings to anyone the opportunity to create a mobile app. Thanks to adiante apps you can build your own mobile app very easily, without requiring any software development skills and with professional results.

I want to try it for free!

Preview your app on your own smartphone for free