Cómo agregar notificaciones web push a su sitio de WordPress

¿Ha notado las notificaciones push de la web utilizadas en sitios web populares como Facebook? Recientemente, uno de nuestros lectores preguntó si era posible agregar notificaciones web push en WordPress. Por supuesto que es. En este artículo, le mostraremos cómo agregar una notificación de inserción web a su sitio de WordPress.

¿Por qué agregar notificaciones web push a su sitio de WordPress?

Las notificaciones push de la web son mensajes seleccionables que se muestran en la parte superior del escritorio del usuario. Se pueden mostrar incluso cuando el navegador del usuario no está abierto.

Aparte de la computadora de escritorio, las notificaciones de inserción web también funcionan en los navegadores móviles.

Los sitios populares que incluyen Facebook, Pinterest, LinkedIn y muchos otros ya están usando las notificaciones push de la web. Está demostrando ser más atractivo que SMS, marketing por correo electrónico y otras redes sociales. Según una encuesta, las notificaciones push tienen una tasa de apertura del 50% en dispositivos móviles.

Esto significa una audiencia más comprometida para su sitio de WordPress y un aumento significativo en sus visitas de página generales y visitantes recurrentes.

Dicho esto, echemos un vistazo a cómo agregar notificaciones web push a un sitio de WordPress.

Configurando Notificaciones Web Push en WordPress con OneSignal

OneSignal es un servicio gratuito que le permite agregar notificaciones automáticas a cualquier sitio web, web o aplicaciones móviles..

Lo primero que debe hacer es instalar y activar el complemento OneSignal. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, el complemento agregará un nuevo elemento de menú etiquetado como OneSignal en la barra de administración de WordPress. Haciendo clic en él te llevará a la página de configuración del plugin..

La página de configuración está dividida en pestañas de Configuración y Configuración. La pestaña de configuración es en realidad documentación detallada sobre cómo configurar las notificaciones push de OneSignal en WordPress. Tiene los mismos pasos que te mostraremos en este tutorial..

Para configurar OneSignal, deberá agregar diferentes claves de API e ID de aplicación en la configuración del complemento.

Empecemos.

Paso 1: Crear las claves de Google

Primero necesitas visitar el sitio web de Google Services Wizard..

Simplemente proporcione un nombre para su aplicación y agregue un nombre de paquete de Android. OneSignal no usa el nombre del paquete de Android, pero es un campo obligatorio.

A continuación, elija su país y región, luego haga clic en el botón 'Elegir y configurar servicios'.

Esto lo llevará a la siguiente pantalla donde se le pedirá que seleccione los servicios de Google que desea usar con su aplicación. Debe hacer clic en el botón 'Habilitar mensajería de Google Cloud'.

Ahora verá su clave de API de servidor y su ID de remitente.

Debe copiar su ID de remitente y pegarlo en la pestaña Configuración del complemento de WordPress en el campo Número de proyecto de Google.

También debe copiar la clave de la API del servidor y pegarla en un archivo de texto en su computadora. Necesitará esta clave API más adelante en este tutorial..

Paso 2: Configuración de notificaciones push de Chrome y Firefox

Ahora configuraremos notificaciones push en Chrome y Firefox. Primero debe visitar el sitio web de OneSignal y crear su cuenta gratuita.

Una vez que haya creado su cuenta, debe iniciar sesión y hacer clic en el botón 'Agregar una nueva aplicación'.

Se le pedirá que ingrese un nombre para su aplicación. Puede usar el nombre que desee y luego hacer clic en el botón 'Crear' para continuar.

En la página siguiente, se le pedirá que seleccione una plataforma para configurar. Debe seleccionar 'Empujar sitio web' y luego hacer clic en el botón siguiente para continuar.

Después de lo cual se le pedirá que seleccione la plataforma del navegador. Verá Google Chrome y Mozilla Firefox en una casilla y Safari en otra casilla.

Tienes que hacer clic en el cuadro de Google Chrome y Mozilla Firefox. Le mostraremos cómo configurar Safari, más adelante en este artículo.

Haga clic en el siguiente botón para continuar..

En el siguiente paso, se le pedirá que ingrese la URL de su sitio de WordPress, la clave de la API del servidor de Google y la URL para su imagen de ícono de notificación predeterminada.

Si su sitio web no admite SSL / HTTPS, debe marcar la casilla junto a 'Mi sitio no es completamente HTTPS' opción. También puede configurar SSL en su sitio web si lo desea, pero no es obligatorio.

Google Chrome no es compatible con las notificaciones de inserción web para sitios web no ssl o http. OneSignal resuelve este problema al suscribir usuarios a un subdominio en su propio dominio https.

Comprobación 'Mi sitio no es completamente HTTPS' La opción mostrará las opciones de respaldo HTTP. Deberá elegir un subdominio para su aplicación e ingresar el número de proyecto de Google o la identificación del remitente que generó en el primer paso.

