Cómo agregar un botón de suscripción a notificaciones push a los popups

¿Buscas una forma de añadir un botón de suscripción a las notificaciones push a tus popups?

Los popups son una excelente manera de aumentar tus conversiones y hacer crecer una lista de correo electrónico. Pero eso no es todo lo que puedes hacer con ellos. Si utilizas el constructor de popups adecuado, puedes personalizar todo sobre tus popups.

Por defecto, las notificaciones push también vienen con modales emergentes. Pero puedes obtener muchas más opciones de personalización con un constructor de popups.

Por lo tanto, vamos a usar un constructor de popups para crear el popup y añadir un enlace de suscripción para recopilar suscriptores de notificaciones push.

Puedes añadir fácilmente un botón para recopilar suscriptores de notificaciones push directamente desde tus popups. Y es muy fácil de hacer. Todo lo que necesitas es un constructor de popups y un software de notificaciones push para configurar popups personalizados para recopilar suscriptores de notificaciones push.

Vamos a ello.

Cómo crear un popup para recopilar suscriptores de notificaciones push

Empecemos creando un popup. Recomendamos usar OptinMonster para crear todos tus popups.

OptinMonster es el kit de herramientas de conversión n.º 1 del mundo y lo hemos utilizado nosotros mismos. OptinMonster hace que sea muy sencillo crear popups potentes que convierten. Y nunca tendrás que usar ningún código.

OptinMonster tiene prácticamente todo lo que necesitas para iniciar, hacer crecer y escalar tu proceso de generación de leads.

Aquí tienes un resumen rápido de lo que puedes hacer usando el kit de herramientas:

• Recopila suscriptores de notificaciones push usando un popup
• Convierte a los visitantes primerizos en lectores habituales
• Reduce las tasas de abandono de carrito y abandono de navegación
• Crea ofertas por tiempo limitado con temporizadores de cuenta atrás reales
• Aumenta las descargas de eBooks y las ventas de productos digitales
• Crea un embudo para eventos en vivo
• Mejora la interacción del sitio usando popups gamificados
• Redirige tu tráfico a páginas y publicaciones que te generan dinero

Usamos OptinMonster bastante y hasta escribimos una reseña completa de OptinMonster. Puedes echarle un vistazo, o empezar con tu campaña ahora mismo. Todo lo que tienes que hacer es registrarte en OptinMonster y seguir el resto de este artículo.

Paso n.º 1: Crea una campaña de popup para recopilar suscriptores

Ve a tu panel de OptinMonster y pulsa el botón Crear:

Selecciona la opción Plantilla para empezar a crear un optin usando una plantilla prediseñada:

Para este tutorial, vamos a crear un popup para el Black Friday. Selecciona el tipo de campaña Popup y busca una plantilla de campaña

Puedes elegir la plantilla que quieras, pero nosotros usaremos la plantilla de campaña Black Friday para este tutorial.

Después de seleccionar tu plantilla, ponle un nombre a tu campaña. Recuerda que este nombre de campaña es para ti y probablemente crearás un montón de estos popups con diferentes opciones de segmentación. Así que, ponle un nombre significativo a la campaña o acabarás muy confundido más adelante.

Además, dependiendo de tu plan, también puedes usar OptinMonster en varios sitios. Así que, selecciona el sitio web donde quieres mostrar tu campaña también. Pulsa Empezar a construir cuando hayas terminado.

Paso n.º 2: Edita tu popup para personalizar su aspecto

Con OptinMonster, obtendrás un constructor de popups visual de arrastrar y soltar. Una vez que hayas terminado de nombrar tu campaña, podrás editar hasta el más mínimo detalle de tu popup.

La parte más increíble aquí es que simplemente haces clic en cualquier texto que quieras editar y lo cambias en línea. No hay necesidad de rellenar un formulario ni de editar ningún código HTML en el popup.

Puedes editar todo lo que quieras sobre tu popup, incluidas las imágenes. Cuando estés satisfecho con la apariencia del optin, puedes pasar a configuraciones más avanzadas.

La forma en que está configurada esta plantilla en particular es que hay tres partes en el popup. Tienes una pantalla inicial de Sí/No donde los visitantes optan por un cupón en Black Friday. Es lo que ves en la imagen de arriba. Por defecto, es un cupón de envío gratuito. Pero puedes añadir cualquier oferta o cupón que desees.

Cuando tus visitantes hagan clic en el botón Sí del popup, serán enviados a la pantalla de Optin. Aquí es donde recopilarías suscriptores. Por defecto, la pantalla de optin recopila correos electrónicos. Vamos a reemplazar eso con un botón para recopilar suscriptores de push.

