Smart Banners: de la web móvil a la aplicación (para marketers)

Para preparar tu sitio móvil para mostrar Smart Banners por primera vez

1. En el panel de control de AppsFlyer, ve a Experiencias y enlaces profundos > De la web a la aplicación > Smart Banners > Ir a Smart Banners.
2. Haz clic en Comenzar. El asistente de configuración te guiará a través de los pasos requeridos (a continuación). Para configurar más espacios de trabajo en el sitio web, consulta más abajo.
3. Introduce un nombre para el lugar de trabajo del sitio web.
4. Haz clic en Crear. Se abre el espacio de trabajo del sitio web. 
5. Copia el fragmento de código del banner. 
6. Implementa el fragmento de código en tu sitio web. Esta tarea se realiza una sola vez por sitio web.
   • Para agregar el código a tu sitio web a través de Google Tag Manager, Adobe Tag Manager, Shopify, Wix, Squarespace o WordPress, consulta Implementación de código de sitio web de Banners inteligentes para marketers.
   • Para agregar el código a través de otras plataformas o para realizar cambios en el código según las necesidades (incluyendo agregar parámetros, enlaces profundos, ocultar el banner o integrar la PBA con Smart Banners), consulta Implementación de código de sitio web de Smart Banners para desarrolladores.
7. [opcional] Copia la clave web. (Esta clave ya existe como parte del fragmento de código).
8. Haz clic en Continue (Continuar).

Para crear lugares de trabajo del sitio web después de la primera vez

1. En el panel de control de AppsFlyer, ve a Experiencias y enlaces profundos > De la web a la aplicación > Smart Banners > Studio.
2. Haz clic en el menú de opciones 
3. selecciona Nuevo lugar de trabajo del sitio web
4. Introduce un nombre para el lugar de trabajo del sitio web.
5. Haz clic en Crear. Se abre el espacio de trabajo del sitio web. 
6. Copia el fragmento de código del banner. 
7. Implementa el fragmento de código en tu sitio web. Esta tarea se realiza una sola vez por sitio web.
   • Para agregar el código a tu sitio web a través de Google Tag Manager, Adobe Tag Manager, Shopify, Wix, Squarespace o WordPress, consulta Implementación de código de sitio web de Banners inteligentes para marketers.
   • Para agregar el código a través de otras plataformas o para realizar cambios en el código según las necesidades (incluyendo agregar parámetros, enlaces profundos, ocultar el banner o integrar la PBA con Smart Banners), consulta Implementación de código de sitio web de Smart Banners para desarrolladores.
8. [opcional] Copia la clave web. (Esta clave ya existe como parte del fragmento de código).
9. Haz clic en Continue (Continuar).

Los grupos de banners contienen uno o más banners. Desde aquí, puedes:

• Seleccionar la plantilla de OneLink utilizada por el grupo de banners, que contiene las aplicaciones móviles a las que redirigir a los visitantes de tu sitio web.
• Configurar un esquema específico de deep linking
• Definir tus reglas de targeting, programación, comportamiento y detalles de atribución utilizados por todos los banners del grupo de banners.
• Configurar qué páginas activan los banners del grupo de banners cuando se visitan.

Para configurar o duplicar un grupo de banners:

1. En el panel de control de AppsFlyer, ve  Experiencias y enlaces profundos > De la web a la aplicación > Smart Banners.
2. Para configurar un grupo de banners por primera vez
   1. En el lado izquierdo, haz clic en Agregar grupo de banners.
   2. Sigue los pasos 5 y siguientes.
3. Para configurar grupos de banners adicionales
   1. Ve a la pestaña Estudio.
   2. Haz clic en + Nuevo.
   3. Sigue los pasos 5 y siguientes.
4. Para duplicar un grupo de banners
   1. Haz clic en el icono Duplicar que se encuentra junto al icono de eliminar.
