Cómo configurar un banner de app inteligente para iOS y Android

Esta publicación del blog se difundió originalmente en 2015. Se ha actualizado para reflejar los cambios en el entorno actual de iOS y la falta de cambios en el entorno Android.

Es bien sabido desde hace muchos años que los usuarios prefieren las apps móviles nativas a los sitios web móviles. Sin embargo, la vinculación profunda hacia y desde las apps aún no es tan sólida como debería en comparación con la web. Por ello, los sitios web móviles siguen siendo una parte importante del uso de teléfonos móviles, especialmente para descubrir nuevas apps.

Por ejemplo, imagina que un usuario existente comparte un artículo de tu app móvil en Facebook, y una serie de nuevos visitantes pinchan en ese artículo. Si tus enlaces llevan a esos visitantes a la página de la App Store para tu app, en lugar de mostrarles el artículo, como resultado habrá muchos usuarios descontentos que perderán el interés y regresarán a Facebook. Aquí es donde puede entrar en juego un sitio móvil con un banner de app inteligente.

En esta publicación, describiremos las distintas opciones de banners de app inteligentes disponibles en iOS y Android, incluido cómo crear banners inteligentes totalmente personalizados utilizando Branch Journeys. 

¿Qué es un banner de app inteligente?

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

Como puedes ver, el contenido sigue estando disponible en esta página del sitio móvil en un dispositivo que no tiene la app instalada. Sin embargo, el banner en la parte superior de la pantalla presenta una opción para descargar o abrir la app si el usuario decide hacerlo. Para los nuevos usuarios, mostrar un sitio móvil con un banner ofrece un modelo de onboarding claro y discreto, donde pueden interactuar con tu sitio web móvil y convertirse en usuarios totales de la app cuando estén preparados.

¿Qué hace el banner de app inteligente para iOS de Apple?

En iOS 6, Apple lanzó un banner de app inteligente para Safari. Su apariencia ha evolucionado desde entonces, pero sigue funcionando de la misma manera.

Este banner tiene dos resultados diferentes al pinchar sobre él. Si la app está instalada, el banner la abrirá llamando al esquema URI de la app según los parámetros de la vinculación profunda que la acompañan. Si la app no está instalada, el banner llevará al usuario a su página de la App Store.

El banner de Apple tiene algunas características únicas que otros banners inteligentes de terceros no pueden replicar fácilmente:

• La llamada a la acción «Ver» siempre cambiará a «Abrir» cuando iOS detecte que la app está instalada.
• Mientras se descarga la app, el banner inteligente mostrará una barra de progreso.

También tiene algunas limitaciones importantes:

• Solo funciona en iOS Safari.
• El diseño, el color y el contenido no se pueden cambiar.
• No hay atribución por clics o descargas.
• La vinculación profunda (que lleva a los usuarios a un contenido específico) solo funciona si la app ya está instalada. En otras palabras, no se admite la vinculación profunda diferida.

Implementación de banners de app inteligentes en iOS

Si deseas utilizar el banner inteligente básico de Safari, lo único que debes hacer es incluir la siguiente metaetiqueta en el encabezado HTML de tu página web:

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

El ID de la app es el identificador único de tu app. Si no sabes cuál es el tuyo, puedes encontrarlo buscando en la App Store. El ID de tu app estará incluido en la ruta de la URL de la App Store de tu app:

El argumento de la app te permite asociar tu app y el destino previsto con la página web correspondiente de tu sitio. Esta asociación comparte el destino, junto con otra información (por ejemplo, si el usuario está conectado), a la app.

Para obtener más información sobre el banner predeterminado de Safari, consulta la página de documentación de Apple: Promoción de apps con banners de app inteligentes.

Nota: si has habilitado Enlaces universales para tu dominio y la app ya está instalada en el dispositivo, Safari mostrará automáticamente una versión más pequeña del banner de la app. Este «banner de Enlaces universales» no se puede inhabilitar.

¿Existe un banner de app inteligente para Android?

Debido a la fragmentación del entorno Android y a la elección del navegador, Google nunca ha lanzado un banner inteligente para Android. Chrome ofrece algo llamado Solicitud de instalación de app nativa, pero es difícil de implementar, proporciona muy poco control a los desarrolladores y no ha sido ampliamente adoptado. 

La introducción de Apple del banner inteligente para iOS generó inicialmente el desarrollo de algunas opciones de código abierto diferentes compatibles con Android. Desafortunadamente, el progreso de estas alternativas se ha estancado en los últimos años, lo que, una vez más, limita las opciones para los desarrolladores. 

Se trata de una gran molestia si eres es un desarrollador móvil que ha diseñado tanto para Android como para iOS, y buscas medir comportamiento y atribución de manera consistente. 

Banners inteligentes personalizados: Branch Journeys

