JourneysWeb App

Cómo Configurar Un iOS y Android Smart App Banner

By septiembre 11, 2017 No Comments

Es de sobra conocido desde hace tiempo que los usuarios prefieren las aplicaciones móviles nativas a los sitios web móviles. Sin embargo, el enlazado profundo a aplicaciones y desde ellas no es lo sólido que debiera ser en comparación con la web, así que los sitios web móviles son aún una parte prominente del uso de los teléfonos móviles, especialmente a la hora de descubrir nuevas aplicaciones.

Por ejemplo, imagine que un usuario comparte un artículo de su aplicación en Facebook, y una cantidad de nuevos visitantes hacen clic en ese artículo. Si los lleva a la página del App Store correspondiente, en lugar de mostrarles el artículo, mucha gente se indignará y simplemente cerrará la tienda para volver a Facebook. Es en esta situación en la que un sitio móvil con un banner de aplicación inteligente puede resultar útil.
Qué es un banner de aplicación inteligente?

Qué es un banner de aplicación inteligente?

Un banner móvilUn banner móvil inteligente utiliza una fracción de la pantalla de un sitio web móvil para informar y animar a los usuarios a abrir la aplicación nativa, o a instalarla si no la tienen. Es un enlace inteligente que incluye toda la lógica de enrutamiento para abrir automáticamente la aplicación si está instalada o dirigirse a una página del App Store en caso contrario.

Smart App Banner Example

Como puede ver, el contenido sigue estando disponible en esta página de un sitio móvil sin la aplicación, pero el banner de la parte superior de la pantalla presenta una opción para descargar o abrir la aplicación si así lo decide el usuario. Para los usuarios nuevos, mostrar un sitio móvil conbanner supone un modelo de integración claro y discreto, con el que pueden interactuar con su sitio web móvil y convertirse en usuarios de la aplicación cuando se sientan preparados.

Para qué sirve el banner de aplicación inteligente para iOS de Apple?

En iOS 6, Apple lanzó un banner de aplicación inteligente completamente integrado en Safari. Su aspecto ha evolucionado desde entonces, hasta lo que se puede ver abajo, pero su funcionamiento sigue siendo el mismo.

Smart app banner on iOS

Pueden ocurrir dos cosas al hacer clic en este banner. Si la aplicación está instalada, el banner la abrirá llamando al esquema URI y acompañada de parámetros de enlazado profundo. Si la aplicación no está instalada, el banner llevará al usuario a su página del App Store.

El banner de Apple tiene algunas características exclusivas que los banners inteligentes de otros no consiguen replicar con facilidad:

  1. La llamada a la acción Ver cambia automáticamente a Abrir cuando iOS detecta que la aplicación está instalada.
  2. Mientras se descarga la aplicación, el banner inteligente muestra una barra de progreso.

También tiene algunas limitaciones importantes:

  1. Solo funciona en Safari de iOS.
  2. El diseño, color y contenidos no se pueden cambiar
  3. No hace seguimiento de los clics ni las descargas
  4. El enlazado profundo (llevar a los usuarios a contenido específico) solo funciona si la aplicación ya está instalada.

Existe un banner de aplicación inteligente para Android?

Debido a la fragmentación del ecosistema Android y a la propia elección del navegador, Google nunca ha publicado un banner inteligente para Android. Todos los desarrolladores de Android han tenido que desarrollar su propia solución o adaptar una existente. Es una dificultad considerable si un desarrollador móvil ha desarrollado tanto para Android como para iOS y desea un comportamiento y una medición de las atribuciones que sean coherentes.
La presentación de Apple de su banner inteligente para iOS sembró la semilla para el desarrollo de algunas opciones distintas de terceros con compatiblidad para Android. Desafortunadamente, dichas alternativas se han estancado en los últimos años, lo que deja a los desarrolladores de nuevo en mala situación. Estos son un par de los ejemplos más conocidos:

  1. El plugin de banner de aplicación inteligente para jQqueryhttps://github.com/jasny/jquery.smartbanner (dejó de mantenerse)
  2. El banner de aplicación inteligente sin requisitos jQueryhttps://github.com/kudago/smart-app-banner

El banner de aplicación inteligente multiplataforma Branch

Decenas de miles de aplicaciones se valen de Branch a diario para enlazarse, utilizando tanto enlaces generados dinámicamente desde el SDK de iOS/Android como enlaces de marketing creados de forma manual en el panel de Branch. Estos enlaces funcionan en todos los sistemas operativos y navegadores y envían a los usuarios a su aplicación o al App Store, dependiendo de la situación.

Aprovechando esta experiencia, hemos creado un banner de aplicación inteligente totalmente personalizable, multiplataforma, trazable y con enlazado profundo. Funciona en todos los navegadores, incluidos Safari, Chrome, Firefox y los navegadores stock de Android

Ejemplo de banner Branch en iOS:

smartbanner-blog3-cut_1.png

Ejemplo de banner Branch en escritorio:

desktop_banner1.png

