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

¬ŅDesea agregar notificaciones push a su sitio de WordPress? Las notificaciones push le permiten enviar notificaciones a los usuarios incluso cuando no est√°n visitando su sitio web.

En este artículo, le mostraremos cómo agregar fácilmente notificaciones push web a su sitio de WordPress. También hablaremos sobre los mejores complementos de notificaciones push de WordPress y cómo enviar notificaciones push de escritorio y móviles desde su sitio de WordPress.

Agregar notificaciones push web a un sitio de WordPress

¬ŅQu√© es la notificaci√≥n push?

Las notificaciones push son mensajes en los que se puede hacer clic que se muestran en la parte superior del escritorio del usuario o en el área de notificaciones en su dispositivo móvil. Se pueden mostrar incluso cuando el navegador del usuario no está abierto.

notificaciones push web que se muestran en un escritorio

Adem√°s del escritorio, las notificaciones push web tambi√©n funcionan en dispositivos m√≥viles. Esto le permite llegar a sus usuarios a trav√©s de dispositivos con las √ļltimas actualizaciones y ofertas. Las notificaciones push web han demostrado ser una forma muy efectiva de convertir a los visitantes del sitio web en clientes y seguidores leales.

¬ŅPor qu√© agregar notificaciones push web a su sitio de WordPress?

Ya hemos comentado que el 70% de las personas que abandonan su sitio web nunca volver√°n. Es por eso que necesita convertir a esos usuarios del sitio web en suscriptores o clientes.

Puede hacer esto utilizando m√ļltiples canales a la vez. Esto incluye marketing por correo electr√≥nico, redes sociales, marketing m√≥vil o SMS y notificaciones push web.

Si bien las listas de correo electrónico siguen siendo la herramienta de marketing más dominante y efectiva a su disposición, las notificaciones push para nosotros están demostrando ser bastante efectivas.

Aquí es por qué:

  • Los usuarios deben dar su permiso expl√≠cito para recibir notificaciones push. Esto significa que ya est√°n interesados ‚Äč‚Äčen lo que tiene que ofrecer y es m√°s probable que participen en las notificaciones.
  • Las notificaciones push son m√°s cortas y requieren menos atenci√≥n que las actualizaciones de correo electr√≥nico o redes sociales.
  • No hay algoritmo, por lo que se entregan casi el 100% de los mensajes.
  • Los usuarios pueden controlar c√≥mo sus dispositivos muestran notificaciones, pueden posponerlos o apagarlos por completo.
  • No tantas empresas lo est√°n utilizando.

Sitios populares que incluyen Facebook, Pinterest, LinkedIn y muchos otros entienden la importancia y ya est√°n utilizando notificaciones push web.

Estas notificaciones son m√°s atractivas que los SMS, el marketing por correo electr√≥nico y las plataformas de redes sociales. Seg√ļn una encuesta, las notificaciones push tienen una tasa de apertura 50% m√°s alta que el correo electr√≥nico y el doble de tasa de clics.

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

Configuración de notificaciones push web en WordPress con OneSignal

OneSignal es un servicio gratuito de notificaciones push para sitios web de WordPress. Le permite agregar f√°cilmente notificaciones push a cualquier sitio web.

Lo primero que debe hacer es instalar y activar el complemento OneSignal. ¬ŅNecesita ayuda para instalar el complemento? 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 a su barra de administraci√≥n de WordPress. Al hacer clic en √©l, acceder√° a la p√°gina de configuraci√≥n del complemento.

Página de configuración de OneSignal

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 le mostraremos en este tutorial.

Para configurar OneSignal, deberá agregar la clave API y la ID de la aplicación en la configuración del complemento.

Empecemos.

Paso 1: Configuración de notificaciones push de OneSignal

Primero, debe visitar el sitio web de OneSignal y hacer clic en el botón de inicio junto a la opción Web Push.

OneSignal comienza

Se le pedir√° que proporcione su correo electr√≥nico y contrase√Īa para crear una cuenta gratuita. Despu√©s de crear su cuenta, acceder√° al panel de OneSignal.

Agregar aplicación OneSignal

En el tablero, haga clic en el bot√≥n “Agregar aplicaci√≥n” para crear su primera aplicaci√≥n.

Se le pedirá que proporcione un nombre para su aplicación. Aquí puede usar cualquier cosa que lo ayude a identificarlo.

Ingrese un nombre para su aplicación

A continuaci√≥n, deber√° seleccionar una plataforma. Puede seleccionar m√ļltiples plataformas para una aplicaci√≥n. Por ahora, recomendamos seleccionar “Web Push” y hacer clic en el bot√≥n siguiente para continuar.

Elegir plataforma de aplicaciones

En el siguiente paso, se le pedir√° que seleccione un m√©todo de integraci√≥n. Siga adelante y haga clic en el cuadro “WordPress Plugin o Website Builder” y luego seleccione WordPress.

Seleccionar método de integración

Cuando se desplaza un poco hacia abajo, ver√° la secci√≥n “Configuraci√≥n del sitio de WordPress”.

