Home Canales Descubre todas las posibilidades con web push notifications

Descubre todas las posibilidades con web push notifications

web-push-notification

En esta entrada te quiero hablar sobre este canal que tantas alegrías me ha dado. Voy a mostrarte las ventajas de este canal directo, cómo integrarlo en tu web y todas sus posibilidades de configuración.

Con este tipo de notificaciones obtendrás altos ratios de clics, un buen comportamiento en página, altos ratios de conversión y un gran nivel de personalización en función de tu implementación.

Actualmente están muy extendidas las notificaciones mediante app. Sin embargo, las notificaciones web son pocas las plataformas de e-commerce o blogs que las tienen implementados y no por su complejidad, ya que es muy sencillo de implementar. Por otro lado, grandes empresas como Facebook, Ebay, Spotify y otras las usan a diario para comunicarse con sus usuarios.

¿Qué son las website push notifications?

Seguramente que conoces las notificaciones por app, son esos 20 mensajes que nos encontramos en nuestro móvil cuando nos levantamos por la mañana con comunicaciones de lo más variopintas y nuestra acción con los ojos entre cerrados es borrarlas todos de golpe… Bueno no te voy hablar de este tipo de notificaciones.

Las website push notifications no necesitan que el usuario tenga nuestra app, ya que son mediante navegadores, simplemente tiene que haber visitado nuestra web y haber aceptado este tipo de comunicación. Lo vamos a ver en más profundidad.

Puedes comunicarte con tu usuario tanto por desktop como por mobile. Podrás informar a tus usuarios sobre el estado del pedido, una nueva entrada en tu blog o incluso notificar a los usuarios que han abandonado el carritos de la compra con alguna oferta.

¿Cómo funcionan las notificaciones web?

Su funcionamiento es realmente sencillo. Cuando tenemos implementado el sistema de notificaciones en nuestra web, a nuestro usuarios les aparece la siguiente notificación:

web push notification chrome

Cuando el usuario hace clic en “Permitir” ya es posible comunicarnos con este mediante notificaciones. ¿Te gustaría saber el ratio de Opt-in? Pues puedes obtener una media del 50%, te puede parecer exagerado por lo que te muestro un gráfico. Vale más una imagen que mil palabras.

opt in web push notifications

Cuando le llega una notificación al usuario le llega de la siguiente forma en su escritorio. En desktop no es necesario que el usuario esté navegando en tu página sólo es necesario que tenga el navegador abierto, por su parte en mobile no es necesario que tenga el navegador abierto.

ejemplo de notificación web

La secuencia en un dispositivo móvil sería la siguiente:

pus notifications web mobile

¿Cómo implementar un sistema de notificaciones web?

En este apartado tienes dos opciones. La primera realizar toda la implementación y desarrollo por tu cuenta, ya que los navegadores te permiten esta opción. Es la opción más compleja pero con la que tendrás más libertad. En este apartado vas a necesitar conocimientos informáticos avanzados o contar con un equipo de I.T.  Te voy a proporcionar todos los enlaces con información de cómo realizar este desarrollo:

La segunda opción y más rápida es adquirir una herramienta que nos quite el trabajo anterior y podamos comenzar a trabajar el canal. Yo las dos herramientas que he probado y me han funcionado bastante bien son las siguientes, a nivel de atención y funcionalidad. Comentarte que no son gratuitas pero tienen un periodo de prueba o un máximo de suscriptores a partir de cual comenzaran a cobrarte.

De las dos opciones anteriores de las más conocidas es pushcrew. Algo muy importante es que ambas herramienta cuentan con la opción de conexión mediante API para tener un mayor control. Es la opción intermedia de las dos que te he planteado. Aquí tienes la documentación:

Voy a explicarte la implementación mediante la herramienta de aimtell. ¿Por qué he elegido esta? Pues la verdad es que son muy buenas las dos, simplemente que la de aimtell es de las últimas que he probado y estoy bastante satisfecho. Sin embargo, la configuración es similar en ambas.

Configurando aimtell en la web

Lo primero de todo es crearnos una cuenta en aimtell. Cuando tengamos nuestra cuenta el siguiente paso es incluir nuestra web, para ello nos dirigimos al apartado “Websites” y hacemos clic en “Add Website”. Completamos los datos que nos solicita y hacemos clic en “Create Site”.
Websites aimtell dashboard

El siguiente paso es descargarnos el archivos que nos indica e implementar el “Tracking Code” en nuestra web.

configuración aimtell notificación web

Cuando nos descargamos el archivo y lo descomprimimos, tenemos que subir el .js y el .json a nuestro root domain. Para comprobar que lo hemos realizado correctamente tenemos que acceder a las siguientes URLs:

  • http://tuweb.com/aimtell-worker.js
  • https://tuweb.com/aimtell-manifest.json

Si no te devuelven un 404 es que está correcto. Lo último es incluir en nuestro site el código de “View Tracking Code”. Que sería el siguiente:

Este código lo podemos incluir de forma rápida y fácil con Google Tag Manager. La etiqueta quedaría de la siguiente forma:

Push Notications Web Google Tag Manager

En caso de que utilices WordPress o Shopify, la herramienta cuenta con un plugin para hacerlo todo mucho más sencillo.

Si todo ha ido bien cuando volvamos a entrar en nuestra web nos aparecerá la siguiente notificación.

solicitud notificacion web chrome

¿Qué puede hacer por ti aimtell?