Haga clic en el botón Guardar para continuar. Ahora puedes salir de este cuadro de diálogo. Se le indicará con un aviso que su configuración aún no está completa y que puede reanudarse más tarde. Haga clic en Sí para cerrar el cuadro de diálogo..

Paso 3: Obteniendo las teclas de OneSignal

Ahora necesita obtener las claves de OneSignal para su sitio web. Desde el panel de la aplicación, haga clic en Configuración de la aplicación..

Esto te llevará a la página de configuración de tu aplicación. Debe hacer clic en la pestaña Claves e ID..

Esto mostrará su ID de aplicación de OneSignal y la clave de la API de descanso.

Debe copiarlos y pegarlos en la pestaña de configuración del complemento de OneSignal WordPress en su sitio.

Paso 4: Configuración de las notificaciones push de Safari Web

Recuerda que omitimos la configuración de notificaciones push de la web de Safari. Ahora te mostraremos cómo configurar notificaciones web push de Safari.

Inicie sesión en su cuenta de OneSignal y vaya a la página de configuración de la aplicación. Desplácese hacia abajo a las plataformas web y haga clic en el botón de configuración junto a Apple Safari.

Aparecerá un cuadro de diálogo donde se le pedirá que ingrese el nombre de su sitio y la URL del sitio..

Entonces necesitas marcar la casilla junto a 'Me gustaría subir mis propios iconos de notificación' opción.

Ahora verá una opción para cargar diferentes tamaños de iconos. Estas son imágenes cuadradas, utilice Photoshop o cualquier programa de edición de imágenes para crear iconos en los tamaños exactos.

Haga clic en los botones elegir archivo para cargar todos sus iconos.

Haga clic en el botón Guardar y luego cierre el cuadro de diálogo.

Actualice la página de Configuración de la aplicación y desplácese hacia abajo hasta la sección de Plataformas Web. Esta vez verá 'ID de Web' en Apple Safari.

Debe copiar este ID de web y pegarlo en la pestaña Configuración del complemento OneSignal en su sitio.

Eso es todo, ha configurado correctamente las notificaciones push de la web de OneSignal para su sitio de WordPress.

Paso 5: probar las notificaciones de inserción web en su sitio de WordPress

De forma predeterminada, el complemento OneSignal agregará un ícono de suscripción a su sitio de WordPress. Visite su sitio web en un navegador compatible y luego haga clic en el botón suscribirse.

Verá el mensaje predeterminado "gracias por suscribirse".

Ahora inicie sesión en la cuenta OneSignal. Haga clic en el nombre de su aplicación y luego en Configuración de la aplicación.

Desplácese hasta la sección de plataformas web y haga clic en el botón de configuración junto a Google Chrome y Firefox.

Verá la pantalla de configuración de la plataforma que completó anteriormente. Simplemente haga clic en el botón Guardar y luego haga clic en Continuar.

Se le pedirá que seleccione el SDK de destino. Necesitas seleccionar WordPress y luego hacer clic en Siguiente.

Ya que solo tiene un suscriptor en el momento en que su ID de suscriptor se completará automáticamente.

Haga clic en el siguiente botón y llegará al 'Configuración de prueba' paso.

Haga clic en 'Enviar notificación de prueba' botón.

One Signal ahora enviará una notificación de inserción web.

La apariencia de las notificaciones puede variar según el navegador que utilizó para suscribirse. Cuando aparezca la notificación en la pantalla de su computadora, debe hacer clic en ella.

Le llevará a la pantalla de confirmación, que muestra que ha configurado correctamente las notificaciones push de la web de OneSignal para su sitio web.

Vuelva a la pantalla de configuración en el sitio web de OneSignal y haga clic en 'Verificar estado de notificación'botón.

Ahora verá otro mensaje de éxito que indica que ha agregado con éxito notificaciones web push a su sitio de WordPress.

Cómo enviar notificaciones web push en WordPress con OneSignal

El complemento de notificaciones push de la web de OneSignal en su sitio de WordPress enviará automáticamente una notificación a todos los suscriptores cuando publique una nueva publicación..

También puede enviar notificaciones manualmente desde su Panel de aplicaciones de OneSignal. Inicie sesión en su cuenta OneSignal y haga clic en el nombre de su aplicación.

En el menú de la izquierda, haga clic en el botón 'Nuevo mensaje'.

Esto te llevará a la nueva pantalla de mensajes. Puedes ingresar un título y algún contenido para tu notificación..

También puede hacer clic en Opciones, Segmentar, Programar / Enviar más tarde para personalizar aún más su notificación de inserción web.

Por ejemplo, puede vincularlo a una página en particular en su sitio, enviarlo a un segmento particular de sus usuarios o programarlo para que se envíe a una hora específica.

Esperamos que este artículo te haya ayudado a agregar la notificación de inserción web a tu sitio de WordPress. También puede querer ver nuestra lista de los mejores complementos de membresía para WordPress.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..