Utilizando el banner de aplicación inteligente de Branch, obtendrá todas las funcionalidades del banner de aplicación inteligente para iOS de Apple, además de estas características increíbles:

  1. Enrutamiento inteligente a la aplicación o al App Store correspondiente.

Cuando se toque en el banner y la aplicación esté instalada, se abrirá la aplicación. Si la aplicación no está instalada, llevará al usuario a la página del App Store correspondiente.

  1. Soporte multiplataforma

Funciona en todos los navegadores móviles y sistemas operativos móviles. Crear un banner inteligente para iOS o Android es fácil y se hace una vez, y se puede usar en cualquier lugar.

  1. Detección de aplicación instalada

Si tiene el SDK de Branch en su aplicación y e usuario la ha abierto al menos una vez, podemos actualizar automáticamente la llamada a la acción de Instalar a Abrir, como Apple, o permitirle que personalice los respectivos mensajes de llamada a la acción.

  1. Captación de audiencia personalizada

La confección del banner inteligente funciona de un modo parecido a las llamadas a la acción, según los comportamientos específicos de sus usuarios, tanto en la Web móvil como en su aplicación. Por ejemplo, use un banner distinto para los usuarios más activos.

  1. Prueba A/B

Sin cambiar ningún código de su página, puede llevar a cabo experimentos para identificar a la audiencia objetivo del banner inteligente de un modo optimizado y llevar a cabo de forma creativa la conversión de nuevas instalaciones de la aplicación, así como reaperturas de la aplicación.

  1. Seguimiento de descargas

En el panel de Branch, ofrecemos una serie de analíticas completas para hacer el seguimiento de cuánta gente ha visto y ha hecho clic en el banner, y cuántos han instalado o abierto la aplicación. Así puede saber con qué calidad está convirtiendo una página web móvil y obtener una ayuda para optimizar sus esfuerzos de crecimiento.

  1. Enlazado profundo

Puede especificar un diccionario de datos que quiere pasar a la aplicación, de forma que pueda llevar al usuario a un producto específico o a un fragmento del contenido de la aplicación, lo que también se conoce como enlazado profundo. La precisión líder de la industria deBranch en cuanto a las concordancias se traduce en que incluso recibe los parámetros de enlazado profundo al hacerse la primera instalación desde el App Store, para personalizar el flujo de integración de todos los usuarios, ya sean nuevos o reincorporados.

  1. Diseño, color, contenido e iconos creativos y un banner de aplicación inteligente completamente personalizable

Para dar un aspecto nativo a su sitio web móvil o simplemente para personalizar la experiencia, Branch Journeys le permite personalizar por completo todos los aspectos visuales de su banner mediante el uso de un editor gráfico, o editando directamente el CSS. Esto incluye el título de la aplicación, la descripción, el botón de llamada a la acción, las estrellas para puntuar y el número de reseñas. Todo se puede personalizar para ajustarse al diseño de su sitio Web.

Guía para configurar el banner de aplicación inteligente universal con Journeys

Branch también ofrece Journeys, una solución premium que le permite crear e implementar, sin necesidad de código, activos de web a aplicación como los banners inteligentes. Con Journeys, las marcas pueden:

  1. Crear un número ilimitado de audiencias potenciales, sobre la base de la actividad web y de la aplicación, el sitio de referencia, el sistema operativo y más.
  2. Elegir entre un número de plantillas configuradas previamente y tener un control total sobre el diseño y el aspecto de sus activos.
  3. Ver el rendimiento en tiempo real, segmentado por Journey. Atribuir acciones de embudo de vuelta a Journey. Implantar mejoras sin cambiar el código.

Guía para configurar el banner de aplicación inteligente universal.

Es muy fácil iniciarse en el banner de aplicación inteligente de Branch Journey. A continuación tiene una guía paso a paso.

 

Paso 1: Configure el enrutamiento de su enlace

Primero, diríjase a https://start.branch.io y siga las instrucciones. Definirá los distintos extremos finales para que Branch sepa dónde redirigir al usuario en cada escenario.

Paso 2: Añada el SDK web a su sitio

Después, recupere su clave de Branch del panel en https://dashboard.branch.io/#/settings. Pegue el recorte del código abajo, en las etiquetas de Javascript de su sitio. Añada la clave que ha recuperado de la página de configuración en la sección SU CLAVE DE BRANCH.

<script type="text/javascript">
  (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 banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode".split(" "), 0);
 	branch.init('YOUR-BRANCH-KEY');
</script>

 

Paso 3: Establezca su banner de aplicación inteligente de Journeys

Diríjase a la sección de Journeys del panel de Branch y siga al asistente para configurar su banner de aplicación inteligente. También puede encontrar una amplia documentación de Journeysen nuestro portal de desarrolladores.

Paso 4: Configure su aplicación iOS o Android para hacer enlazado profundo

Por último, puede establecer su aplicación nativa para enlazado profundo en diferido e instalar de forma muy fácil funciones de seguimiento siguiendo las instrucciones de integración que se encuentran en este sitio para iOS y Android.
¡Y ya está!