¿No sería genial contar con un sistema en tu web que permitiera a tus usuarios saber cuándo hay contenido nuevo sin necesidad de visitar tu página, simplemente con un aviso clickable? ¡Igual que hacen, entre otros, Facebook o Twitter! Pues puedes, gracias a las notificaciones push. ¡Vamos a ver cómo!

Qué son las notificaciones push

Las notificaciones push son esos mensajes que surgieron con los móviles, en los que te muestran diversos avisos relacionados con el sistema operativo o con algunas de las aplicaciones.

El aviso de nuevo email, whatsapp, de una actualización, incluso de llamadas perdidas, todo eso son notificaciones push.

Pero es que además las notificaciones push ya dieron el salto a las aplicaciones web, y seguro que te has encontrado con ellas más de una vez: avisos que aparecen en tu escritorio aunque no tengas el navegador abierto y sobre los que puedes clickar para ir a la web en cuestión.

Seguro que las has visto alguna vez, especialmente si tienes cuentas en redes sociales. Son algo así:

Notificaciones push en tu WordPress

Sé lo que estás pensando. Lo quieres. Quieres que tus usuarios reciban en su escritorio o en la pantalla de su smartphone un mensaje cuando haya nuevo contenido en tu web. Un aviso sobre el que puedan clickar y acceder directamente a tu web. Y lo sé porque yo también lo quiero. 🙂

Sin necesidad de email marketing, ni de publicaciones de redes sociales, ni nada de nada: de tu web a su escritorio.

Pues nada te lo impide. No sólo es posible, sino que también es fácil gracias al plugin OneSignal Free Web Push Notifications.

Cómo configurar las notificaciones push en tu web con OneSignal

Nada más activar el plugin verás una nueva entrada en el menú de administración llamada OneSignal Push. Pinchando en él llegarás a la pantalla de configuración del plugin.

En esta misma pantalla, en la parte de abajo, podrás personalizar (básicamente, traducir) los diferentes mensajes que la aplicación mostrará a los usuarios. Eso no tiene secreto así que no pararé en ello. Seguimos.

Verás que la página de opciones tiene dos pestañas, una llamada Setup y otra Configuration. La primera de ellas, Setup, contiene instrucciones detalladas sobre la configuración de la aplicación, y es lo mismo que vamos a ir viendo en esta guía, así que nos centraremos en la de Configuration. ¡Vamos allá!

Crear las Google Keys

Lo primero que necesitamos es crear las claves API de Google, que nos servirán para las notificaciones push en dispositivos Android. Para ello acudimos al asistente de Google Developers.

La primera pantalla es muy sencilla, ya que sólo pide dos campos:

• Nombre para la aplicación, que puedes ponerle el que tú quieras, es para que tú mismo sepas cuál es cuál si tienes varias creadas. El nombre de la web puede ir bien, si te parece.
• Un nombre de paquete Android. OneSignal no hace uso de este campo, pero es obligatorio rellenarlo, así que puedes poner lo que te dé la real gana. Eso sí, ha de ser en minúsculas y usando un punto («.») como separación.

A continuación aparece una nueva opción para que pongas el país, y listo. Este paso está superado. En la siguiente pantalla te pregunta qué servicios quieres usar con tu aplicación. La respuesta correcta es Enable Cloud Messaging Button.

Así que pulsamos y botón y ¡voilà! Ya hemos conseguido nuestra Server API Key y nuestro Sender ID. La clave API la usaremos más adelante (no cierres la pestaña para tenerla a mano), de momento cogemos el Sender ID y nos vamos a la pantalla de configuración del plugin, abajo del todo, donde dice Use my own Google Project Number. Activamos y guardamos, de forma que aparece arriba del todo el campo donde hemos de pegar el número.

Configurando las notificaciones push en Chrome y Firefox

Ahora tocan los navegadores. Para ello necesitamos una cuenta (gratuita) en OneSignal, así que vamos a su web y abrimos una. Una vez dentro, pulsamos el botón Add a new app. Puedes usar para ella el nombre que prefieras.

A continuación aparece una ventana preguntándote qué tipo de aplicación quieres crear. Por supuesto, la que quieres crear es una Website Push, así que ése es el botón que pulsamos, y seguimos adelante.

En la siguiente pantalla se te muestra una disyuntiva: configurar Firefox y Chrome o configurar Safari. Elige Firefox y Chrome. No te preocupes porque también vamos a configurar Safari más adelante.

