Personyze Wiki Personyze Wiki docs
Open Personyze
Docs/ Contenido y diseño/ Guía de la acción Popup, Banner y HTML
Contenido y diseño

Guía de la acción Popup, Banner y HTML

La acción de referencia para mostrar contenido: promociones, anuncios, popups de cupón, ruletas, carruseles. Plantillas o su propio HTML, como popup, barra, pantalla completa o integrado en la página.

8 min read Updated 4 hours ago

El Constructor de Popup, Banner y HTML es la acción de referencia para mostrar contenido: promociones, anuncios, popups de cupón, juegos de ruleta, carruseles principales, botones de chat flotantes, seguidores de progreso — cualquier cosa construida a partir de una plantilla o de su propio HTML, mostrada como popup, como barra, a pantalla completa o integrada en la página.

Añadir uno

  1. En una campaña de segmentación y personalización, abra el paso Contenido y haga clic en Agregar acción.
  2. Elija Constructor de Popup, Banner y HTML. Se abre la galería de plantillas. También puede Empezar en blanco y pegar su propio HTML, o copiar de una acción que ya haya creado.
Galería de plantillas de popup
La galería, filtrable por etiqueta. Todas las plantillas están documentadas en profundidad en las secciones de plantillas de esta base de conocimiento. Haga clic para ampliar.

Las familias de la galería (cada una enlaza con su propio artículo detallado):

El editor

Paso 1 — Diseñe su banner o popup. Haga clic en cualquier elemento directamente en la vista previa en vivo, o despliegue su grupo en la barra lateral. Todos los ajustes tienen un botón de ⚡ Variaciones — casos basados en audiencia (idioma, país, visitante recurrente, campo del CRM…) con un valor por defecto de reserva, exactamente como se describe en la guía de la cuenta atrás.

Editor de popup con la plantilla Popup de cupón
El Popup de cupón en el editor: el grupo Estilo desplegado, y debajo los grupos de Código de cupón, Imagen, Texto, Botón y Cierre. Haga clic para ampliar.

Lo que contiene cada grupo (se muestra el Popup de cupón; otras plantillas varían):

  • Estilo — preajuste de color, disposición de la imagen, esquinas, animación de entrada (aparición…), sombra de la tarjeta, CSS avanzado de la tarjeta.
  • Código de cupón — el código en sí y su estilo de revelado: copiar (clic para copiar al portapapeles), revelar (desenfocado hasta que se pulsa), mostrar (siempre visible).
  • Texto — antetítulo, título, cuerpo y letra pequeña; cada uno con su interruptor de mostrar u ocultar, su propio punto de enganche CSS y sus Variaciones.
  • Botón — el texto y, después, Abrir enlace (misma ventana o nueva) o Ejecutar JavaScript; Contar los clics aquí (objetivo de clic) lo marca como el objetivo de clic para el CTR; animación opcional.
  • Cierre — conserve la × integrada, o elija de la biblioteca de iconos (24 iconos) o una imagen propia. No volver a mostrar durante N sesiones: después de que un visitante lo cierre, permanece oculto ese número de sesiones — 0 hace que vuelva en la siguiente visita, y 999 hace que, en la práctica, no se muestre nunca más.
  • Código HTML (avanzado) — el marcado completo, para desarrolladores.

Barra de herramientas: Previsualizar como en móvil / tableta / escritorio, Cambiar plantilla, Añadir a sus plantillas (guarda su versión personalizada para reutilizarla) y Editar esta acción con IA — describa el cambio en lenguaje natural y la IA cambia el estilo de la acción o la reescribe.

Reglas de visualización y ubicación

Paso 2 — Defina las reglas de visualización y la ubicación:

  • Elemento en línea — se muestra dentro de uno o varios placeholders; se apila con el contenido de su página.
  • Popup flotante — elija una posición en pantalla; después, la animación de entrada, el fondo modal atenuado opcional, el comportamiento al hacer scroll, el botón de cerrar y el cierre automático. Los ajustes que solo se aplican a los popups aparecen desactivados en el modo en línea, de modo que la pantalla conserva su forma.
  • Mientras no elija una ubicación, la acción no tiene dónde mostrarse — el paso lo dice explícitamente, así que una acción invisible nunca es un misterio.
  • Disparadores — cuándo se abre la acción. Hay once, agrupados según lo que esté haciendo el visitante — véase Disparadores más abajo.
  • Límites de frecuencia — parar después de que lo cierren, hagan clic o tras N impresiones, modo por tandas, separación respecto a otros popups — cada regla reformulada en lenguaje claro con sus propias cifras.