Finalmente, tienes una pantalla de Éxito que aparece cuando tu visitante se suscribe.

Hagamos esto paso a paso.

Paso #3: Eliminar el Optin de Correo Electrónico del Popup

Puedes editar cualquier módulo del popup que desees. Ve a la pantalla de Optin en la barra inferior:

Aquí, puedes pasar el ratón sobre el módulo de optin de correo electrónico y simplemente hacer clic en el botón de eliminar para quitarlo:

Ahora que el optin de correo electrónico ha desaparecido, vamos a añadirle un botón que recopile suscriptores de notificaciones push.

Paso #4: Añadir un Botón de Clic para Suscribirse a tu Popup

Primero, añade un bloque de HTML a tu popup desde la barra lateral en OptinMonster.

Aquí es donde vamos a añadir el código para recopilar suscriptores de notificaciones push. Primero, pega el siguiente código para crear un botón clicable:

<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

Pega el código donde dice que puedes añadir HTML. En este punto, deberías ver un nuevo botón en tu popup:

A continuación, desplázate hacia abajo y pega el siguiente CSS en el contenedor CSS:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

En este punto, deberías ver un botón con un aspecto estupendo en tu popup:

Paso #5: Obtener el Código de Suscripción de PushEngage

Las notificaciones push te ayudan a aumentar el tráfico y la interacción de tu sitio web de forma automática. Las notificaciones push web son una forma eficaz de recuperar a los usuarios que pueden haber abandonado su sesión o salido del sitio web. Ayuda a re-interactuar con los usuarios notificándoles de nuevo contenido, ofertas o eventos.

Las notificaciones push también incluyen mensajes claros y accionables y botones de llamada a la acción, animando a los usuarios a realizar acciones específicas, como leer un artículo, completar una compra o participar en un evento.

Puedes adaptar las notificaciones push según las preferencias, el comportamiento y los intereses de los usuarios, para asegurarte de que los mensajes sean relevantes y valiosos para cada usuario. Los usuarios tienen que aceptar recibir notificaciones push web. Esto asegura que los mensajes no se vean como spam y que se envíen con el permiso de los usuarios.

La parte más genial es que puedes recopilar suscriptores de notificaciones push desde tu popup de correo electrónico. Así, en caso de que los visitantes de tu sitio no quieran dar su ID de correo electrónico, aún puedes conseguir que se suscriban usando notificaciones push web.

Recomendamos usar PushEngage para enviar notificaciones push web.

Aquí tienes un vistazo rápido de lo que obtienes con PushEngage:

• Campañas automatizadas de alta conversión aquí
• Segmentación múltiple y opciones de programación de campañas
• Seguimiento de objetivos y analiacute;ticas avanzadas
• Pruebas A/B inteligentes aquí
• Un gestor de eacute;xito dedicado

Puedes empezar gratis, pero si te tomas en serio el crecimiento de tu negocio, deberías comprar un plan de pago. Además, antes de comprar cualquier servicio de notificaciones push, deberías consultar esta guía sobre costes de notificaciones push.

Y si tienes una tienda online, PushEngage también te ayuda a aumentar tus ventas al ayudarte a crear notificaciones push de comercio electrónico automatizadas.

Verás que PushEngage es, sin duda, la mejor opción si quieres generar tráfico, interacción y ventas para tu negocio. Y si tienes un presupuesto limitado, siempre puedes ser un poco creativo con tus notificaciones push.

Diríjase a la página principal de PushEngage y haga clic en el botón Empezar:

Luego, querrás seleccionar el plan gratuito para probar PushEngage o elegir un plan de pago si te tomas en serio el crecimiento de tu negocio. Los planes de pago vienen con más opciones de campaña y la capacidad de crear listas de suscriptores aún más grandes.

En tu panel de control de PushEngage, ve a Configuración del sitio » Detalles del sitio y haz clic en el botón Haz clic aquí para obtener instrucciones de configuración. En Cualquier sitio, obtendrás tu código de instalación:

ADVERTENCIA: Necesitas copiar el código que obtienes de tu panel de control. El código es único para cada usuario de PushEngage. No podrás copiar el código de la imagen y recopilar suscriptores de notificaciones push.

Una vez que tengas el código en tu panel de PushEngage, toma el segundo script y añádele código adicional. Tu código final debería parecerse a esto:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>

Paso n.º 6: Añade tu código de suscripción al bloque HTML de tu ventana emergente

Añade este código al bloque HTML en OptinMonster y ¡listo!