Afortunadamente, existe una solución: decenas de miles de apps utilizan banners de app inteligentes para iOS y Android con la herramienta Journeys de Branch. Estos funcionan en todos los sistemas operativos y navegadores para llevar a los usuarios a tu app o a la App Store, dependiendo de la situación.

Atrás quedaron los días de preocuparse por cómo hacer un banner de app inteligente para el sitio web móvil de tu app, o encontrar un creador externo de banners inteligentes. Con los banners inteligentes de Branch Journeys, obtienes toda la funcionalidad del banner de app inteligente para iOS de Apple, además de todo lo siguiente:

• Enrutamiento inteligente dinámico. Cuando se toque el banner y la app esté instalada, se abrirá la app. Si la app no está instalada, llevará al usuario a la página correspondiente de la App Store.
• Soporte multiplataforma. Funciona en todos los navegadores y sistemas operativos móviles. Crea fácilmente una única vez un banner inteligente para iOS o para Android y utilízalo en todas partes.
• Detección de apps instaladas.Si tienes el SDK de Branch en tu app y el usuario lo ha abierto al menos una vez, podemos actualizar automáticamente la llamada a la acción de «Instalar» a «Abrir», al igual que Apple – o permitirte personalizar la llamada respectiva a los mensajes de acción.
• Segmentación personalizada de la audiencia. Adapta la apariencia del banner inteligente y crea CTA personalizadas basadas en comportamientos específicos de tus usuarios tanto en la web móvil como en tu app. Por ejemplo, utiliza un banner diferente para los usuarios más activos.
• Prueba A/B. Sin cambiar ningún código en tu página, realiza pruebas para optimizar la segmentación de la audiencia.
• Localización. Entrega texto y diseños localizados para ciudades, estados y países específicos.
• Descarga de seguimiento. En el panel de control de Branch, proporcionamos analítica detallada para saber cuántas personas vieron y pincharon en el banner, y cuántas instalaron o abrieron la app. Esto puede indicarte el grado de conversión de una página web móvil y ayudarte a optimizar tus esfuerzos de crecimiento.
• Vinculación profunda. Puedes especificar un diccionario de datos que desees pasar a la app, de modo que puedas llevar al usuario a un producto específico, o a un contenido dentro de la app – también conocido como vinculación profunda. La exactitud de coincidencia líder en la industria de Branch significa que incluso recibes esos parámetros de vinculación profunda en la primera instalación desde una App Store, con el fin de personalizar el flujo de onboarding para todos los usuarios – recién adquiridos o recaptados.

Banner de app inteligente personalizable – diseño, color, contenido e iconos

Para respaldar una apariencia y sensación de app nativa con tu sitio web móvil, o simplemente para personalizar la experiencia, Branch Journeys te permite personalizar completamente todos los aspectos visuales de tu banner utilizando un editor gráfico o editando directamente el CSS. Esto incluye el título de la app, la descripción, el botón de llamada a la acción, las estrellas de calificación y el número de reseñas. Todo se puede adaptar al diseño de tu sitio.

Guía para configurar los banners de app inteligentes Journeys

Es muy fácil empezar con Branch Journeys. Puedes seguir la guía paso a paso a continuación o solicitar una demostración de Branch para reunirte con un miembro de nuestro equipo.

Paso 1: crea tu cuenta Branch y configura el enrutamiento de tu enlace

En primer lugar, dirígete a nuestro panel de control y sigue las instrucciones para crear tu cuenta gratuita. Deberás determinar los diferentes puntos finales para que Branch sepa a dónde redirigir al usuario en cada situación.

Paso 2: añade el SDK web a tu sitio

A continuación, recupera tu clave de Branch del panel de control en Ajustes de cuenta > Perfil. Pega el fragmento de código a continuación en las etiquetas de Javascript de tu sitio. Agrega la clave que recuperaste de la página de ajustes en la sección ‘’key_live_YOUR_KEY_GOES_HERE».

<script>

  // load Branch

  (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 autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent logEvent disableTracking».split(» «), 0);

  // init Branch

  branch.init(‘key_live_YOUR_KEY_GOES_HERE’);

</script>

Paso 3: configura tu banner de app inteligente Journeys

Dirígete a la sección Journeys del panel de control de Branch y sigue el asistente para configurar tu banner de app inteligente. Si tienes menos de 10.000 usuarios activos mensuales (MAU), puedes activar Journeys de forma gratuita. También puedes encontrar la documentación completa de Journeys en nuestro portal para desarrolladores.

Paso 4: configura tu app iOS o Android para la vinculación profunda

Por último, puedes configurar muy fácilmente tu app nativa para la vinculación profunda en diferido y el seguimiento de la instalación con nuestras instrucciones de integración para iOS o Android. 

¡Todo listo!

Explora nuestra guía para obtener más ideas sobre cómo optimizar Journeys para usuarios de apps, o lee sobre cómo realizar un seguimiento de las descargas de apps desde los banners inteligentes.