Las notificaciones en la pestaña del navegador son una de esas características simples pero efectivas que mantienen a los visitantes comprometidos en silencio y los animan a regresar.
Por ejemplo, WPForms utiliza esto para recordar amablemente a los usuarios que regresen y completen su compra cuando cambian de pestaña. Es sutil, no intrusivo y puede aumentar las tasas de conversión en tu sitio.
En esta guía, te mostraremos cómo agregar fácilmente estas notificaciones de pestaña que llaman la atención a tu sitio de WordPress. 🙌
Una vez que lo pruebes, verás por qué es una herramienta tan útil para mantener a los visitantes enfocados y regresando.
💡Respuesta Rápida: Cómo agregar notificaciones en la pestaña del navegador
La forma más segura de agregar notificaciones en la pestaña del navegador es usando el plugin WPCode. Te permite insertar JavaScript personalizado sin editar los archivos del tema.
Esta guía cubre tres tipos específicos:
- Tipo 1 (Conteo de notificaciones): Muestra un número dinámico en el título de la pestaña (por ejemplo, “(1) Nuevo mensaje”) para simular actividad.
- Tipo 2 (Alerta de favicon): Cambia el ícono de tu sitio por una imagen diferente para captar la atención visual cuando el usuario cambia de pestaña.
- Tipo 3 (Mensaje personalizado): Cambia el título de la página a una frase de texto como “¡No olvides echar un vistazo!” para atraer a los visitantes de vuelta.
¿Qué es una notificación en la pestaña del navegador?
Una notificación en la pestaña del navegador es un mensaje que aparece en la pestaña de tu sitio web cuando uno de nuestros visitantes está mirando un sitio diferente en su navegador.
Al agregar una función de notificación en la pestaña del navegador en tu sitio web de WordPress, puedes captar la atención del usuario en el momento en que abre otra pestaña para abandonar tu página.
Por ejemplo, puedes cambiar el favicon de tu sitio web, animarlo, escribir un mensaje personalizado o simplemente hacer parpadear la pestaña.
Si tienes una tienda en línea, las notificaciones en la pestaña del navegador realmente pueden ayudarte. Estas notificaciones recuperarán a los clientes distraídos, reducirán las tasas de abandono de carritos y aumentarán la participación del cliente.
Usando esta función, puedes alertar a tus clientes sobre el abandono del carrito o incluso ofrecer un descuento si devuelven su atención a tu sitio.
Aquí tienes un ejemplo de una notificación en la pestaña del navegador.
Dicho esto, te mostraremos cómo agregar fácilmente diferentes tipos de notificaciones en pestañas del navegador en WordPress.
Puedes usar los enlaces a continuación para saltar al método de tu elección:
- Instala WPCode para agregar notificaciones en pestañas del navegador
- Tipo 1: Mostrar nuevas actualizaciones como notificación en pestaña del navegador
- Tipo 2: Cambiar favicons como notificación en pestaña del navegador
- Tipo 3: Cambiar el título del sitio como notificación en pestaña del navegador
- Extra: Agrega notificaciones push web a tu sitio de WordPress
- Preguntas frecuentes sobre cómo agregar notificaciones en la pestaña del navegador
Instala WPCode para agregar notificaciones en pestañas del navegador
Puedes agregar fácilmente notificaciones en la pestaña del navegador en tu sitio agregando código personalizado en WordPress. Por lo general, tienes que editar el archivo functions.php de tu tema, pero incluso un pequeño error puede romper tu sitio web.
Por eso recomendamos usar WPCode, que es el mejor plugin de fragmentos de código de WordPress del mercado.
Hemos descubierto que es la forma más segura y fácil de agregar código personalizado a tu sitio. Para más detalles, consulta nuestra reseña de WPCode.
Primero, necesitas instalar y activar el plugin WPCode. Para más detalles, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
🚨Nota: WPCode también tiene una versión gratuita que puedes usar para este tutorial. Sin embargo, actualizar al plan de pago te dará acceso a más funciones.
Tras la activación, visita la página Fragmentos de código » + Agregar fragmento desde la barra lateral de administración de tu WordPress.
Ahora, pasa el ratón sobre la opción 'Agregar tu código personalizado (Nuevo fragmento)' y haz clic en el botón '+ Agregar fragmento personalizado' debajo de ella.
Luego selecciona el tipo de código de la lista de opciones en la pantalla.
Después de eso, serás llevado a la página ‘Crear fragmento personalizado’.
Sin importar qué tipo de notificación de pestaña del navegador uses, ingresarás el código aquí.
Tipo 1: Mostrar nuevas actualizaciones como notificación en pestaña del navegador
Este método es excelente si deseas captar la atención del usuario simulando actividad en tu sitio. Aparecerá un número en el título de la pestaña, haciendo que parezca que un nuevo mensaje o actualización está esperando al usuario.
Por ejemplo, sitios como Facebook y LinkedIn usan esto para mostrar notificaciones no leídas. Puedes usar este disparador psicológico para animar a los usuarios a volver a tu pestaña para ver lo que se están perdiendo.
Una vez que esté en la página ‘Crear fragmento personalizado’, deberá nombrar su fragmento. Puede elegir cualquier cosa que le ayude a identificar el código.
A continuación, selecciona ‘Fragmento de JavaScript’ como ‘Tipo de código’ en el menú.
Luego, todo lo que tiene que hacer es copiar y pegar el siguiente fragmento de código en el cuadro ‘Vista previa del código’:
let count = 0;
const title = document.title;
function changeTitle() {
count++;
var newTitle = '(' + count + ') ' + title;
document.title = newTitle;
}
function newUpdate() {
const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );
Este código le indica al navegador que comience a contar cuando el usuario cambia a una pestaña diferente. Tan pronto como regresen a tu sitio, el título se restablece a la normalidad.
Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección ‘Inserción’. Simplemente elige la opción ‘Insertar automáticamente’ y deja la ubicación como ‘Encabezado de todo el sitio’.
Después de eso, desplázate de nuevo a la parte superior de la página y cambia el interruptor ‘Inactivo’ a ‘Activo’.
Finalmente, haz clic en el botón ‘Save Snippet’ para guardar tu configuración.
Con eso terminado, su fragmento de código personalizado se agregará a su sitio y comenzará a funcionar.
Tipo 2: Cambiar favicons como notificación en pestaña del navegador
Con este método, mostrarás un favicon diferente en la pestaña del navegador cuando los usuarios naveguen a otra pestaña. Esta es una forma sutil de recordarles que tu sitio todavía está abierto.
Para hacer esto, usaremos un fragmento de código JavaScript que intercambia la imagen cuando el usuario abandona la página.
Primero, visita la página Fragmentos de código » + Agregar fragmento y haz clic en ‘+ Agregar fragmento personalizado’.
En la página de creación, selecciona ‘Fragmento de JavaScript’ como el ‘Tipo de código’ en el menú.
Una vez que hayas hecho eso, copia y pega el siguiente código en el cuadro ‘Vista previa del código’:
<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>
<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';
function changeFavicon() {
document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
const update = setInterval(changeFavicon, 3000);
setTimeout(function() {
clearInterval( update );
}, 3100);
}
Después de pegar el código, necesitas reemplazar la URL en la línea Favicon con el enlace a tu propia imagen de notificación.
Simplemente sube tu nuevo favicon a la biblioteca de medios de WordPress y copia el nombre del archivo (en mi ejemplo, es daisy.jpeg). Luego, pégalo entre comillas en el código.
Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección ‘Inserción’.
Puedes elegir la opción ‘Insertar automáticamente’ si deseas incrustar el código en cada página automáticamente.
Para cambiar el favicon solo en páginas específicas, selecciona la opción ‘Shortcode’ y pégalo en cualquier área habilitada para shortcodes, como los widgets de la barra lateral o al final del editor de contenido.
A continuación, ve a la parte superior de la página y cambia el interruptor de ‘Inactivo’ a ‘Activo’ en la esquina superior derecha, y luego haz clic en el botón ‘Guardar fragmento’.
Después de eso, tu favicon comenzará a cambiar como una notificación en la pestaña del navegador.
Tipo 3: Cambiar el título del sitio como notificación en pestaña del navegador
Este método es para ti si deseas cambiar el título del sitio para captar la atención de tus visitantes.
Al usar este fragmento de código, el título de tu sitio cambiará para mostrar un mensaje llamativo cuando los usuarios cambien a otra pestaña en el navegador.
Usaremos el plugin WPCode para cambiar el título de tu sitio a una notificación en la pestaña del navegador.
Para llegar a la página ‘Crear fragmento personalizado’, visita la página Fragmentos de código » + Agregar fragmento desde la barra lateral de administración.
Aquí, haz clic en ‘+ Agregar fragmento personalizado’ debajo de la opción ‘Agregar tu código personalizado (Nuevo fragmento)’.
A continuación, necesitas seleccionar ‘Fragmento de JavaScript’ como tipo de código de la lista de opciones que aparecen en pantalla.
Ahora que estás en la página ‘Crear fragmento personalizado’, comienza ingresando un título para tu fragmento de código.
Esto puede ser cualquier cosa que te ayude a recordar para qué es el código.
Luego, todo lo que tiene que hacer es copiar y pegar el siguiente fragmento de código en el cuadro ‘Vista previa del código’:
function changeTitleOnBlur() {
var timer = null;
var title = document.title;
var altTitle = 'Return to this page!';
window.onblur = function() {
timer = window.setInterval( function() {
document.title = altTitle === document.title ? title : altTitle;
}, 1500 );
}
window.onfocus = function() {
document.title = title;
clearInterval(timer);
}
}
changeTitleOnBlur();
Una vez que hayas pegado el código, puedes editarlo y simplemente escribir el mensaje que desees mostrar en la pestaña de tu navegador en el código.
Para escribir tu mensaje deseado, simplemente ve a la línea var altTitle = '¡Regresar a esta página!'; y elimina el texto de marcador de posición con el mensaje para la notificación de la pestaña de tu navegador.
A continuación, desplázate hacia abajo hasta la sección 'Inserción' y elige el modo 'Inserción automática' para activar la notificación de la pestaña de tu navegador en cada página.
Sin embargo, si solo deseas tu llamativo mensaje en páginas específicas, puedes elegir la opción 'Shortcode'.
Por ejemplo, es posible que solo desees agregar este código a la página ‘Agregar al carrito’ para reducir el abandono del carrito en tu sitio web.
Si ese es el caso, puedes elegir la opción Shortcode.
Después de eso, desplázate hacia abajo hasta la opción 'Ubicación' y haz clic en el menú desplegable junto a ella.
Desde aquí, selecciona la opción 'Pie de página de todo el sitio'.
Finalmente, desplázate de nuevo a la parte superior de la página y cambia el interruptor de 'Inactivo' a 'Activo'.
Luego, haz clic en el botón ‘Guardar fragmento’ para almacenar tu configuración.
¡Eso es todo! Ahora, la notificación de la pestaña de tu navegador alertará a los usuarios que abandonen tu sitio.
Extra: Agrega notificaciones push web a tu sitio de WordPress
Las notificaciones en la pestaña del navegador son efectivas, pero tienen una limitación importante. Solo funcionan si el usuario mantiene tu pestaña abierta.
Si quieres llegar a los visitantes incluso después de que cierren tu sitio web, necesitas notificaciones push web. A diferencia de las alertas de pestaña, estos son mensajes activos enviados directamente al dispositivo o navegador del usuario.
La forma más fácil de configurar esto es con PushEngage. Es el mejor software de notificaciones push del mercado.
PushEngage te permite enviar actualizaciones automáticas de nuevas publicaciones de blog, caídas de precios o carritos abandonados. Nosotros lo usamos aquí en WPBeginner para notificar a nuestros suscriptores sobre nuevos tutoriales, y es una fuente principal de tráfico de retorno para nosotros.
Para saber más al respecto, consulta nuestra reseña completa de PushEngage.
Incluye funciones potentes como pruebas A/B, push automático, segmentación de usuarios y recordatorios inteligentes de suscripción. Estas herramientas te ayudan a construir una audiencia leal que regresa.
Para más detalles, consulta nuestra guía para principiantes sobre cómo agregar notificaciones push web en WordPress.
Preguntas frecuentes sobre cómo agregar notificaciones en la pestaña del navegador
Aquí hay algunas preguntas que nuestros lectores hacen frecuentemente relacionadas con la adición de notificaciones de pestaña del navegador en WordPress:
¿Cómo agrego una barra de anuncios en WordPress?
La forma más fácil de agregar una barra de anuncios es usando un plugin como OptinMonster. Te permite crear barras fijas que se colocan en la parte superior o inferior de tu sitio para mostrar actualizaciones, ventas o alertas sin escribir ningún código.
Para más información, consulta nuestro tutorial sobre cómo crear una barra de alerta en WordPress.
¿Cómo agrego notificaciones en WordPress?
Para agregar notificaciones en el sitio, puedes usar un plugin como PushEngage o WPCode.
PushEngage maneja las notificaciones push web activas enviadas a los navegadores, mientras que WPCode te permite agregar scripts personalizados para alertas pasivas en el título de la pestaña, como las de esta guía.
¿Cómo habilitar las notificaciones del navegador web?
Debes registrarte en un servicio de notificaciones push web como PushEngage.
Una vez que instales su plugin de WordPress, tu sitio podrá pedir automáticamente a los visitantes permiso para enviar alertas a su navegador/dispositivo, incluso cuando no estén actualmente en tu sitio web.
¿Cómo agrego un aviso en WordPress?
Puedes agregar un aviso simple dentro de una publicación usando el bloque Grupo predeterminado con un color de fondo en el editor de WordPress.
Para avisos en todo el sitio que aparezcan en cada página, recomendamos usar un plugin de barra flotante como OptinMonster o SeedProd.
¿Cómo agregar un banner emergente en WordPress?
La mejor herramienta para agregar banners emergentes es OptinMonster.
Proporciona un constructor de arrastrar y soltar para crear lightboxes, slide-ins y banners flotantes que se activan según comportamientos específicos del usuario, como el tiempo en la página o la intención de salida.
Para empezar, consulta nuestro tutorial sobre cómo añadir un popup en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo agregar notificaciones en la pestaña del navegador en WordPress. También te puede interesar nuestro tutorial sobre cómo agregar cajas de características con iconos en WordPress y nuestra lista de formas de agregar un sitio de WordPress compatible con dispositivos móviles.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
He implementado el método de cambio de favicon para varios clientes de comercio electrónico, y ha sido particularmente efectivo cuando se combina con mensajes de abandono de carrito.
Un consejo que agregaría es hacer pruebas A/B de diferentes mensajes de notificación y intervalos de tiempo. Vimos una reducción del 15% en las tasas de abandono de carrito después de probar y optimizar el tiempo para que se activara a los 45 segundos en lugar de los 30 predeterminados. La implementación de WPCode facilita el ajuste de estos parámetros para las diferentes necesidades de los clientes.
Jiří Vaněk
Noté lo bien que funciona esto en aplicaciones como Messenger, donde la pestaña del navegador muestra un nuevo mensaje de alguien con quien estás chateando. Por mi experiencia, funciona muy bien. Es realmente útil saber cómo implementar algo similar en WordPress porque capta la atención y puede aumentar significativamente el tiempo que un usuario pasa en el sitio. Y la implementación en WordPress, según esta guía, no es nada complicada.
Carole
¿Es posible hacer que las pestañas alternas tengan un tiempo más largo entre cambios? Creo que ese parpadeo constante sería molesto y la gente podría cerrar la pestaña.
Soporte de WPBeginner
Sí, dependería de los métodos que estuvieras usando, cambiarías los números que están en los miles para los fragmentos de código, ya que esos determinan cuántos milisegundos esperar para el código.
Administrador