Smart App Banner para promocionar tu app

10-06-2014 14:34 (hace casi 5 años) por adianteapps

Los Smart App Banners son los típicos mensajes que aparecen en la parte superior del navegador web de tu móvil y que te sugieren que te descargues la app del sitio web. Si tienes una web y una app, puedes usar estos banners para facilitar la descarga de tu app a los visitantes que acceden la web desde el móvil.

Si ya en otro artículo hablamos sobre cómo promocionar una app móvil, en este artículo veremos cómo puedes añadir en tu web un Smart App Banner de tu propia app.

Ejemplo de smart app banner de la página de la app Feliz Navidapp.

Para poder añadir tu Smart Banner sólo necesitas tener acceso al código HTML de tu web y unos conocimientos muy básicos de HTML.

Smart App Banner para iOS

Para que aparezca el banner en tu web al visitarla desde un dispositivo iOS (iPhone, iPod o iPad) sólo tienes que añadir este código HTML dentro del elemento head en las páginas en las que quieras sugerir la descarga:

<meta name="apple-itunes-app" content="app-id=myAppStoreID">

Además, tienes que sustituir myAppStoreId por el id de tu app. Este identificador lo puedes sacar de la dirección de descarga del App Store. Por ejemplo, la dirección de descarga de Feliz Navidapp es

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

Así, el id de esta app es: 771141588. Si lo sustituimos en el código quedaría:

<html>
  <head>
    ...
      <meta name="apple-itunes-app" content="app-id=771141588">
    ...
  <head>
...
<html>

Puedes consultar la documentación completa de Apple Sobre Smart Banners.

Smart App Banner para Android

En el caso de Android, no existe soporte nativo de los Smart App Banners, pero puedes usar un plugin de jQuery que te permite emular esta funcionalidad.

Primero, tienes que descargar el plugin y subir dos ficheros jquery.smartbanner.css y jquery.smartbanner.js a tu servidor.

Después, tienes que añadir dos fragmentos de código. Uno dentro de la etiqueta head:

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

El path a jquery.smartbanner.css tienes que modificarlo y establecer la ruta en la que lo hayas almacenado dentro de tu servidor. Además, com.package.android tiene que ser sustituido por el nombre del paquete de tu app. El nombre del paquete lo puedes obtener de la dirección en Google Play de tu app:

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

El segundo fragmento lo tienes que pegar en la etiqueta 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 -->

En este fragmento de código tienes que modificar el path al fichero jquery.smartbanner.js

En el aso de Feliz Navidapp podría quedar algo así:

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

Tu Smart URL

Si tienes una app hecha con adiante apps tienes una dirección inteligente que permite a tus usuarios descargarse la app de forma sencilla. En lugar de tener que compartir varias direcciones, una para iPhone y otra para android, con esta dirección puedes compartir un único enlace que abrirá la tienda de aplicaciones que corresponda (Google Play o App Store) o, en caso de que se acceda desde un ordenador, se abrirá una página informativa con los links de descarga.

Siguiendo con el ejemplo de Feliz Navidapp. La dirección inteligente de esta app es http://www.adianteapps.com/FelizNavidapp.

Promocionar una app

En este artículo hemos visto cómo con los Smart App Banner podemos redireccionar el tráfico de usuarios móviles para conseguir descargas. Sin embargo, puedes hacer muchas más cosas para promocionar tu app. Te lo contamos en este otro artículo.

la forma más sencilla de crear tu propia app móvil