Smart Banners: de la web móvil a la aplicación

De un vistazo: La mayoría del tráfico de los sitios web en todo el mundo se origina en dispositivos móviles. Usa Smart Banners en tu sitio web móvil para convertir a los visitantes web en usuarios de la aplicación. 

smart-banners-webinar_es.jpg

wc2a.jpg

Smart Banners

Banners inteligentes:

  • Muéstralos en el sitio web móvil de tu marca para aumentar las tasas de conversión de los usuarios con un alto nivel de intención.
  • Mide la calidad de las instalaciones de aplicaciones procedentes de los visitantes del sitio web móvil.
  • Permite una atribución móvil precisa de la campaña web a la aplicación para TODAS las fuentes de medios, incluidas las SRN.
  • Los Smart Banners pueden atribuir mediante la atribución de clics y el recuento de impresiones:

    • Clicks: A user clicks the Smart Banners and proceeds to install.
    • Impressions: When the banner loads (user sees the banner), it sends an impression count event to AppsFlyer. 

El flujo es el siguiente:

  1. Un usuario hace clic en un anuncio y se lo dirige al sitio web móvil del anunciante.
  2. Aparece un Smart Banner en el sitio web móvil del anunciante.
  3. El usuario hace clic en el Smart Banner y:
    • Si la aplicación no está instalada, se dirige al usuario a la tienda de aplicaciones para que instale la aplicación.
    • Si la aplicación está instalada y se han configurado enlaces universales, enlaces de aplicaciones y/o enlaces URI, la aplicación se inicia directamente.
  4. El usuario llega al contenido in-app, en el contexto de la promoción.
  5. El usuario se atribuye a la fuente de medios que mostró el anuncio original.

 Nota

¿No estás seguro de si Smart Banners es la solución adecuada para ti?
Compara Smart Banners con otras soluciones de la web a la aplicación de AppsFlyer.

Scope of work

Who's involved

Marketer y desarrollador del sitio web

  • El desarrollador del sitio web solo tiene que introducir un fragmento de código en el HTML del sitio web.
  • Para el resto de acciones de configuración, solo se requiere al marketer.

Prerequisites

  • An AppsFlyer account with at least one app
  • Plantilla de OneLink que contiene las aplicaciones que se van a anunciar mediante Smart Banners
    Smart Banners requiere esto para dirigir a los visitantes de tu web móvil a las páginas correctas de la tienda de aplicaciones en función de los dispositivos que utilicen. 

Time required

Approximately 20 minutes.

Outcome

  • Website visitors clicking the CTA button will be sent to the correct app store or web page based on their device.
  • Mobile app users clicking the CTA button can be deep-linked into the app.
  • Se atribuirá a los usuarios por el clic o la instalación a tus fuentes de medios propios.

 Ejemplo

Mark trabaja como marketer para el exitoso servicio de entrega de comida llamado "Feed Me".
Mark quiere convertir a los visitantes del sitio web móvil de Feed Me en usuarios de la aplicación. 

To do this Mark utilizes Smart Banners using his own visuals and texts.  

Smart Banners are powered by OneLink. When mobile website visitors click the CTA button, it automatically directs them to the appropriate app store or landing page, where it's easy for them to install the app. When existing mobile users click the CTA button, it launches the app. 

AppsFlyer then attributes the click/install to Mark's defined media source and campaign

 ¡Importante!

Usa Smart Banner de AppsFlyer o el smart banner de la aplicación de Safari de iOS, pero no ambos. El uso de ambos puede causar problemas de visualización en tu sitio web móvil y generar discrepancias en la atribución.

Procedimientos

Completa los siguientes procedimientos para configurar un smart banner que:

  • Dirija a los usuarios desde tu sitio móvil, a través de un Smart Banner, a la tienda de aplicaciones o a la página de aplicaciones en función de su dispositivo.
  • Atribuya el clic o la instalación a tu propia fuente de medios mediante OneLink.

1. Configuración del sitio web