Cuando hayas terminado, simplemente pulsa los botones Guardar y Publicar.

Paso n.º 7: Añadir seguimiento de clics y cierre de campaña

Lo último que necesitamos hacer es añadir código de seguimiento de clics para considerar a cada suscriptor como una conversión en OptinMonster. Además, cuando el visitante se suscriba, querrás que pase a la pantalla de Éxito o que salga de la campaña.

Dentro del fragmento de Javascript, añade las siguientes líneas de código:

Para habilitar el seguimiento de conversiones, añade este código:

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

Para pasar a tu suscriptor a la pantalla de Éxito, añade este código:

om{{id}}.changeView('success'); // Show Success view on submission

Para cerrar la campaña al suscribirse, añade este código:

om{{id}}.startClose();// Close campaign on submission

Puedes añadir varios fragmentos de código. Te recomendamos que pases a los suscriptores a la pantalla de Éxito y realices el seguimiento de la conversión. Por lo tanto, el fragmento de código final que recomendamos usar (incluyendo el botón y todo el Javascript) es:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

O, puedes usar este código en su lugar para cerrar la campaña directamente:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Simplemente copia y pega el código en el bloque HMTL de tu ventana emergente de OptinMonster.

Y para cualquiera de los fragmentos de código, recuerda añadir el siguiente CSS en la sección CSS de tu bloque HTML:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

Cuando hayas terminado, haz clic en Guardar. Si revisas tu sitio web, ahora deberías ver la ventana emergente recopilando suscriptores de correo electrónico y de notificaciones push:

Y así de fácil, estás recopilando suscriptores de notificaciones push desde tu ventana emergente. Las notificaciones push vienen con sus propios módulos emergentes. Pero son un poco difíciles de personalizar. Por lo tanto, puedes crear ventanas emergentes atractivas usando OptinMonster y luego usarlas como tus ventanas emergentes de notificaciones push.

Paso n.º 8: Publicar tu ventana emergente de intención de salida en WordPress

Cuando creas una nueva campaña, está Pausada por defecto.

Ve a la pestaña Publicar en el menú superior para ver las Opciones de publicación. Luego, establece el estado en Publicar y selecciona la plataforma del sitio web:

Si tienes un sitio de WordPress, el plugin de OptinMonster se encarga del resto de la configuración automáticamente. Es lo mismo para Shopify y BigCommerce. Para cualquier otro sitio, haz clic en Cualquier sitio y pega el código de inserción en el encabezado de tu sitio web:

¡Y listo!

Paso extra: Desactivar la instalación rápida en PushEngage

La Instalación Rápida es un método para agregar suscriptores de notificaciones push a un sitio web sin un certificado SSL. Hoy en día, casi todos los sitios tienen un certificado SSL, pero en caso de que no tenga uno instalado, le recomendamos encarecidamente que instale uno de inmediato. Consulte este artículo sobre cómo instalar un certificado SSL en WordPress.

Por lo tanto, antes de comenzar a recopilar suscriptores en su sitio, también le recomendamos que deshabilite la Instalación Rápida. Diríjase al panel de control de PushEngage y vaya a Diseño » Modales de ventana emergente. Luego, deshabilite Instalación Rápida:

¡Y ahora, está listo para promocionar su sitio web y recopilar más suscriptores para el Black Friday!

Qué hacer después de empezar a recopilar suscriptores de notificaciones push

¡Eso es todo por ahora, amigos!

Háganos saber si este artículo le ha sido útil. Crear ventanas emergentes en su sitio puede ayudarle a convertir su tráfico en suscriptores de notificaciones push y clientes potenciales de negocios genuinos. Y le recomendamos encarecidamente que empiece a crear ventanas emergentes de intención de salida de inmediato.

Y si está buscando una forma asequible de aumentar su tráfico, le recomendamos que utilice notificaciones push. Las notificaciones push pueden ayudarle a atraer más tráfico recurrente y participación en el sitio. También puede crear campañas de notificaciones push automatizadas que generen ventas.

¿No estás convencido? Consulta estos recursos:

• 7 estrategias inteligentes para aumentar la participación del cliente
• ¿Son efectivas las notificaciones push? 7 estadísticas + 3 consejos de expertos
• Cómo configurar notificaciones push de carritos abandonados (tutorial fácil)
• Cómo añadir un plugin de WordPress de notificaciones web a tu sitio

Le recomendamos que utilice PushEngage para crear sus campañas de notificaciones push. PushEngage es el software de notificaciones push número 1 del mundo. Por lo tanto, si aún no lo ha hecho, ¡empiece con PushEngage hoy mismo!