Debe ingresar el nombre de su sitio web, URL y cargar un logotipo. Este logotipo aparecer√° en sus notificaciones, por lo que le recomendamos utilizar el icono de su sitio (favicon) o el logotipo del sitio web.

Configuración del sitio de WordPress

Debajo de eso, verá una palanca que puede activar si su sitio de WordPress no está utilizando SSL / HTTPS. Solo puede enviar notificaciones push web desde una URL HTTPS segura. Si su sitio de WordPress no está usando HTTPS, entonces necesita activar esta configuración e ingresar una etiqueta.

Una etiqueta es b√°sicamente un subdominio alojado en servidores OneSignal que utiliza una URL HTTPS segura. Este subdominio se usar√° para enviar sus notificaciones push.

Si desea configurar HTTPS en su propio sitio de WordPress, consulte nuestro tutorial paso a paso sobre cómo mover WordPress de HTTP a HTTPS. Recomendamos encarecidamente utilizar su propio dominio con SSL que un subdominio en OneSignal, por lo que no estará bloqueado para siempre en su plataforma.

Una vez que haya terminado, haga clic en el botón Guardar para almacenar la configuración de OneSignal. Ahora verá las claves de API que necesita copiar.

Copie las claves de API

Ahora, puede volver a la configuraci√≥n del complemento OneSignal en su sitio de WordPress y cambiar a la pesta√Īa “Configuraci√≥n”. Debe pegar la aplicaci√≥n y las claves de API que copi√≥ anteriormente.

Pegar claves de API

Estas claves API solo le permitirán enviar notificaciones push a través de los navegadores web Chrome y Firefox.

También necesitará Safari Web ID para enviar notificaciones Push a través del navegador web Safari.

Para obtener la clave API de Safari, debe volver al sitio web de OneSignal e ir a la página de configuración de su aplicación. Una vez allí, debe hacer clic en el icono de edición junto a Apple Safari.

Configuración de notificaciones push para Safari

A continuación, se le pedirá que ingrese el título, la URL de su sitio web y, opcionalmente, cargue un icono de sitio.

Configuración de Safari para notificaciones push

Haga clic en el botón Guardar para guardar su configuración. Después de eso, verá su ID web de Safari en la pantalla que debe copiar.

ID web de Safari

Una vez m√°s, vuelva a la p√°gina de configuraci√≥n del complemento en su sitio de WordPress y pegue la ID de Safari Web en la pesta√Īa de configuraci√≥n.

Guardar la configuración del complemento OneSignal

No olvides hacer clic en el botón Guardar para almacenar la configuración de tu complemento.

Ahora puede visitar su sitio web en una nueva pesta√Īa de navegador de inc√≥gnito. Ver√° una ventana emergente de notificaci√≥n push en la parte superior y un icono de notificaci√≥n de campana en la esquina inferior derecha de la pantalla.

Notificación push optin

La ventana emergente de notificaciones push también aparecerá en los navegadores móviles.

Notificación push optin en navegador móvil

Nota: La apariencia del aviso emergente de notificaci√≥n push puede diferir seg√ļn la configuraci√≥n de http / https de su sitio.

Ahora, puede que se pregunte por qué este aviso de notificación push se ve diferente de lo que ve en otros sitios web.

Normalmente, los usuarios ven el aviso de notificación predeterminado del navegador, que se ve así:

Indicador predeterminado del navegador para notificaciones push

Ahora el problema es que, si un usuario hace clic en el bot√≥n “Bloquear”, nunca ver√° un mensaje para suscribirse a las notificaciones. Para solucionar esto, OneSignal viene con dos tipos de solicitud diferentes.

El primero es la ventana emergente de notificaciones push y el otro es el icono de la campana de suscripción. Ambos son totalmente personalizables, y puede cambiarlos para satisfacer sus necesidades.

Paso 2. Personalizar el mensaje emergente de notificación push

La ventana emergente básica de notificaciones push es bastante simple. Utiliza un lenguaje genérico y muestra el logotipo de su sitio. Es posible que desee personalizar eso para hacerlo más personal.

Simplemente cambie a la pesta√Īa de configuraci√≥n en la p√°gina de configuraci√≥n del complemento OneSignal en su sitio de WordPress y despl√°cese hacia abajo a la secci√≥n “Configuraci√≥n de ventana emergente HTTP”.

Personalizar ventana emergente de notificaciones push

Debe hacer clic en el bot√≥n de alternar junto a “Personalizar el texto del mensaje emergente HTTP” y luego comenzar a agregar su propio texto.

No olvides hacer clic en el botón Guardar para guardar tu configuración antes de probar el mensaje.

Paso 3. Personaliza el ícono de notificación de campana

Normalmente, el navegador solicita notificaciones y la ventana emergente desaparece cuando un usuario las descarta.

¬ŅQu√© sucede si los usuarios luego cambian de opini√≥n y desean recibir notificaciones push?

La campana de suscripción en OneSignal le permite seguir mostrando a los usuarios un mensaje para suscribirse a las notificaciones push en su sitio.