5. Introduce 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).
6. Selecciona la plantilla de OneLink para el grupo de banners.
7. [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.
8. Establece las fuentes atribuidas principales y alternativas para que se atribuyan con las nuevas instalaciones provenientes 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 fuente de medios (pid) = UTM_Source ◦ Campaña (c) = UTM_Campaign ◦ Si faltan UTM_Source o UTM_Campaign, los nombres estáticos se utilizan 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=fruit").
   Usar parámetros de atribución predeterminados	◦ Selecciona cuando:  ▪ La mayoría de los visitantes del sitio web móvil son orgánicos. ▪ Los visitantes no orgánicos no acceden al sitio web desde redes de publicidad de clics o desde fuentes con parámetros UTM. ◦ Puedes personalizar los valores de los parámetros.	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.

9. [Recomendado] Configura 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.
10. [Opcional] Activa el Retargeting si planeas usar el grupo de banners para registrar los re-engagements realizados por los usuarios que hacen clic en el banner. Para obtener más información sobre el Retargeting, consulta la guía de atribución de retargeting.

    Importante

    Para que el retargeting funcione, también necesitas:

    • Habilitar el retargeting para la aplicación 

    Los usuarios existentes que hacen clic en los enlaces de banner sin retargeting (UA) impulsados por OneLink también inician la aplicación y tienen la misma experiencia de usuario. Sin embargo, sus re-engagements se registran como sesiones habituales, lo que significa que es imposible medir el éxito de la campaña de medios.

11. [Opcional] Activa Ignorar a los usuarios activos para el retargeting y selecciona la ventana de inactividad. Esto agrega el parámetro af_inactivity_window=[número de días] a tus enlaces de grupos de Smart Banners, y todos los usuarios activos durante el periodo se ignoran para el retargeting.
12. Establece la ventana de recaptación para determinar el período de tiempo posterior al re-engagement, donde los eventos in-app del usuario se atribuyen a la fuente de medios de retargeting.
    • Puedes configurar el valor en días (1-90), horas (hasta 23) o incluso de por vida.
    • La ventana de recaptación se agrega al enlace en el parámetro af_reengagement_window.
13. [Opcional] Configura el Comportamiento de desestimación, es decir, el tiempo mínimo permitido entre la desestimación de un banner del grupo por parte del usuario, hasta que el mismo banner se muestre otra vez al usuario. Selecciona una de las siguientes opciones:
    • Por tiempo: 1 hora, 1 día o 1 semana.
    • 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.
    • Nunca: el banner no se muestra de nuevo. Nota:
      • Si el usuario borra la caché del navegador o ve el sitio en modo de navegación privada, se perderá la configuración Comportamiento de desestimación.
      • El comportamiento de desestimación se aplica al banner que el usuario desestima; aún se pueden mostrar otros banners del grupo de banners.
14. [Opcional] Configura la limitación de frecuencia. 
    La limitación de frecuencia determina cuántas veces se muestra cada banner en el grupo de banners a un usuario único. Puedes elegir entre Sin límite (donde siempre se muestran los banners) o Limitar la visualización de banners.
    

    Por ejemplo, si un grupo de banners consta de tres banners y el límite de frecuencia se establece en uno, cada banner del grupo aparecerá una vez por usuario. En este escenario, después de tres visitas, el usuario habrá visto los tres banners dentro del grupo. No obstante, a partir de la cuarta visita, el usuario ya no encontrará ningún banner del grupo. Cuando el límite de frecuencia se establece en dos, cada banner del grupo se mostrará dos veces por usuario, requiriendo un total de seis visitas para alcanzar el límite máximo del grupo.

15. [Opcional] Establece en qué sistema operativo mostrar los banners:
    • Todos los sistemas operativos móviles.
    • Solo Android o solo iOS.
16. [Opcional] Programa la activación del grupo de banners: empezar inmediatamente (por defecto) o configurar una campaña de tiempo limitado.
17. [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.
18. [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.
    • Mostrar en páginas específicas: especifica qué debe o no debe contener la página o URL para mostrar los banners.
      • Puedes elegir:
        • Página específica: especifica el host o la ruta de la página en la que se mostrará el banner. Las consultas ingresadas no se tendrán en cuenta. Ejemplo: http://www.example.com/path?query
        • Ruta y consulta de URL: introduce la ruta y/o consulta que determina si se muestra el banner. Ejemplo: path?query. Nota: No introduzcas una URL completa, como http://www.example.com/path?query. Introduce solo la ruta y/o la consulta.
      • Se pueden agregar hasta 15 condiciones usando y/o.
      • Si hay un conflicto entre las condiciones, el banner no se mostrará.
19. Haz clic en Crear grupo de banners.
20. [Opcional] Para volver a editar el grupo de banners, pasa el cursor por encima de Targeting y comportamiento y haz clic en Editar.

Targeting y comportamiento

El panel Targeting y comportamiento te muestra la configuración que estableciste para ese grupo de banners. Para editar dicha configuración, haz clic en el icono de edición.

Para crear un banner en un grupo de banners:

1. Haz clic en Banner nuevo 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. Personaliza todos los elementos en la creatividad del Smart Banner. Para hacerlo, selecciona los elementos por nombre o haz clic en ellos en la imagen de vista previa. Nota: No todos los elementos están disponibles en todas las plantillas.
      • Título
      • Descripción
      • Estrellas de calificación
      • Botón Cerrar
      • Llamada a la acción
      • Logo de la aplicación
      • Fondo
      • Posición del banner
      • Relleno del banner (para ajustar el tamaño del banner)
      • Transparencia del dispositivo
      • 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	Proporción de imagen	Altura de la imagen	Ancho de la imagen
        Mínimo	300 KB	3:1(ancho x alto)	70 px	Ajustado para adaptarse al dispositivo
        Estándar	300 KB	3:1(ancho x alto)	70 px	Ajustado para adaptarse al dispositivo
        Mejorado	300 KB	9:4 (ancho x altura)	110 px	Ajustado para adaptarse al dispositivo
        Opción múltiple	300 KB	9:4 (ancho x altura)	110 px	Ajustado para adaptarse al dispositivo
        Promocional	300 KB	4:5 (ancho x altura)	300 px	Ajustado para adaptarse al dispositivo
        Overlay de opción múltiple	300 KB	9:4 (ancho x altura)	110 px	Ajustado para adaptarse al dispositivo
        Intersticial	700 KB	9:16 (ancho x altura)	Ajustado para adaptarse al dispositivo	Ajustado para adaptarse al dispositivo

   4. Haz clic en Revisar para revisar la creatividad del banner y probar su apariencia en diferentes dispositivos.
      Nota: Los banners pueden parecer ligeramente diferentes en las campañas activas en comparación con las imágenes de vista previa.
   5. Si se necesitan cambios, haz clic en Volver al editor.
   6. Haz clic en Hecho para volver a la página de configuración del banner.
4. [Opcional] Agrega parámetros de atribución personalizados. Por ejemplo, ad_adset y af_ad. Nota: Los parámetros pid, c y channel no se pueden agregar al nivel banner, ya que pertenecen al nivel de grupo de banners.
5. 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.
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.

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

Para probar una creatividad de banner inteligente:

Requisito previo: asegúrate de que el fragmento de código del Smart Banner esté integrado en tu sitio web.

1. En la página Probar creatividad, introduce el enlace a tu página web donde está integrado el SDK de banners inteligentes (consulta Banners inteligentes para desarrolladores).
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.

La página de rendimiento te permite ver y comparar los datos de rendimiento de todos tus Smart Banners, hasta los últimos 90 días.

Para ver la página de rendimiento:

1. En el panel de control de AppsFlyer, ve a Experiencias y enlaces profundos > De la web a la aplicación > Smart Banners > Rendimiento.
2. Selecciona el rango de fechas para el que deseas ver el rendimiento. El rango de fechas predeterminado es de los últimos 7 días.
3. [Opcional] Activa Mostrar solo los banners actualmente activos. Si está activado, los datos de los banners que están en pausa o que actualmente no están activos no se muestran, incluso si estuvieron activos durante el rango de fechas seleccionado. Los datos de rendimiento se muestran para el rango de fechas seleccionado.

Puedes ver los datos de rendimiento de los últimos 7 días para cualquier banner.

Para ver el rendimiento del banner:

1. En el panel de control de AppsFlyer, ve a Experiencias y enlaces profundos > De la web a la aplicación > Smart Banners > Studio.
2. Selecciona el lugar de trabajo del sitio web y el grupo de banners para el que deseas ver el rendimiento.
3. Posiciona el cursor sobre cualquiera de los banners del grupo de banners.
   Los datos de rendimiento se muestran para la semana pasada.

AppsFlyer tiene en cuenta lo siguiente al determinar qué banner inteligente mostrar o si se muestran:

• ¿Existen reglas (comportamiento de desestimación, frecuencia máxima, ubicaciones, mostrar en las páginas, etc.) configuradas para los grupos de anuncios?
• ¿El usuario final cumple con las condiciones de las reglas y califica para ver un banner?

Si la respuesta a ambas preguntas es sí, es decir, hay reglas, y el usuario califica para ver un banner, AppsFlyer elige un banner para mostrar como se explica en la siguiente tabla.

Puedes realizar pruebas A/B de los banners comparando su rendimiento en el panel de control de rendimiento. Para datos adicionales relacionados con la atribución, se recomienda agregar los parámetros af_adset, af_ad u otros parámetros de atribución (excepto  pid, c y channel) con un valor único para cada creatividad de banner o grupo de banners. Utiliza esos parámetros para comparar el rendimiento de cada grupo de banners cuando visualices datos en los paneles de control y reportes de AppsFlyer.

Esto se debe a la frecuencia máxima establecida en tu grupo de banners. 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.

Sí. puedes configurar tu propia fuente utilizada en tu sitio web para tu banner, siguiendo las instrucciones disponibles en el centro de desarrollo.

• Requiere un desarrollador de sitios web para su implementación.
• La fuente se aplicará a todos los banners del sitio web y a todos los elementos de texto dentro del banner.
• La fuente no se puede ver en el editor creativo.
• Después de implementarlo, prueba tu banner creativo.
• Si la fuente no se muestra correctamente, vuelve a enviar tu banner en el editor creativo.

showBanner

updateParams

Sí. Para ello, agrega el parámetro deep_link_value de una de las siguientes formas:

• En la interfaz de usuario de AppsFlyer, agrega un parámetro de atribución estático personalizado durante la configuración del banner.
• Utiliza additionalParams en la función showBanner para agregar el parámetro a la URL antes de mostrar el banner.
• Utiliza la función updateParams para agregar el parámetro a la URL después de que aparezca el banner.

Asegúrate de que tu desarrollador implemente el comportamiento deseado del deep_link_value.

No. Si no sabes si los usuarios tienen o no la aplicación, te recomendamos que realices la llamada a la acción correspondiente a ambos. Por ejemplo: "Ir a la aplicación" o "abrir la aplicación".

Sí. Si la URL entrante original contiene un parámetro utm_source o pid, la URL original se guarda durante la sesión de navegación y los parámetros se aplican a la URL del banner saliente.

Sí. Para hacerlo, cuando implementes Banners inteligentes en una aplicación contenedora/híbrida y cargues la página del banner desde la aplicación (y no desde un navegador web), no uses la función showBanner, ya que esta muestra el banner en la aplicación. Alternativamente, usa la función hideBanner.

Estamos comprometidos a garantizar que todos tus usuarios, incluidos los que tienen discapacidades, puedan acceder e interactuar plenamente con los Smart Banners.

Como tal, tratamos de hacer que la accesibilidad web de nuestros Smart Banners sea compatible y seguimos las mejores prácticas estándar WCAG 2.1 al proporcionar los atributos HTML relevantes en los elementos de Smart Banner.

Sin embargo, determinar los requisitos de accesibilidad relevantes para tus propios usos previstos de dichos Smart Banners es tu exclusiva responsabilidad. Tú eres el único responsable de garantizar que los Smart Banners que utilices sigan siendo accesibles para todos los usuarios, de acuerdo con los requisitos relevantes de accesibilidad web.

Ten en cuenta que varios cambios en el Smart Banner pueden afectar su compatibilidad con los requisitos de accesibilidad relevantes, incluyendo, por ejemplo, al editar los colores y el tamaño de los elementos internos del banner.