En la pantalla a continuación rellenas la URL del sitio web y la del icono que se usará para las notificaciones, así como la clave API que hemos obtenido antes de Google (aparecerá el campo al marcar la opción I’d like to use my own web push key).

Si tu sitio no soporta SSL (no tienes una dirección «https://») entonces tienes que marcar la casilla My site is not fully HTTPS, aunque lo más probable es que se marque automáticamente al rellenar el primer campo, el de la URL.

Google Chrome no soporta notificaciones push para sitios que no sean HTTPS, pero OneSignal soluciona el problema suscribiendo al usuario a un subdominio de su propio servidor seguro, a través del cual le llegan las notificaciones. Como ves han pensado en todo.

Si es tu caso, te pedirán que elijas subdominio (por defecto utiliza tu nombre de dominio) y, de nuevo, el Google Project Number. La URL completa del subdominio (https://subdominio.onesignal.com/) la tienes que poner en el campo que hay para ello en la pantalla de configuración del plugin.

El siguiente paso es escoger el SDK objetivo. Si te has fijado en las opciones seguro que tienes muy claro cuál es la correcta: exacto, es WordPress.

Y por fin llegamos a una pantalla en la que nos facilitan nuestra Rest API Key y nuestra App ID. Con ellas vamos a las opciones de configuración del plugin y las colocamos en su sitio.

Desde este momento ya puedes ir a tu sitio web (usando Firefox o Google Chrome) y recibirás una notificación. Puedes suscribirte y ¡Enhorabuena, ya tienes tu primer suscritor para tus notificaciones push! (aunque seas tú mismo).

Las notificaciones push para Safari

Recuerda que aún teníamos que configurar las notificaciones push para Safari, que pasamos antes por alto. Ahora será más fácil, ya que la aplicación está creada (y funcionando).

En tu panel de control de OneSignal (en su web, no en la tuya) pinchas en App Settings y verás una lista de las plataformas disponibles. ¿Las quieres todas, verdad? Sí, conozco esa sensación. 😉 Por cierto, que la de Android la puedes configurar ya. Sólo tienes que pulsar en Configure y pegar la Server API Key que conseguiste antes en la web de Google Developers.

Pero vamos a por Safari. Sólo tienes que pinchar en Configure al lado de Apple Safari. La configuración es sencilla, y similar a la anterior. Si quieres subir tus propios iconos tendrás que generarlos en los tamaños exactos que te pide. Puedes usar para ello Photoshop o cualquier otro software de edición de imágenes.

Una vez hecho esto (fácil, ¿verdad?) verás un código Web ID en el listado, junto al icono de Safari. Sólo tienes que ponerlo en el apartado correspondiente de la configuración del plugin.

Enviando notificaciones push

Sé que no puedes esperar, que estas deseando enviar tu primera notificación push… ¡Pues vamos allá!

Las notificaciones se envían desde el panel de control de OneSignal. No sólo eso, sino que podrás programarlas (para que se envíen, por ejemplo, cuando se publique un contenido también programado en tu WordPress), realizar tests A/B y muchas otras cosas. Te recomiendo que le des un repaso al panel de administración de OneSignal.

Pero de momento donde tenemos que ir es a New Message. Puedes pulsar en Add Languages (arriba, a la derecha) si quieres enviar los avisos en más de un idioma. Las notificaciones se mostrarán en función del idioma del navegador o del sistema operativo (en caso de notificaciones a móviles).

Tendrás que rellenar el título y el contenido, tanto en español (o los demás idiomas que hayas escogido) como en inglés (que no tiene por qué estar en inglés). Este último se mostrará a los usuarios que tengan configurados idiomas no seleccionados.

Por último despliegas Options, y ahí puedes configurar prácticamente todo lo concerniente a la notificación push, según el sistema operativo o el navegador del receptor. Una virguería.

Quien haga click en la notificación irá a tu sitio web, pero si quieres que vayan a una URL concreta (que no tiene por qué ser de tu site) tienes que activar la opción Launch URL? e introducirla ahí.

¿No es genial poder llegar a tu público cuando quieras, sin tener que esperar a que sean ellos los que vayan a tu web? Y con un sistema completo de estadísticas (enviados, recibidos, clicados…). Eso sí, no abuses, ya sabes: Un gran poder conlleva una gran responsabilidad.