Para preparar tu sitio móvil para mostrar Smart Banners

  1. En el panel de control de AppsFlyer, ve a Engagement y enlaces profundos > Smart Banners
  2. Haz clic en Crear el lugar de trabajo del sitio web.

    SB_website_workplace_en-us.png

  3. Introduce un nombre para el lugar de trabajo del sitio web.
  4. Haz clic en Crear.
    Se abre el lugar de trabajo del sitio web. 
  5. Copia el fragmento de código del banner. 
  6. Envía el fragmento de código a tu desarrollador de front-end para que lo implemente en tu sitio web.
    Esta tarea rápida la realiza solo una vez por sitio web el desarrollador de front-end, que ya no interviene durante los siguientes pasos. 
  7. [opcional] Copia la Clave web. (Esta clave ya existe como parte del fragmento de código).
  8. Haz clic en Continuar.

2. Configuración del grupo de banners

Banner Groups contain one or more banners. Here you can:

  • Select the OneLink template used by the Banner Group, which contains the mobile apps to redirect your website visitors to.
  • Set a specific deep-linking scheme
  • Define your targeting rules, scheduling, behavior, and attribution details used by all banners of the Banner Group.
  • Set which pages activate the Banner Group's banners when visited.

To set up a new Banner Group:

  1. En el panel de control de AppsFlyer, ve a Engagement y enlaces profundos > Smart Banners
  2. En el lado izquierdo, haz clic en Agregar grupo de banners.
  3. Ingresa un nombre único para el nombre del grupo de banners.
    El nombre debe reflejar un tema general común entre los banners que se definan para el grupo de banners (por ejemplo, la aplicación anunciada).
  4. Select the OneLink template for the Banner Group.
  5. [opcional] Configura el esquema URI para el grupo de banners como alternativa para los usuarios de enlaces universales y enlaces de aplicaciones de Android. Esto rara vez es necesario, ya que de forma predeterminada, el valor se toma de la plantilla de OneLink. Configura esto para el grupo de banners solo si necesitas un valor diferente al de la plantilla.
  6. Configura las Fuentes atribuidas para que se atribuyan con las instalaciones nuevas procedentes de este grupo de banners. Usa la siguiente tabla para elegir la mejor opción para el enlace personalizado.

    Opción Cuándo seleccionar Comentarios
    Usar parámetros UTM  Selecciona cuando la mayoría de los visitantes no orgánicos llegan al sitio web móvil desde fuentes con parámetros UTM. 
    • Nombre de la fuente de medios (pid) = UTM_Source 
    • Campaña (c) = UTM_campaign
    • Si UTM_source o UTM_campaign no están, los nombres estáticos se usan como alternativa.
    Usar parámetros del enlace entrante de atribución Selecciona cuando la mayoría de los visitantes no orgánicos llegan al sitio web móvil desde las redes de publicidad por clics que utilizan los enlaces de atribución de AppsFlyer. 
    • Todos los parámetros disponibles del enlace de atribución entrante de AppsFlyer se agregan al enlace del Smart Banner. 
    • Si existe un parámetro tanto en el enlace entrante de atribución de AppsFlyer como en el Smart Banner, el parámetro entrante tiene prioridad en el enlace personalizado final.
    Agregar otro parámetro de atribución  Si lo deseas, agrega datos de atribución adicionales relacionados con el sitio web. Esto permite un análisis granular de cada instalación.  Por ejemplo, para los sitios de comercio electrónico, crea enlaces personalizados idénticos para cada tipo de categoría de producto, que se diferencien por los valores de af_adset (por ejemplo: "af_adset=fruta"). 
    Usar parámetros de atribución predeterminados
    • Selecciona cuando la mayoría de los visitantes del sitio web móvil son orgánicos.
    • Selecciona cuando los visitantes no orgánicos no accedan al sitio web desde redes de publicidad por clics o desde fuentes con parámetros UTM.  
    Importante: La práctica recomendada es seleccionar parámetros de enlaces de atribución entrantes o UTM, ya que los parámetros de atribución predeterminados de Smart Banner se utilizan de todos modos en el enlace personalizado como alternativa si los nombres de la fuente de medios, campaña o canal no están disponibles.
  7. [Recomendado] ConfiguE el parámetro de atribución por defecto Nombre del canal para atribuir todas las instalaciones procedentes del Smart Banner al canal especificado. Esto te permite agregar información de varias fuentes de medios bajo el mismo canal en el reporte de cohortes, el panel de control general, el reporte de retención y más. 
  8. [Opcional] Configura el comportamiento de desestimación, es decir, el tiempo mínimo permitido entre la desestimación del banner por parte del usuario, hasta que el banner se muestre otra vez al usuario. Selecciona una de las siguientes opciones:
    • By time: 1 hour, 1 day, or 1 week.
    • Próxima sesión: es decir, la sesión que tiene lugar en una pestaña o ventana diferente, después de que el usuario cierre el banner.
    • Never: the banner is not shown again. 
      Note: If the user clears the browser cache or views the site in private browsing mode the Dismissal Behaviour setting is lost.
  9. [opcional] Configura la frecuencia máxima
    La frecuencia máxima determina cuántas veces se muestra el banner a un único usuario. Por ejemplo, si la frecuencia máxima está establecida en tres y un usuario visita el sitio cuatro veces, el usuario ve el banner en las primeras 3 visitas, pero no en la cuarta ni en las posteriores. La frecuencia máxima se puede deshabilitar. Selecciona un valor de frecuencia máxima o desactiva la frecuencia máxima.  
  10. [Opcional] Programa la activación del grupo de banners: empezar inmediatamente (por defecto) o configurar una campaña de tiempo limitado.
  11. [Opcional] Configura las Ubicaciones para las que se activa el grupo de banners.
    1. Selecciona En todo el mundo para mostrar este grupo de banners a todos los usuarios. Si es necesario, excluye a los visitantes procedentes de diferentes regiones, países o estados. 
    2. Selecciona la opción Elegir una ubicación específica para mostrar este grupo de banners a los usuarios de una o más ubicaciones específicas.
  12. [Opcional] Configura Mostrar en páginas, es decir, en qué páginas se puede mostrar el grupo de banners a los visitantes:
    • [Por defecto] Mostrar en todas las páginas del sitio web.
      Nota: Te recomendamos que definas al menos un grupo de banners para todas las páginas como alternativa.
    • Show on specific pages: Specify the conditions for what the page or URL should or should not contain in order to display banners.  
      • You can choose either:
        • Specific page: Specify the host and/or path of the page on which to display the banner. Any queries entered will be disregarded. Example: http://www.example.com/path?query
        • URL: Specify the path and/or query, or the keyword in the path/query of the pages on which to display the banner. Example: http://www.example.com/path?query
      • Se pueden agregar hasta 5 condiciones usando y/o.
      • Si hay un conflicto entre las condiciones, el banner no se mostrará. 
  13. Haz clic en Crear grupo de banners.
  14. [Opcional] Para volver a editar el grupo de banners, pasa el cursos por encima de Targeting y comportamiento y haz clic en Editar.

 Ejemplo

