Notificaciones Push Web Explicadas con Ejemplos Reales y Casos de Uso

La notificación push web es una herramienta poderosa para guiar a los usuarios a lo largo de su recorrido en tu sitio web y/o aplicación, manteniéndolos comprometidos al proporcionarles recursos complementarios de manera oportuna. Este blog profundiza en qué son las notificaciones push web, sus beneficios, componentes clave, casos de uso por industria y mucho más.

¿Qué Son las Notificaciones Push Web?

Las notificaciones push web, o notificaciones push del navegador, son mensajes que un sitio web o aplicación web envía a los navegadores de sus usuarios, incluso cuando estos no están activos en la plataforma. Lanzadas por primera vez por Chrome en 2015, estas notificaciones push aparecen como pequeños mensajes emergentes en la pantalla del escritorio o del dispositivo móvil, generalmente conteniendo:

• Título, que resume la notificación.
• Mensaje, que describe la notificación en detalle.
• Imagen o ícono, que ayuda a los usuarios a identificar el origen, como el sitio web o la marca, de la notificación.
• Botón o enlace de Llamada a la Acción (CTA), que guía al usuario a realizar una acción específica.
• URL de la Landing Page, que dirige al usuario a la landing page dedicada.

El push web es una forma efectiva para que los sitios web se comprometan con su audiencia, brinden actualizaciones oportunas y fomenten la interacción del usuario. Es especialmente útil para proporcionar contenido sensible al tiempo, información relevante, consejos de interfaz de usuario, actualizaciones de comunicación y mucho más.

Dependiendo del estado del dispositivo en el momento del envío, las notificaciones pueden aparecer temporalmente y desaparecer automáticamente o requerir una acción del usuario para cerrarlas. Las notificaciones push web y móviles se pueden usar de forma independiente o combinadas en varios dispositivos.

Beneficios de las Notificaciones Push Web

Aquí están algunos de los beneficios de las notificaciones push web:

1. Entrega en tiempo real

El push web es un canal de comunicación poderoso, directo y rápido que entrega mensajes a los usuarios instantáneamente, permitiéndote garantizar el momento óptimo para tus esfuerzos de comunicación.

2. No requiere instalación de aplicación ni actividad del usuario

Las notificaciones push del navegador se entregan a los usuarios independientemente de si están activos en la plataforma o han instalado la aplicación, permitiendo a las marcas alcanzar a su audiencia con facilidad.

3. Opt-in fácil

Al solicitar explícitamente el consentimiento de los usuarios, el push web te ayuda a garantizar que tus mensajes se entreguen a una audiencia genuinamente interesada en tus ofertas. Al mismo tiempo, ayuda a garantizar el cumplimiento de las regulaciones de privacidad de datos.

4. Mayor engagement

La entrega en tiempo real de las notificaciones push ayuda a mejorar significativamente las tasas de engagement. Las notificaciones oportunas sobre descuentos, promociones u otra información pueden ayudar a las marcas a aumentar el número de usuarios que regresan a sus sitios web.

5. Mejores tasas de conversión

Segmentar efectivamente la audiencia objetivo y personalizar los mensajes puede ayudar a mejorar las tasas de conversión, garantizando que la notificación correcta se entregue a la audiencia correcta en el momento correcto.

¿Cómo Funcionan las Notificaciones Push Web y Cómo Implementarlas?

Aquí están los pasos de cómo se entregan las notificaciones a los usuarios:

Paso 1: El usuario hace “opt-in” para permitir las notificaciones push

Paso 2: El certificado de suscripción se almacena en el servidor web para identificar y confirmar que el dispositivo de un usuario puede aceptar las notificaciones.

Paso 3: Cuando está lista para enviarse, la solicitud de notificación se envía a través del protocolo web push.

Paso 4: Una vez enviado, un servicio de push mantendrá el mensaje en el servidor hasta que el usuario esté en línea y la notificación sea entregada, o hasta que el mensaje expire. Si el mensaje tiene una fecha de expiración, puedes especificar cuánto tiempo debe permanecer en cola antes de ser eliminado o considerado no entregado.

La capacidad de almacenar temporalmente las notificaciones push para que solo se envíen si el usuario está disponible dentro de un período determinado es esencial para evitar que los mensajes sensibles al tiempo se entreguen tarde.

Paso 5: El mensaje llega al dispositivo del usuario.

Paso 6: El navegador invoca el service worker, un script que permite la mensajería sin conexión y puede incluso ejecutarse cuando el navegador está completamente cerrado. Finalmente, la notificación push se despacha y se entrega.

Aquí están las medidas para implementar las notificaciones push web de manera efectiva:

• Obtén la certificación Transport Layer Security (TLS) o, anteriormente, Secure Sockets Layer (SSL) para garantizar conexiones seguras (HTTPS).
• Agrega el archivo de service worker para gestionar tus notificaciones. (CleverTap proporciona el archivo de service worker, que debe alojarse en la raíz de tu documento.)
• Solicita permiso a los usuarios para enviar notificaciones.
• Desarrolla una estrategia para comprometer a los usuarios con contenido relevante y oportuno.

