3.1. Incluir la campaña en un popup.
3.2. Opciones de configuración del popup.
1. Introducción.
En Cool Tabs, además de poder embeber tu campaña en una web, blog o microsite, mediante un widget de contenido, también puedes mostrarla en una ventana emergente (popup) o un botón. Así, puedes hacer que aparezca en la ubicación deseada en pantalla cuando el usuario acceda a la web, captando su atención de inmediato.
2. Ideas y ejemplos.
La funcionalidad para mostrar campañas en un popup es ideal para captar la atención de los usuarios y fomentar la participación en tu web. Aquí tienes algunos ejemplos de cómo puedes utilizarla:
- Promoción de un evento: Si estás organizando un sorteo de entradas para un evento, puedes mostrar la información y el formulario de inscripción en un popup. Así, cuando un usuario entre a tu blog o sitio web, se le abrirá automáticamente el popup con la información del evento y el sorteo.
- Lanzamiento de una colección: Para promocionar una nueva colección de moda, puedes usar un quiz tipo "¿Qué tendencia no puede faltar en tu armario?". Los resultados del quiz pueden incluir un descuento en la colección. Con el popup, este quiz saltará al acceder a la sección específica de tu web, como "New In".
- Captación de datos: Si deseas captar correos de usuarios, puedes configurar un sencillo formulario de registro, que saltará a modo de popup cuando el usuario acceda a tu web. Al completarlo, el usuario puede recibir un e-book gratuito o un cupón de descuento.
- Encuestas: Puedes configurar un pequeño quiz para conocer las preferencias de tus usuarios sobre un determinado contenido, producto o servicio. Al finalizar el quiz, puedes mostrarles paquetes o promociones personalizados. Esta información también puede integrarse a tu estrategia de marketing.
3. Paso a paso.
3.1. Incluir la campaña en un popup.
1. En el listado principal de campañas, selecciona la campaña que deseas mostrar en un popup y ve a la sección 'Publicar'.
2. Ve a la sección 'Widget para mostrar en pop-up'.
3. Elige qué sección de la campaña deseas mostrar en el popup: página de inicio, formulario de participación, listado de participantes o página de ganadores.
4. Copia el HTML del popup que quieras incrustar.
Te recomendamos copiar siempre el código directamente desde esta sección, sin modificarlo a mano. Si ya tenías el popup incrustado en tu web antes, consulta el apartado 4.4.
3.1.1. Landing de la campaña.
Si decides mostrar la página principal de tu campaña, copia el HTML correspondiente.
Puedes personalizar la apariencia añadiendo un título, imagen principal o eliminar botones con CSS.
Ejemplo de una landing embebida en un popup:
3.1.2. Formulario.
Para que el popup muestre directamente el formulario, selecciona esta opción y copia el HTML.
Debes tener activado el login anónimo en la configuración de la campaña para que el formulario se muestre correctamente.
Ejemplo de un formulario embebido en un popup:
3.1.3. Listado de participantes.
Para mostrar el listado de participantes en el popup, selecciona esta opción y copia el HTML.
Ten en cuenta que debes tener activada la opción 'Hacer visibles/públicas las participaciones' en la configuración de la campaña para que funcione.
Ejemplo del listado de participantes en un popup:
3.1.4. Página de ganadores.
Si deseas embeber la página de ganadores, copia el HTML correspondiente.
Asegúrate de que la página de ganadores es pública y que la campaña esté activa en fechas (fecha de la campaña, no del periodo de participación), para que se muestre.
Ejemplo de la página de ganadores en un popup:
3.2. Opciones de configuración del popup.
Además de seleccionar la sección de la campaña que deseas mostrar, puedes elegir el modo en que el popup aparecerá en tu web: automáticamente, automáticamente después de que el usuario interactúe con la página, o al hacer clic en un botón. También puedes elegir si el popup se muestra como ventana flotante o modal.
3.2.1. Modo automático.
Al activar el modo automático, el popup aparecerá directamente cuando el usuario acceda a tu web o blog, una vez pasado el tiempo de espera que configures.
Configuraciones adicionales:
Alto y ancho relativo (%). Por defecto, en ordenador el popup se muestra al 70% de altura y 25% de ancho. Ajusta estos porcentajes para cambiar el tamaño.
Alto y ancho relativo en móvil (%). Por defecto, en móvil el popup ocupa toda la pantalla (100% de alto y de ancho). Si prefieres que se vea parte de tu web detrás, reduce estos porcentajes. Por ejemplo, 90% de ancho y 70% de alto. Si el usuario gira el móvil con el popup abierto, el tamaño se ajusta automáticamente.
Posición. Elige la ubicación del popup (centro, arriba a la derecha, abajo a la izquierda, etc.).
Tiempo expiración de la cookie (días). Configura el tiempo, en días, antes de que el popup vuelva a mostrarse para el mismo usuario. Por ejemplo, si defines 7 días, el usuario no verá el popup durante ese periodo, a menos que elimine las cookies o navegue en modo privado. Si haces pruebas en tu campaña, puedes ver el popup de nuevo sin borrar las cookies siguiendo los pasos del apartado 4.3.
Tiempo de espera (segundos). Define el tiempo que tardará en mostrarse el popup después de que el usuario acceda a la web.
Aquí puedes ver un ejemplo de una campaña en popup en modo automático.
3.2.2. Modo automático tras interactuar.
Funciona igual que el modo automático, pero el tiempo de espera no empieza a contar hasta que el usuario interactúa con la página: cuando hace scroll, hace clic, toca la pantalla o pulsa una tecla. Así, el popup no aparece nada más cargar la página, antes de que el usuario haya empezado a leerla.
Es una buena opción si te preocupa el SEO, ya que algunos buscadores consideran intrusivos los popups que aparecen nada más entrar. Aun así, no garantiza que Google deje de considerar el popup como intrusivo.
Las configuraciones adicionales son las mismas que en el modo automático: tamaño, posición, expiración de la cookie y tiempo de espera.
Ten en cuenta: si el usuario recarga la página o vuelve atrás y la página ya estaba desplazada, el navegador recupera esa posición y eso ya cuenta como interacción, por lo que el tiempo de espera empieza a contar directamente.
3.2.3. Modo botón.
A) Botón flotante
En este modo, aparece un botón que el usuario debe pulsar para abrir el popup de la campaña. Esta es una opción menos intrusiva que da el control al usuario, permitiéndole elegir si quiere o no abrir el popup.
Opciones de configuración:
- Posición del botón. Por defecto, el botón siempre se muestra en la parte inferior de la pantalla. Puedes configurarlo para que aparezca a la izquierda o a la derecha.
- Texto del botón. Personaliza el mensaje del botón con un "call to action" atractivo.
- Color del botón. Cambia el color del botón según la apariencia deseada.
Aquí puedes ver un ejemplo de una campaña con popup en modo botón flotante.
B) Botón inline
Con esta opción, puedes insertar el botón en cualquier lugar del texto de la web. Al hacer clic en él, se desplegará el popup.
Opciones de configuración:
- Texto del botón. Personaliza el mensaje del botón con un "call to action" atractivo.
- Color del botón. Cambia el color del botón según la apariencia deseada.
Ejemplo de una campaña con popup en modo botón inline:
Aquí puedes ver un ejemplo de una campaña con popup en modo botón inline.
3.2.4. Tipo de ventana: flotante o modal.
Con la opción 'Tipo de ventana' eliges cómo se comporta el popup respecto al resto de tu web:
Flotante (opción por defecto). El popup aparece sobre tu web, pero el usuario puede seguir navegando por ella con el popup abierto.
Modal. Se oscurece el fondo y el resto de la página queda bloqueada hasta que el usuario cierra el popup. También se puede cerrar pulsando en el fondo oscuro.
No recomendamos usar el tipo modal con los modos automáticos. Un popup que tapa la página sin que el usuario lo haya pedido puede perjudicar el posicionamiento de tu web en Google en móvil. El tipo modal encaja mejor con los modos botón, en los que es el propio usuario quien decide abrir el popup.
Si tu web muestra un banner de cookies en el momento en que se abre un popup modal, el banner sigue pudiéndose usar con los gestores de cookies más habituales (OneTrust, Cookiebot, Didomi, Usercentrics…). Con otros gestores, el banner puede quedar bloqueado hasta que el usuario cierre el popup.
4. Otras especificaciones.
4.1. Mide el tráfico de tu campaña en popup con UTMs.
¿Tienes la misma campaña publicada como embed estándar y como popup y quieres saber cuál convierte mejor? ¿O necesitas diferenciar el tráfico por partner o por la web en la que se incrusta? Puedes añadir parámetros UTM al código del popup y Cool Tabs los recogerá automáticamente para analizarlos en estadísticas.
En el tutorial Cómo medir el tráfico de una campaña incrustada con parámetros UTM te explicamos cómo hacerlo paso a paso, junto con la jerarquía que sigue el sistema cuando hay UTMs tanto en el widget como en la URL donde está incrustado.
4.2. Accesibilidad.
El popup se puede usar con teclado y con lector de pantalla:
Al abrirse, el popup recibe el foco, y al cerrarlo el foco vuelve a la página.
Se puede cerrar con la tecla Escape.
Sus botones se pueden pulsar con las teclas Enter y Espacio.
El lector de pantalla anuncia el popup con el título público de la campaña. Si tu campaña no tiene título (por ejemplo, porque solo muestra una imagen), se anuncia con un nombre genérico como "Campaña". Por eso, te recomendamos darle siempre un título público descriptivo.
4.3. Cómo probar el popup sin borrar las cookies.
Una vez que un usuario ha visto el popup, no vuelve a aparecerle hasta que caduca la cookie. Para hacer pruebas en tu web tantas veces como quieras, añade #ctopenalways al final de la URL de tu página y recárgala. Por ejemplo: https://tuweb.com/pagina#ctopenalways. Así, el popup se abrirá siempre, sin necesidad de borrar las cookies.
4.4. Si ya tenías el popup incrustado en tu web.
La configuración del popup (modo de apertura, tamaño, posición, tipo de ventana, etc.) va incluida en el código que pegas en tu web. Por eso, cada vez que cambies alguna opción en la sección 'Publicar', tienes que volver a copiar el código y sustituir el que tienes pegado. Por ejemplo, si tenías el popup en modo automático y quieres pasarlo a automático tras interactuar, o si quieres ajustar su tamaño en móvil.
También te recomendamos volver a copiarlo si hace tiempo que lo incrustaste. Así te aseguras de tener la versión más reciente del popup, con todas las mejoras y opciones disponibles.
Si tienes alguna duda, contáctanos en help@cool-tabs.com.
5. Contenido relacionado.
Cómo embeber tu campaña en una página web.
Diferencias entre contenido propio y widget de contenido.
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.