Mark es el marketer de un servicio de entrega de comida llamado "Feed Me". Decide crear una campaña para la venta de ciruelas de la aplicación. Mark decide usar un envío masivo de SMS, así como redes de publicidad y Google para la campaña.

En la preparación de la campaña de SMS, Mark:

  • Agrega parámetros de atribución únicos para usarlos en el enlace de la campaña para dirigir a los usuarios a la página de venta de ciruelas en el sitio móvil de Feed Me. El enlace incluye el parámetro del ID de anunciante (PID), con la URL de la página de venta de ciruelas: http://feedme.com/plums_link?pid=sms&c=plums.
  • Crea un Smart Banner (grupo de banners y banner) con fuentes atribuidas configuradas en Usar parámetros de enlaces de atribución entrantesque se activan para los usuarios que visitan las páginas en la web móvil que contienen "plums_link".

En preparación para la campaña usando una red de publicidad, Mark:

  • Proporciona a la red de publicidad un enlace de atribución único para usarlo en la campaña para dirigir a los usuarios a la página de venta de ciruelas en el sitio móvil Feed Me. El enlace incluye el parámetro URL de redirección (af_r), con la URL a la página de venta de ciruelas: http://feedme.com/plums_link. No se requieren parámetros adicionales
  • Usa el Smart Banner ya creado para la campaña de SMS.

