¿Quiere agregar notificaciones de pestañas del navegador para su sitio web?
Agregar notificaciones de pestañas del navegador puede ser una excelente manera de captar la atención de un usuario, reducir las tasas de abandono del carrito y aumentar las ventas y los ingresos.
En este artículo, le mostraremos cómo agregar notificaciones de pestañas del navegador en WordPress.
¿Qué es la notificación de la pestaña del navegador?
Una notificación de pestaña del navegador es cuando cambia algo en la pestaña de su sitio web cuando el usuario se enfoca en otro sitio en su navegador.
Al agregar una función de notificación de pestañas del navegador a su sitio web de WordPress, puede captar la atención del usuario en el momento en que abre otra pestaña para salir de su página.
Por ejemplo, puede cambiar el favicon de su sitio web, animarlo, escribir un mensaje personalizado o simplemente mostrar la pestaña.
Si tiene una tienda en línea, las notificaciones de la pestaña del navegador realmente pueden ayudarlo. Estas notificaciones traerán de vuelta a los clientes distraídos, disminuirán las tasas de abandono del carrito y aumentarán la participación del cliente.
Con esta función, puede advertir a sus clientes sobre el abandono del carrito o incluso ofrecer un descuento si vuelven su atención a su sitio.
Aquí hay un ejemplo de una notificación de pestaña del navegador.
Dicho esto, le mostraremos cómo agregar tres tipos diferentes de notificaciones del navegador a WordPress.
Instale WPCode para agregar notificaciones de pestañas del navegador
Puede agregar fácilmente notificaciones de pestañas del navegador en su sitio agregando un código personalizado en WordPress. Por lo general, necesita editar el archivo Functions.php de su tema, pero eso puede arruinar su sitio web incluso con un error menor.
Por eso te recomendamos Código WPel complemento de fragmentos de código más seguro y popular, utilizado por más de 1 millón de sitios web.
Primero necesita instalar y activar el Complemento WPCode gratuito. Para obtener más información, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Una vez que haya activado el complemento, simplemente vaya a Fragmentos de código » Todos los fragmentos en su panel de administración de WordPress.
Simplemente haga clic en el botón ‘Agregar nuevo’, que lo llevará a la página ‘Agregar fragmento’.
Ahora coloque el cursor sobre la opción ‘Agregar su código personalizado (nuevo fragmento)’ y haga clic en el botón ‘Usar fragmento’ que se encuentra debajo.
El complemento lo llevará a la página «Crear fragmento personalizado».
No importa qué tipo de notificación de pestaña del navegador utilice, simplemente ingrese el código a continuación desde esta página.
Tipo 1. Mostrar nuevas actualizaciones como notificación en la pestaña del navegador
El uso del código a continuación notificará a sus usuarios sobre las nuevas actualizaciones que se publicarán en su sitio. Aparecerá un número en la pestaña que indica cuántos elementos nuevos faltan.
Por ejemplo, si tiene una tienda en línea y acaba de agregar algunos productos nuevos al inventario, el usuario verá la notificación en la pestaña del navegador como un número que indica cuántos productos nuevos se agregaron.
Puedes ver esto en la siguiente imagen:
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. Esto es sólo para ti.
A continuación, seleccione el ‘Tipo de código’ en el menú desplegable de la derecha. Este es un código JavaScript, así que simplemente haga clic en la opción ‘Fragmento de JavaScript’.
Luego, todo lo que necesita hacer es copiar y pegar el siguiente fragmento de código en el área «Ejemplo de 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 );
Después de pegar el código, desplácese hacia abajo hasta la sección «Insertar». Encontrarás dos opciones: ‘Insertar automáticamente’ y ‘Código corto’.
Simplemente elija la opción ‘Insertar automáticamente’ y su código se insertará automáticamente y se ejecutará en su sitio.
Puede usar el método ‘Código corto’ si solo desea mostrar nuevas actualizaciones en páginas específicas donde agrega el código corto.
Una vez que haya elegido su opción, volverá a la parte superior de la página.
Haga clic en el interruptor de «Inactivo» a «Activo» en la esquina superior derecha, luego haga clic en el botón «Guardar fragmento».
Una vez hecho esto, su fragmento de código personalizado se agregará a su sitio y comenzará a funcionar.
Tipo 2. Cambiar favicons como notificación en la pestaña del navegador
Este método muestra un favicon diferente en la pestaña del navegador de su sitio cuando los usuarios navegan a una pestaña diferente.
Un favicon es una pequeña imagen que ves en los navegadores web. La mayoría de las empresas utilizan una versión más pequeña de su logotipo.
Ahora, para cambiar los favicons en la pestaña de su navegador, usamos el complemento WPCode.
Primero ve a Fragmentos de código » Todos los fragmentos en su panel de administración de WordPress y luego haga clic en el botón ‘Agregar nuevo’.
Luego pase el cursor sobre la opción ‘Agregar su código personalizado (nuevo fragmento)’ y haga clic en el botón ‘Usar fragmento’ debajo de él
Esto lo llevará a la página «Crear fragmento personalizado». Puede comenzar ingresando un título para su fragmento de código.
Ahora simplemente elija un ‘Tipo de código’ del menú desplegable a la derecha. Este fragmento de código requiere que seleccione la opción ‘Fragmento de código HTML’.
Una vez que haya hecho eso, copie y pegue el siguiente código en el ‘Ejemplo de 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, simplemente elimine los enlaces de favicon de muestra del código y reemplácelos con sus propias imágenes.
Recuerde que las imágenes que elija como favicons ya deben haber sido cargadas en la biblioteca de medios de su sitio de WordPress.
De lo contrario, el código no funcionará y su favicon se mostrará normalmente.
Después de pegar los enlaces a sus nuevos favicons, desplácese hacia abajo hasta la sección «Insertar». Aquí encontrarás dos opciones: ‘Insertar automáticamente’ y ‘Código corto’.
Puede elegir la opción ‘Insertar automáticamente’ si desea incrustar automáticamente el código en cada página.
Si solo desea cambiar el favicon en páginas específicas, seleccione la opción ‘Código corto’ y péguelo en un área con código corto, como los widgets de la barra lateral o en la parte inferior del editor de contenido.
Luego simplemente vaya a la parte superior de la página y cambie el interruptor de ‘Inactivo’ a ‘Activo’ en la esquina superior derecha y luego haga clic en el botón ‘Guardar fragmento’.
Después de eso, su 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 la pestaña del navegador
Si desea cambiar el título del sitio para captar la atención de sus visitantes, puede utilizar este método.
Al usar este fragmento de código, el título de su sitio se convertirá en un mensaje llamativo cuando los usuarios cambien a otra pestaña del navegador.
Usaremos el complemento WPCode para cambiar el título de su sitio como una notificación de pestaña del navegador.
Para ir a la página Crear clip personalizado, vaya a Fragmentos de código » Todos los fragmentos y simplemente haga clic en el botón ‘Agregar nuevo’.
Luego seleccione la opción ‘Agregar su código personalizado’ como se muestra en los ejemplos anteriores.
Ahora que está en la página Crear fragmento personalizado, comience a ingresar un título para su fragmento de código.
Luego, debe seleccionar el ‘Tipo de código’ en el menú desplegable de la derecha. Dado que se trata de código JavaScript, todo lo que necesita hacer es hacer clic en la opción ‘Fragmento de JavaScript’.
Después de eso, desplácese hacia abajo hasta la opción «Ubicación» y haga clic en el menú desplegable al lado.
Haga clic en la opción ‘Pie de página de todo el sitio’ en el menú desplegable.
Después de eso, todo lo que necesita hacer es copiar y pegar el siguiente fragmento de código en la ‘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();
Después de pegar el código, ahora puede editarlo y simplemente escribir el mensaje que desea que aparezca en la pestaña de su navegador en el código.
Para escribir el mensaje deseado, simplemente vaya a la var altTitle="Return to this page!"; línea y elimine el texto del marcador de posición que contiene el mensaje de notificación de la pestaña de su navegador.
Luego desplácese hacia abajo hasta la sección «Insertar», donde encontrará dos métodos de inserción: «Inserción automática» y «Código corto».
Al hacer clic en la opción ‘Insertar automáticamente’, se activará la notificación de la pestaña del navegador en cada página. No obstante, si solo quieres que tu llamativo mensaje aparezca en páginas concretas, puedes elegir la opción ‘Shortcode’.
Por ejemplo, es posible que desee agregar este código solo en la página «Agregar al carrito» para que se pueda reducir el porcentaje de carritos abandonados en su sitio web.
Si ese es el caso, puede elegir la opción Shortcode.
Después de eso, todo lo que necesita hacer es ir a la parte superior de la página y cambiar el interruptor de ‘Inactivo’ a ‘Activo’ y luego hacer clic en el botón ‘Fragmento’.
¡Eso es! Ahora la pestaña de su navegador advierte a los usuarios que abandonan su sitio.
Esperamos que este artículo le haya ayudado a aprender cómo agregar notificaciones de pestañas del navegador en WordPress. También puede consultar nuestro tutorial sobre cómo agregar notificaciones push web a su sitio de WordPress y ver nuestras mejores selecciones de complementos de WordPress imprescindibles para hacer crecer su sitio.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.