Componentes de una Notificación Push Web

La apariencia de las notificaciones varía dependiendo del navegador y del sistema operativo. Por ejemplo, cómo se ve una notificación en Windows difiere de cómo se ve en Mac usando el mismo navegador Chrome. Aquí hay algunos ejemplos que demuestran cómo se ve el push web en diferentes navegadores y sistemas operativos.

1. Chrome

a. En Windows

Las notificaciones entregadas a través de Chrome en Windows tienen los siguientes elementos:

• Imagen de banner de 360×180 o proporción 2:1. Los formatos compatibles incluyen JPG, PNG y GIF (no animado).
• Navegador e ícono del navegador.
• El logotipo o ícono del sitio web que envía la notificación (192×192 o mayor). Los formatos compatibles incluyen JPG, PNG y GIF (no animado).
• La URL del sitio web que envía la notificación.
• Hasta 2 botones de acción.
• Configuración de notificaciones y asistente de enfoque.
• Título con un límite de 60 caracteres.
• Contenido con un límite de 120 caracteres.

b. En Mac

Las notificaciones entregadas a través de Chrome en Mac tienen los siguientes atributos:

• Ícono del navegador.
• Título con un límite de 60 a 80 caracteres.
• La URL del sitio web que envía la notificación.
• Contenido con un límite de 120 a 150 caracteres.
• Ícono de banner de 192×192 o mayor, que se amplía al expandirse. Los formatos compatibles incluyen JPG, PNG y GIF (no animado).
• Hasta 2 botones de acción.

2. Firefox

a. En Windows

Firefox aún no admite la funcionalidad de imagen de banner ni de caja de acción. Aquí están los elementos clave de las notificaciones cuando se entregan a través de Firefox en Windows:

• Navegador e ícono del navegador.
• Ícono de 192×192 o mayor. Los formatos compatibles incluyen JPG, PNG y GIF (no animado).
• La URL del sitio web que envía la notificación.
• Configuración de notificaciones y asistente de enfoque.
• Título con un límite de 60 caracteres.
• Contenido con un límite de 120 caracteres.

b. En Mac

Las notificaciones entregadas a través de Firefox en Mac tienen los siguientes atributos:

• Ícono del navegador.
• Título con un límite de 60 a 80 caracteres.
• La URL del sitio web que envía la notificación.
• Contenido con un límite de 120 a 150 caracteres.
• Ícono de banner de 192×192 o mayor, que se amplía al expandirse. Los formatos compatibles incluyen JPG, PNG y GIF (no animado).
• Hasta 2 botones de acción.

3. Safari

Notificaciones push web en iOS

Apple anunció el soporte de notificaciones push web en iOS durante la WWDC 2022. Las notificaciones push del navegador para Safari ahora son compatibles con iPhones y iPads, ayudando a las marcas a mantener comprometidos a sus usuarios de iOS. La notificación push web en iOS tiene los siguientes atributos:

• Logotipo o ícono del navegador.
• Título con un límite de 30 caracteres.
• Mensaje con un límite de 120 a 150 caracteres.
• Nombre del sitio web que envía la notificación.
• Hora, mostrando cuánto tiempo ha pasado desde que la notificación fue entregada al dispositivo.

Ejemplos y Casos de Uso de Notificaciones Push Web en Diferentes Industrias

Las notificaciones push del navegador tienen múltiples casos de uso en diferentes industrias. Dependiendo de la industria a la que sirvas, puedes aprovecharlas para proporcionar contenido extremadamente sensible al tiempo, como actualizaciones de tráfico, cobertura de noticias, movimientos del mercado de valores y más.

Analicemos algunos de los ejemplos y casos de uso más comunes de notificaciones push web en comercio electrónico, noticias y medios, y servicios de streaming y OTT:

Comercio Electrónico

Las empresas de comercio electrónico pueden usar las notificaciones push del navegador para varios casos de uso, incluyendo el envío de un mensaje de bienvenida a nuevos usuarios, hacerlos regresar a sus carritos de compra abandonados, agradecerles por sus pedidos, notificarles sobre envíos y entregas, y reengancharlos con ofertas relevantes, entre otros.

Noticias y Medios

Los medios de noticias y comunicación utilizan el push móvil y web para proporcionar información como noticias de última hora, actualizaciones que requieren atención y otra información relevante.

Servicios de OTT y Streaming

Los servicios de OTT y streaming utilizan el push web para informar el estado de una acción del usuario, ya sea que haya ocurrido un error o que la acción deseada se haya completado con éxito. Estas notificaciones se pueden usar en combinación con microinteracciones para mantener a los usuarios informados mientras sus acciones se procesan y cuando se ha determinado una respuesta.

Mejores Prácticas para Implementar Notificaciones Push Web

Aquí están algunas de las mejores prácticas de notificaciones push web más utilizadas:

