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, muchos sitios de comercio electrónico lo usan para recordar sutilmente a los usuarios que regresen y completen su compra cuando cambian de pestaña. Es discreto, no intrusivo y puede aumentar las tasas de conversión en tu sitio.
En esta guía, te mostraremos cómo agregar fácilmente notificaciones en la pestaña del navegador en WordPress, para que puedas mantener a los visitantes enfocados y que regresen. 🙌
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 uevo segura de agregar notificaciones de pesta uevo de 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:
- Recuento de notificaciones (Simular actividad): Muestra un número dinámico en el título de la pestaña para captar la atención.
- Alerta de favicon (Indicador visual): Cambia el ícono de tu sitio por una imagen diferente para alertar visualmente a los usuarios.
- Mensaje personalizado (Alerta de texto directo): Cambia el título de la página a una frase personalizada para atraer a los visitantes de regreso.
¿Por qué agregar notificaciones en la pestaña del navegador en WordPress?
Las notificaciones en la pestaña del navegador ayudan a que los visitantes regresen a tu sitio web después de cambiar a otra pestaña. En lugar de perder a un visitante por completo, puedes usar notificaciones sutiles para recordarles tu contenido, productos u ofertas especiales.
Esto convierte a las notificaciones en la pestaña del navegador en una forma simple pero efectiva de aumentar la participación y las conversiones. Estos son algunos de los mayores beneficios de usar notificaciones en la pestaña del navegador:
- Re-involucrar a visitantes distraídos: Anima a los usuarios a regresar a tu sitio después de cambiar a otra pestaña.
- Reducir el abandono del carrito: Recuerda a los compradores los productos que dejaron en su carrito antes de que abandonen tu tienda.
- Aumentar las conversiones: Llama la atención sobre ofertas especiales, lead magnets e llamados a la acción importantes.
- Mejorar la visibilidad de la marca: Mantén tu sitio web en primer plano con mensajes personalizados o notificaciones visuales.
- Impulsar la participación del usuario: Anima a los visitantes a seguir leyendo artículos, completando formularios o explorando tu contenido.
Una notificación en la pestaña del navegador generalmente funciona cambiando el título de la pestaña, mostrando un mensaje personalizado, actualizando el favicon o mostrando un recuento de notificaciones cuando un visitante se aleja de tu sitio web.
Por ejemplo, una tienda en línea podría mostrar un mensaje como "¡No olvides tu carrito!" mientras que un blog podría mostrar "¡Regresa para más consejos!" cuando un visitante abre otra pestaña.
Aquí tienes un ejemplo de una notificación en la pestaña del navegador.
Tipos de notificaciones en la pestaña del navegador
Dependiendo de tus objetivos, puedes usar diferentes tipos de notificaciones en la pestaña del navegador para captar la atención de los visitantes y animarlos a regresar a tu sitio.
Aquí tienes una comparación rápida de las opciones más populares:
| Tipo de notificación | Descripción | Mejor para |
|---|---|---|
| Recuento de notificaciones | Muestra un número en el título de la pestaña del navegador para indicar actividad nueva. | Carritos de compras, foros, sitios de membresía |
| Alerta de favicon | Cambia o anima el ícono de la pestaña del navegador para atraer la atención. | Conciencia de marca y re-involucramiento de visitantes |
| Mensaje personalizado | Reemplaza el título de la pestaña con un mensaje o recordatorio personalizado. | Promociones, carritos abandonados, generación de leads |
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: Explora las notificaciones push web para un alcance más amplio
- 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 uevoilmente notificaciones de pesta uevo de navegador en tu sitio agregando c uevoigo personalizado en WordPress. Por lo general, tienes que editar el archivo functions.php de tu tema, pero incluso un peque uevo error puede romper tu sitio web.
Es por eso que recomendamos usar WPCode. Con la confianza de más de 3 millones de sitios, es el mejor plugin de fragmentos de código de WordPress del mercado.
Lo hemos encontrado la forma más segura y fácil de agregar código personalizado a tu sitio. Te permite insertar JavaScript personalizado a través de una interfaz dedicada sin editar los archivos del tema. Esto previene roturas accidentales del sitio.
Para obtener más detalles, consulta nuestra reseña de WPCode.
Primero, necesitas instalar y activar el plugin WPCode. Para m uevo detalles, puedes ver nuestra gu uevo paso a paso sobre c uevoo instalar un plugin de WordPress.
🚨Nota: WPCode tambi uevon tiene una versi uevo gratuita que puedes usar para este tutorial. Sin embargo, actualizar al plan de pago te dar uevo acceso a m uevo caracter uevoisticas.
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 originalTitle = document.title;
let titleInterval;
function startCounting() {
if (!titleInterval) { // Only start if not already running
titleInterval = setInterval(() => {
count++;
document.title = '(' + count + ') ' + originalTitle;
}, 2000);
}
}
function stopCounting() {
clearInterval(titleInterval);
titleInterval = null;
document.title = originalTitle;
count = 0; // Reset count when returning
}
window.addEventListener('blur', startCounting);
window.addEventListener('focus', stopCounting);
Este código actualiza continuamente el título de la pestaña del navegador con un número incremental cuando el usuario se aleja de la pestaña, simulando actividad continua.
Cuando el usuario regresa a tu sitio, el título se restablece a la normalidad y el contador se reinicia.
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 cambiar dinámicamente el favicon, la mejor práctica es modificar el href del enlace favicon existente proporcionado por tu tema de WordPress (generalmente se encuentra a través de document.querySelector('link[rel="icon"]')).
Esto es mejor que insertar una nueva etiqueta <link>, lo que puede generar conflictos o comportamientos inesperados.
Para lograr esto, usaremos un fragmento de JavaScript que intercambia la imagen cuando el usuario abandona la página y la revierte cuando regresa.
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’:
// This script assumes an existing favicon link in the head (e.g., from your theme).
// If your theme doesn't provide one, you might need to add a default <link> tag
// using an HTML snippet in WPCode, inserted into the site-wide header.
document.addEventListener('DOMContentLoaded', function() {
const faviconLink = document.querySelector('link[rel="icon"]'); // Find the existing favicon link
if (!faviconLink) {
console.warn("No favicon link found. Please ensure your theme adds one or add it manually in the head.");
return;
}
const originalFavicon = faviconLink.href;
// Replace with the full URL of your desired notification image
const notificationFavicon = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';
window.addEventListener('blur', function() {
faviconLink.href = notificationFavicon;
});
window.addEventListener('focus', function() {
faviconLink.href = originalFavicon;
});
});
Después de pegar el código, necesitas reemplazar la URL en la línea const notificationFavicon = con el enlace a tu propia imagen de notificación.
Simplemente sube tu nuevo favicon a la biblioteca de medios de WordPress y copia la URL completa de la imagen subida (por ejemplo, https://example.com/wp-content/uploads/2024/05/favicon-notification.png).
Luego, pégala entre las 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 uevoinas espec uevoicas, selecciona la opci uevon 'Shortcode' y p uevogalo en cualquier uevorea que admita shortcodes, como los widgets de 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 uevoigo, el t uevoulo de tu sitio cambiar uevo para mostrar un mensaje llamativo cuando los usuarios cambien a otra pesta uevo 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, podr uevoas querer agregar este c uevoigo solo a la p uevoina '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.
Nota: Estos fragmentos de código crean notificaciones básicas en la pestaña del navegador. Si deseas mostrar notificaciones basadas en acciones específicas, como carritos abandonados, comentarios nuevos o actividad del usuario, necesitarás una configuración más avanzada.
Por ejemplo, los propietarios de tiendas WooCommerce pueden querer activar notificaciones cuando un comprador deja artículos en su carrito. Esto generalmente requiere integraciones o plugins adicionales de WooCommerce que puedan detectar esas acciones y pasar la información a tu script de notificación.
Extra: Explora las notificaciones push web para un alcance más amplio
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 uevo f uevoil de configurar esto es con PushEngage. Es el mejor software de notificaciones push del mercado.
PushEngage te permite enviar actualizaciones autom uevoicas de nuevas publicaciones de blog, ca uevoas de precios o carritos abandonados. Nosotros lo usamos aqu uevo en WPBeginner para notificar a nuestros suscriptores sobre nuevos tutoriales, y es una fuente principal de tr uevoico de retorno para nosotros.
Para obtener m uevo informaci uevon, consulta nuestra revisi uevo 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 uevo detalles, consulta nuestra gu uevo para principiantes sobre c uevoo 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 uevo f uevoil 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, ofertas o alertas sin escribir ning uevo c uevoigo.
Para m uevo informaci uevon, consulta nuestro tutorial sobre c uevoo crear una barra de alertas en WordPress.
¿Cómo agrego notificaciones en WordPress?
Para agregar notificaciones en el sitio, puedes usar un plugin como PushEngage o usar WPCode para insertar scripts personalizados.
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 aparecen 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 agregar 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 íconos en WordPress y consultar 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 ver 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