Bueno ahora es cuando empieza el baile. A partir de este punto ya podemos comenzar a tener suscriptores. Para poder ver el número de suscriptores que llevamos tenemos que dirigirnos al apartado “Subscribers” en nuestro panel.

Si hacemos clic en uno de los suscriptores veremos toda la información que recoge por defecto la herramienta como ciudad, país, dispositivo y las características, navegador, las páginas que ha estado visitando el usuario, etc. Desde este panel puedes enviarle una notificación a este usuario en “Send Push Notification”.

datos push notification

Dentro dentro del panel si nos dirigimos al apartado “Tools” podremos configurar que se envíe de forma automática una push de bienvenida a nuestros nuevos suscriptores. Además, contamos con otro apartado dentro de “Tools” el cual nos permite sincronizar las notificaciones con nuestro archivo RSS, esto permitirá que se envíe una notificación a nuestros suscriptores siempre que publiquemos un nueva entrada en nuestro blog.

RSS Feed Notifications aimtell dashboard

Exprimiendo todo el potencial de las notificaciones web

Una de las funcionalidades más interesante de aimtell es la posibilidad de medir eventos y enriquecer la información del usuario mediante atributos personalizados.

Configurar eventos en aimtell

Los eventos nos permiten medir comportamientos en la web que para nosotros son importante como que el usuario se ha registrado, ha comprado, el pago ha dado error, ha completado un formulario, etc.

Imaginemos que queremos medir siempre que a uno de nuestros suscriptores su reserva o compra le dé error. Para ello tenemos que incluir el siguiente código cuando se produzca dicho error en la web.

Si contamos con Google Tag Manager en nuestra web, la implementación es mu sencilla, quedaría de la siguiente forma.

Medir el error pago push notification

Para más información sobre la configuración de eventos haz clic aquí.

Atributos personalizados

Los atributos personalizados nos permiten enriquecer la información de cada suscriptor, es decir, podemos enviar información útil del usuario como nombre, número de compras o reservas, precio medio, etc. Esto nos permitirá enviar notificaciones personalizadas y segmentadas. Aquí tienes más información de este apartado.

Para enviar estos atributos personalizados tenemos que modificar el código que hemos insertado al comienzo el “Tracking Code“. La línea que tendríamos que incluir sería la siguiente.

En Tag Manager la implementación es muy sencilla.

Google Tag Manager pust notification

¿Cómo se ve nuestro perfil de usuario con la implementación de los dos apartados anteriores?

Cuando hemos implementado eventos y atributos, aimtell irá agregando estos datos a cada perfil de nuestros usuarios por lo que tendremos mayor información sobre el comportamiento de nuestro suscriptor. Simplemente tenemos que ir a nuestro panel al apartado “Subscribers” y hacemos clic en uno de ellos.

aimtell dashboard profile

Como puedes ver en la imagen anterior, tenemos la información detallada de las variables que hemos configurado y tenemos un seguimiento de los eventos que ha ido activando el usuario. Puedes navegar en estas secciones más en detalle en la parte superior, “Events”, “Custom atributes”, etc.

Enviando nuestra primera push segmentada y personalizada

Que mejor que un ejemplo para entender las cosas. Imaginemos que deseamos enviar una notificación a a usuarios que tengan más de una compra y que no han comprado en un mes. Además, la notificación irá personalizada a su nombre y la URL de destino estará configurada con una variable para personalizar la landing al usuario.

  1. Creamos el segmento. En nuestro panel nos dirigimos al apartado “Segments” y luego “Add segment”.

segmentando push aimtell

2. Creamos la push. Vamos al apartado “Notifications”, “Manual notifications” y “New campaing”.

Notificación personalizada

2.1 En “Recipientes” seleccionamos el segmento de suscriptores a los que vamos a enviar la notificación.

2.2 El “Title” lo hemos personalizado con el nombre de usuario. En este enlace tienes información sobre cómo usar variables.

2.3 También hemos personalizado el mensaje o “body” con la última categoría de producto que compro el usuario.

2.4 Puedes usar variables en tus URLs, de esta forma tu sistema puede recoger esta información y ofrecer información personalizada al usuario.

2.5 Puedes incluir UTMs de forma automática seleccionando este apartado, “Include UTM Params”

Automatización de notificaciones

Este es uno de los apartados más útiles dentro de esta herramienta, ya que te permite enviar notificaciones de forma automática cuando ocurre una acción en tu web, como puede ser enviar una push cuando un usuario abandone el carrito de la compra, cuando ha completado una acción, ha tenido un problema con la pasarela de pago, etc.

Para crear este tipo de notificación nos dirigimos a “Notifications” y luego hacemos clic en “Triggered Notifications”. En nuestro caso vamos a crear una push para los usuarios que han tenido un problema con el pago.

Automatización de notificaciones

Lo siguiente sería configurar el activador o “trigger” que desencadena el envío de la notificación. Se configura mediante los eventos que tengamos configurados, por ejemplo vamos a utilizar el evento que hemos credo al principio del post, en el cual se mide cuando la pasarela de pago devuelve error.

Push Notifications Trigger

Por otro lado, podemos configurar el “Delay”, básicamente es el margen que queremos que pase entre la acción y el envío.

Espero que esta información sobre la web push notification sea de utilidad y te ayude a mejorar la comunicación con tus usuarios. Sinceramente es un canal muy útil con un coste muy bajo y unos resultados muy buenos. Además, es un canal poco explotado para lo sencillo que es implementarlo.

Ya sabe, cualquier pregunta o sugerencia no dudes en dejar tu comentario.

Dejar un Comentario