Smart App Banner para promocionar tu app
(hace más de 4 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.