El √≠cono de la campana tambi√©n es totalmente personalizable desde la p√°gina de configuraci√≥n del complemento. Simplemente despl√°cese hacia abajo hasta la secci√≥n “Configuraci√≥n de aviso y campana de suscripci√≥n” y active las opciones de personalizaci√≥n que desea cambiar.

Configuración de campana de suscripción

Luego puede desplazarse hacia abajo y cambiar la configuración de cada opción que desee personalizar. Lo ideal sería cambiar los colores del ícono de la campana para que coincidan con los colores de su propio tema.

Personalización del icono de campana

Nota: No utilizamos el ícono de la campana porque creemos que es demasiado intrusivo.

Paso 4. Enviar notificaciones push desde su sitio de WordPress

Por defecto, el complemento OneSignal env√≠a autom√°ticamente notificaciones push para todas las publicaciones nuevas publicadas en su sitio web. Si lo desea, puede desactivar esta funci√≥n desde la p√°gina de configuraci√≥n del complemento en la secci√≥n “Configuraci√≥n de notificaciones autom√°ticas”.

Configuraciones de notificaciones autom√°ticas

También puede enviar manualmente una notificación cuando publique o actualice una publicación. Simplemente edite una publicación o página de WordPress, y verá el cuadro de meta de OneSignal en la columna de configuración del documento a la derecha.

Cuadro de notificación OneSignal en Gutenberg

Si est√° utilizando el antiguo editor cl√°sico, ver√° el cuadro meta como este:

Enviar cuadro de notificación push en el editor clásico

Marque la casilla junto a “Enviar notificaci√≥n en la actualizaci√≥n / publicaci√≥n posterior” y luego haga clic en el bot√≥n actualizar o publicar.

OneSignal ahora enviará su artículo como una notificación automática a todos sus suscriptores.

Enviar una notificación push de bienvenida a los nuevos suscriptores

Tambi√©n puede enviar una notificaci√≥n push de bienvenida a sus nuevos suscriptores. Visite la p√°gina de configuraci√≥n de OneSignal en su √°rea de administraci√≥n de WordPress y despl√°cese hacia abajo a la secci√≥n “Configuraci√≥n de notificaciones de bienvenida”.

Notificación de bienvenida

Ahora, cuando un nuevo se suscribe para recibir notificaciones push, recibirá una notificación de bienvenida en su dispositivo. Dependiendo de su navegador y dispositivo, la notificación puede verse diferente.

Notificación de bienvenida que se muestra en Mac a través de Firefox

Eso es todo, ha agregado correctamente notificaciones push web a su sitio de WordPress.

También puede enviar notificaciones personalizadas desde el panel de la aplicación OneSignal. El proceso es bastante intuitivo y puede seguir las instrucciones en pantalla una vez que inicie sesión en OneSignal.

Otros buenos plugins de notificaciones push de WordPress

Es importante elegir el servicio de notificación push web adecuado desde el principio. Dado que la mayoría de los proveedores intentan encerrarlo en su plataforma, cambiar su servicio de notificación push puede provocar la pérdida de sus antiguos suscriptores. Lo que significa que si cambias, comenzarás desde cero.

Es por eso que le recomendamos que le pregunte al proveedor que elija todas las configuraciones que necesita configurar para que su lista de suscriptores sea port√°til.

En WPBeginner, usamos OneSignal porque tiene las características que necesitamos a un precio razonable.

  • OneSignal ofrece un complemento gratuito de notificaciones push de WordPress con notificaciones push ilimitadas para dispositivos m√≥viles y notificaciones web para hasta 30 mil suscriptores.
  • Incluso su plan gratuito incluye caracter√≠sticas como segmentaci√≥n, localizaci√≥n, seguimiento con Google Analytics y una API robusta.
  • Puede usarlo con todos los principales servicios de marketing por correo electr√≥nico para enviar sus correos electr√≥nicos de boletines a trav√©s de notificaciones push web

WordPress tiene que ver con las elecciones. Aquí hay otros complementos de notificaciones push de WordPress que también puedes probar.

  • PushCrew: conecta su sitio web al servicio de notificaciones push de PushCrew. Ofrecen un plan gratuito limitado a 2000 suscriptores.

  • PushEngage Web Push Notificaciones: este es el complemento de conector para PushEngage, un proveedor de servicios de notificaciones push. Tienen un plan gratuito limitado a 2500 suscriptores, 120 notificaciones y 5000 clics.

  • PushAlert – Notificaciones web push – Le ayuda a conectarse al servicio de notificaciones push web PushAlert. Tambi√©n ofrecen un plan gratuito limitado a 3000 suscriptores.

  • PushAssist: complemento de conector para el servicio de notificaci√≥n push Push web Assist. Su plan gratuito est√° limitado a 2000 suscriptores.

Esperamos que este artículo te haya ayudado a aprender cómo agregar notificaciones push web a tu sitio de WordPress. También puede consultar nuestra guía sobre cómo obtener una dirección de correo electrónico comercial gratuita para su sitio web.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.