1. Opt-In Fácil: Asegúrate de que el aviso de opt-in para solicitar el consentimiento del usuario para las notificaciones sea claro y conciso.
2. Segmentación de Audiencia: Segmenta tu audiencia según sus atributos demográficos, geográficos, conductuales y psicográficos para enviar notificaciones personalizadas en los momentos óptimos.
3. Personalización y Relevancia: Crea mensajes atractivos que sean relevantes y resuenen con la audiencia objetivo. Evita enviar notificaciones genéricas, ya que pueden resultar en desinterés.
4. No Redundancia: Asegúrate de que las notificaciones push web no se envíen a usuarios que ya han habilitado las notificaciones push de la aplicación. Recibir notificaciones duplicadas en la aplicación y el navegador puede molestar al usuario y hacer que bloquee las notificaciones o desinstale la aplicación.
5. Compatible con Dispositivos Móviles: Asegúrate de que las notificaciones se rendericen correctamente en dispositivos móviles.
6. Límite de Caracteres: Ten en cuenta los límites de caracteres de las notificaciones push, ya que estos límites pueden provocar mensajes truncados y oportunidades perdidas para conectar con los usuarios.
7. Horarios de Envío: Envía las notificaciones en los momentos óptimos, cuando la probabilidad de interacción del usuario sea más alta. Esto, por supuesto, requiere datos geográficos de los usuarios para entender su zona horaria.
8. Contenido Enriquecido: Incorpora notificaciones push enriquecidas para hacerlas visualmente atractivas, lo cual puede ayudar a impulsar un mejor engagement.
9. Pruebas A/B: Realiza pruebas A/B con variaciones de contenido, horarios de envío y CTAs para identificar las notificaciones más efectivas.
10. Monitoreo de Desempeño: Monitorea y revisa regularmente el desempeño de tus notificaciones utilizando métricas clave como tasas de clics, tasas de conversión y tasas de cancelación de suscripción para hacer los ajustes necesarios.

El Proceso de Opt-In del Push Web Explicado

Un requisito previo para el push web es que los usuarios deben hacer opt-in para recibir las notificaciones. Cuando un usuario hace clic en “Permitir” para otorgar su consentimiento, el sitio web obtiene la información de suscripción de ese dispositivo. Esto, sin embargo, significa que si el usuario cambia de dispositivo, deberá otorgar acceso nuevamente.

Una vez que el usuario haya hecho opt-in para recibir las notificaciones, seguirá recibiendo mensajes hasta que haga opt-out o bloquee la entrega de las notificaciones.

Una estrategia para mantener a los usuarios comprometidos con las notificaciones push es proporcionarles un panel útil para gestionar sus preferencias. Slack, por ejemplo, ofrece un centro útil para gestionar las notificaciones push, tanto en web como en móvil. Las preferencias incluyen los tipos de mensajes sobre los que ser notificado, sonidos, si hay una vista previa del mensaje y más.

Compatibilidad de Navegadores para Notificaciones Push Web

CleverTap es compatible con push web para Chrome versión 50 en escritorio y Android, Firefox y Safari (OS X v10.9 y posteriores). Es importante señalar que las notificaciones de Chrome solo funcionan en sitios HTTPS.

Para aprender cómo configurar un canal de push web usando CleverTap, lee nuestra documentación sobre Web Push.

Notificaciones Push Web vs. Otros Canales de Comunicación

Notificaciones Push Web vs. Notificaciones Push de Aplicaciones Móviles

Es importante entender la distinción entre aplicaciones web y móviles, ya que puede representar oportunidades para tu estrategia de push.

Las notificaciones push web son útiles para llegar a usuarios que están actualmente activos en el dispositivo, pero que puede que no estén usando activamente tu sitio web o aplicación web. Las notificaciones push móviles, por otro lado, son especialmente útiles para comprometer a los usuarios incluso cuando no están usando activamente el dispositivo, ya que se entregan directamente en la pantalla de bloqueo del smartphone.

Aunque el push web puede presentarse cuando el usuario vuelve a interactuar con el dispositivo, para entonces los datos ya pueden estar desactualizados o ser inexactos.

Notificaciones Push Web vs. Correos Electrónicos

Comparado con el correo electrónico, el push web presenta una serie de ventajas, incluyendo una tasa de entrega del 100%, ausencia de filtro de spam y un proceso de opt-in sencillo. Además, como el push web generalmente muestra tanto el título como el mensaje directamente al destinatario, la probabilidad de engagement del usuario es mayor.

Mejora la Experiencia del Usuario con Notificaciones Push Web

Ya sea que tu negocio opere una aplicación web, una aplicación móvil, una progressive web app o un sitio web estándar, las notificaciones push web pueden usarse para mejorar la experiencia del usuario.

La Plataforma de Notificaciones Push de CleverTap te permite enviar notificaciones personalizadas y ricas en contenido multimedia para mejorar tus esfuerzos de engagement y comunicación con los clientes. Su tecnología patentada, RenderMax, te ayuda a amplificar tus notificaciones push para dispositivos Android de difícil alcance y mejorar el ROI de tus campañas.