Definir las reglas de visualización y la ubicación
Ubicación: en línea frente a flotante, comportamiento que se atenúa cuando no procede, y disparadores y frecuencia debajo. Haga clic para ampliar.

Disparadores: cuándo se abre el popup

Un disparador decide el momento en que aparece una acción, una vez que las reglas de audiencia de la campaña ya han decidido quién la ve. Marque los que quiera: la abre el primero que ocurra.

A la llegada

  • Al entrar en la página — en cuanto carga la página. Es también la opción de reserva: si no marca ninguna otra, la acción se abre al cargar.
  • Mostrar tras un retardo — un número de segundos contados desde la carga de la página, haga lo que haga el visitante.
  • Cuando lleve inactivo — sin movimiento del ratón, sin clics y sin pulsaciones de teclas. Cualquiera de las tres cosas reinicia la cuenta, de modo que esto se dispara tras una pausa real y no a una hora fija.

Con la interacción

  • Tras desplazarse hasta — un porcentaje de la altura total de la página.
  • Si vuelve a subir arriba — bajó y volvió a subir.
  • Al copiar texto — usó Cmd/Ctrl+C.
  • Al seleccionar texto — al resaltar una frase, antes de copiarla. Espera aproximadamente medio segundo desde que la selección deja de cambiar, para que un arrastre termine primero, y requiere diez caracteres o más: un doble toque suelto sobre una palabra no cuenta.
  • Cuando deje de desplazarse durante — detenido a media página, leyendo en lugar de ojear. Solo un desplazamiento real pone en marcha el reloj, así que una página por la que nadie se desplaza nunca dispara esto; cada nuevo desplazamiento lo reinicia.

Con intención de salida — ahora también en móviles

La intención de salida son dos detectores independientes, porque marcharse tiene un aspecto completamente distinto con un ratón y con una pantalla táctil. Marque cualquiera de los dos, o ambos.

  • Escritorio — el cursor se marcha. Se dispara cuando el puntero cruza el borde superior de la ventana, donde están el botón de cerrar, las pestañas y la barra de direcciones. Salir por los lados o por abajo no cuenta, porque no son salidas.
  • Móvil — toque en Atrás. El visitante toca Atrás en un dispositivo táctil. Solo se arma después de que el visitante interactúe — un desplazamiento, un toque o una pulsación de tecla — nunca con la simple carga de la página, de modo que quien se marcha de inmediato conserva su botón Atrás. Una vez armado, una pulsación de Atrás abre la acción en lugar de salir y la página se mantiene; la pulsación siguiente sale con normalidad. Recargar vuelve a armarlo.
El detector de escritorio no puede dispararse en un móvil — vigila un cursor, y allí no hay ninguno. Si la intención de salida es toda su campaña, marcar solo la opción de escritorio se salta en silencio a todos los visitantes de móvil. Active Móvil — toque en Atrás para llegar a ellos.
El detector de toque en Atrás se instala únicamente en dispositivos sin puntero, de modo que un portátil con pantalla táctil sigue recibiendo el disparador de escritorio y no los dos. Para probarlo: abra la página, desplácese un poco y pulse después Atrás — sin ese primer desplazamiento todavía no está armado.

Desde su propio código

  • Ante un evento de su sitio — llame a _S_T.trigger("add_to_cart") desde cualquier punto de su página en el momento en que ocurra la cosa, o envíe {event: "add_to_cart"} a su capa de datos y use el nombre que ya tenga en su gestor de etiquetas. Los nombres se comparan de forma exacta, mayúsculas incluidas. Dispararlo antes de que la acción se haya cargado no supone ningún problema: la acción se abre en cuanto llega.

Abrirlo desde algo de la página

Al margen de los disparadores anteriores, una acción puede ser lanzada por el visitante: al hacer clic o pasar el ratón sobre un elemento que usted señale, sobre un elemento que Personyze añade por usted, o como popup minimizable, que permanece plegado como una pestaña hasta que se abre.

Escribir un 0 en el valor de un disparador lo borra y desactiva esa casilla: no existe un estado de “activado, con un retardo de cero” en el que quedarse atrapado.

Medirlo

El botón marcado como objetivo de clic alimenta el CTR de la acción; las impresiones, los clics y los cierres se informan al paso Rendimiento de la campaña y, si está activado, a Google Analytics. Para probar diseños entre sí, active las pruebas A/B en el paso Contenido.

Pestaña General del rendimiento de la campaña
La pestaña General del paso Rendimiento: visitas, impresiones, clics, conversiones e ingresos de la audiencia, con una tabla comparativa por acción. Haga clic para ampliar.
Did this page answer your question?
Thank you — that goes to whoever maintains this page.