En la preparación de la campaña mediante Google Ads, Mark:

  • Crea un duplicado de la página de venta de ciruelas en el sitio móvil de Feed Me: https://www.feedme.com/plums_utm?utm_source=google&utm_campaign=plums.
  • Crea un duplicado del Smart Banner (grupo de banners y banner) con Fuentes atribuidas configuradas en Usar parámetros UTMque se activa para los usuarios que visitan páginas en la web móvil que contienen "plums_utm".

Las campañas empiezan a funcionar.

Los usuarios:

  • Ven el anuncio de la venta de ciruelas y hacen clic para acceder al sitio móvil de Feed Me.
  • Los clics de Google Ads llegan a la página de aterrizaje de UTM, mientras que todos los demás clics llegan a la página de aterrizaje del enlace entrante. El Smart Banner correspondiente se activa por página.
  • Ven el Smart Banner en el sitio móvil y hacen clic en él. 
  • Llegan a la aplicación Feed Me, la descargan y la instalan. 
  • Al iniciar la aplicación, son dirigidos a la venta de ciruelas.
  • Se atribuyen a las fuentes de medios correctas que los llevaron al sitio móvil de Feed Me.

3. Configuración del banner

Para crear un banner en un grupo de banners:

  1. Haz clic en Crear banner para acceder a la página Editar banners.
  2. Configura el Nombre del banner.
  3. Crea una creatividad de diseño:
    1. Haz clic en Diseñar creatividad para configurar la creatividad del banner.
      Se abre una ventana para elegir una plantilla de banner.

    2. Pasa el cursor por encima de una plantilla creativa y haz clic en Crear para acceder a la página de configuración de Crear creatividad.
    3. Customize all the elements in the Smart Banner creative. To do so, select elements by name or click on them on the preview image. 
      1. Título
      2. Párrafo
      3. Estrellas de calificación
      4. Botón Cerrar
      5. Llamada a la acción
      6. Logo de la aplicación
      7. Fondo
      8. Para las imágenes, usa uno de los siguientes tipos de archivo: jpeg, jpg, png. 
        Nota: El formato webp no es compatible. 
        Las recomendaciones para las imágenes son:
        Tipo de plantilla Tamaño máximo del archivo de imagen DPI Proporción de imagen
        Estándar 300 KB 72 9:4 (horizontal)

        Mejorado

        9:4 (horizontal)
        Promocional 1:1
        Intersticial 9:16 (vertical)
    4. Click Review to review the banner creative and test its appearance on different devices.
      Note: Banners may appear slightly different in active campaigns compared to preview images.
    5. If changes are needed, click Back to editor..
    6. Haz clic en Hecho para volver a la página de configuración del banner.
  4. Tras finalizar y guardar la creatividad nueva, el estado del banner pasa a activo. Usa el conmutador de Estado para cambiar entre los estados Activo y Pausado
  5. [opcional] Haz clic en Agregar un parámetro para agregar parámetros de atribución personalizados, p. ej., el Nombre del anuncio.
    • Para convertir el enlace de atribución de una URL de tipo de adquisición de usuarios en una URL de retargeting, agrega el parámetro personalizado is_retargeting=true.
  6. Haz clic en Guardar todo para guardar tu trabajo o en Guardar todo y cerrar para guardar tu trabajo y cerrar la página de configuración del banner.

4. Pruebas

Una vez que la creatividad está lista, es el momento de probarla antes de ponerla en marcha y activarla para tus usuarios.

To test a Smart Banner's creative: 

Prerequisite: Make sure that the Smart Banner code snippet is integrated into your website.  

  1. En la página Probar creatividad, ingresa el enlace a tu página web en la que está integrado el SDK de Smart Banner (véase la siguiente pestaña).
  2. Haz clic en Generar.
  3. Copia el enlace generado y envíalo a tu dispositivo de prueba, o escanea el código QR con el dispositivo de prueba. El enlace o QR debe redirigirte a la página web y mostrar un banner con la creatividad.
  4. Haz clic en Editar creatividad para volver a la configuración de la creatividad, o haz clic en Hecho para guardar la creatividad.

Limitations

Limitation Remarks
Tablets
  • Smart Banners are designed for mobile devices and their resolutions may not be optimized for tablets with large screens.
  • Browsers on tablets may not be recognized as mobile devices.
¿Fue útil este artículo?