Apuesto que mas de una vez te haz topado con la frase (activa las notificaciones para recibir mas contenido) en diferentes sitios web(revistas, periódicos, blogs, tiendas etc). Pues bien, si tienes un blog u otro tipo de sitio web te invito a seguir este tutorial paso a paso en el que vas a aprender a como configurar el plugin onesignal para tener las notificaciones push web.
Si te preguntas a diario ¿Cómo incrementar las visitas en mi blog? o ¿Cómo hacer para que los lectores regresen a tu blog con cada nueva publicación?. Las dos principales formas son; captar sus email y tener configurado las notificaciones push web. Y estas son muy recomendadas. Y aquí aprenderás a hacerlo tanto si tienes un blog con: wordpress, blogger, joomla, shopify o una web programada desde cero.
¿Qué es y para que sirve Onesignal?
Hasta este momento ya debes tener una idea para que sirve(enviar notificaciones push) a visitantes de tu blog; pero ¿Qué es y como usarlo para sacarle buen provecho?. Te lo explico a continuación.
Si bien en el mundo wordpress se suele utilizar plugins para dotar de funciones extra a una web desarrollada bajo este cms. Quiero aclarar que onesignal no solo esta disponible en formato plugin; sino que también puede ser usado en otras plataformas(blogger, joomla, shopify etc) y por si fuera poco nos permite usar las líneas de código personalizado para insertarlas dentro del código web.
Claro está que para ello deberemos darnos de alta en la plataforma y hacer una configuración de acuerdo al contenido de nuestro blog.
¿Porque usar onesignal para enviar notificaciones push?
No es que sea el único en este sector; sino que sin duda es muy sencillo de configurar y hace a la perfección su trabajo(enviar notificaciones web). Esto siempre y cuando esté correctamente configurado, de lo contrario todo habrá sido una pérdida de tiempo.
Por si deseas usar otros plugins para las notificaciones te sugiero los de la siguiente lista:
- PushEngage Web Push Notifications – Descargar.
- Push Notifications for WordPress by PushAssist – Descargar.
- Push Monkey Pro – Descargar.
- Smart Notification WordPress Plugin – Descargar.
- Free Web Push Notification Tool by iZooto – Descargar.
Esta lista no está ordenada según su buena funcionalidad; muy por el contrario, está hecha para brindarte otras alternativas si no deseas usar onesignal. Deja tu comentario si deseas que cree un tutorial sobre los plugins antes mencionados.
¿Cómo agregar notificaciones push a WordPress gratis?
Sin duda esto es lo que estás esperando. Aprende a como configurar notificaciones push en wodpress con y sin plugin. Para no hacer mas extenso doy inicio al tutorial para configurar onesignal paso a paso.
Antes de iniciar. Si te resulta muy útil este tutorial no dudes en compartirlo con otras personas interesadas en este tipo de contenido.
El paso a paso para las notificaciones push web
Veamos que necesitaremos para dar inicio:
- Un email nuevo(hotmail, yahoo o gmail)
- Un sitio web(dominio propio, o sub dominios)
- Conocimiento básico de html
Vamos al sitio web oficial de onesignal. Nos damos de alta. Rellenar los datos de registro y confirmar para dar inicio a la configuración.
El proceso de registro es similar a crearte una cuenta en cualquier red social o plataforma online. No debes tener ningún tipo de problema. Por lo que obviaré este paso a paso.
En este apartado quiero hacer una aclaración. Este tutorial esta echo usando el código personalizado para pegarlo en nuestra web; más si deseas hacerlo con el plugin te comparto un video al final del articulo.
Ya que te has dado de alta en el sitio web es momento de configurar las tan famosos y valiosas notificaciones push web. Veamos
Configurando las notificaciones push dentro del dashboar de onesignal
Doy por hecho que ya tienes iniciada la sesión de tu cuenta luego de haber realizado la confirmación de la cuenta. Y te debe salir una ventana similar a la siguiente
Solo debes ingresar el nombre de tu sitio web o tienda y seleccionar al opción de web push. Luego darle a continuar(Next configure your platform).
En este primer apartado no debes hacer nada y dejar lo que el sistema de recomienda. Sigue el tutorial con la siguiente imagen.
Completamos los campos que nos pide en la siguiente ventana.
- Ingresamos el nombre del dominio
- La url del dominio
- Subir la imagen(logo) del sitio web
La imagen puedes subirla desde tu pc o también usar la url de la misma que tienes en la biblioteca de tu blog.
Por lo demás dejamos tal cual está y seguimos con la siguiente configuración.
Este apartado es el que vamos a configurar las notificaciones, personalizar el tipo de texto con el que vamos a incentivar que los visitantes quieran activar las notificaciones push.
Para ello damos click donde dice(opens slide prompt) cuadro verde. Se va a abrir la siguiente ventana. Ahí es donde vas a personalizar el mensaje de la notificación que verán los visitantes de tu web.
En esta ventana es donde daremos forma al texto de la notificación y también los botones. Para ello debes activar la opción que está seleccionada color rojo.
Seguido se te va a activar las opciones para personalizar el texto. Ver siguiente imagen.
El resultado final será tal como se muestra en la siguiente ventana.
Ya que haz hecho todo lo antes indicado solo queda darle al botón save(guardar). Y continuar con los últimos ajustes para tener bien configurado las notificaciones.
En esta ventana solo personalizamos el titulo y el mensaje de la bienvenida por haberse suscrito a tu sitio web. Y activas el link para que se dirijan a la web.
Y nos dirigimos al apartado final en el que no haremos nada mas que darle al botón save. Que luego activará la ventana donde nos dará el código personalizado para pegar en nuestra web.
Si haz seguido a detalle el tutorial habrás llegado con éxito a este apartado en la nueva ventana que te mencioné en el párrafo anterior. La pagina también te ofrece la opción de descargar el código; pero con copiarlo es suficiente.
Este código lo pegaremos en el archivo header.php si estás usando wordpress. Y te vas a dirigir específicamente a la linea de código </head>. Pegarlo ahí y darle a guardar. Ver imagen.
Si por el contrario usas otro cms(joomla, shopify, blogger, etc) debes seguir el mismo proceso. Pegar el código antes de la etiqueta </head> y guardar los cambios.
Recomendable antes de hacer este proceso de forma manual es aplicarlo en un tema hijo ya que al momento que el theme reciba nuevas actualizaciones no se perderán los ajustes realizados referentes a las notificaciones push con onesignal.
Si lo haces bien entonces ya tendrás configurado e instalado las notificaciones web push con onesignal.
Si no deseas hacer este proceso; y usar plugin en wordpress; entonces solo debes seguir el video que te dejo a continuación.
Link para descargar el plugin: Descarga abajo.
Ahora solo te queda probar las notificaciones ya sea en tu móvil o pc. Es así como se configuran las tan conocidas notificaciones push en una web con wordpress u otro cms, pagina web. Si te gustó esta guía no dudes en compartirla para ayudar a más personas.
