Un titolo accattivante per il tuo sito web con JavaScript!
Hai mai pensato che il titolo della tua pagina web potrebbe essere ancora più coinvolgente? Grazie a JavaScript, puoi far sì che il titolo della tua pagina cambi automaticamente quando l’utente passa ad un’altra scheda o torna a quella del tuo sito web. In questo articolo, ti mostreremo come utilizzare questo codice JavaScript per creare un titolo accattivante e coinvolgente per la tua pagina web.
Il codice JavaScript che useremo è molto semplice. Innanzitutto, definiamo una variabile “title” che contiene il titolo originale della pagina web. Quindi, aggiungiamo due eventi all’oggetto “window“: l’evento “blur” e l’evento “focus“. L’evento “blur” si attiva quando l’utente passa ad un’altra scheda o applicazione, mentre l’evento “focus” si attiva quando l’utente torna alla scheda del tuo sito web.
Quando l’evento “blur” si attiva, il titolo della pagina viene sostituito con la frase “Ti aspetto!“. Invece, quando l’evento “focus” si attiva, il titolo della pagina viene ripristinato al suo valore originale, memorizzato nella variabile “title“.
Ecco un esempio di come potresti implementare questo codice sulla tua pagina web:
<!DOCTYPE html>
<html>
<head>
<title>Benvenuti in Land of World</title>
<script>
let title = document.title;
window.addEventListener("blur", () => {
document.title = "Ti aspetto!";
});
window.addEventListener("focus",() => {
document.title = title;
});
</script>
</head>
<body>
<h1>Benvenuti!</h1>
<p>Qui troverai informazioni interessanti sulle ultime novità del web.</p>
</body>
</html>
La pagina web cambia il titolo in “Ti aspetto!” quando l’utente passa ad un’altra scheda o applicazione.
Personalizza
La bellezza di questo codice JavaScript è che puoi personalizzarlo in base alle tue esigenze e ai tuoi obiettivi di marketing. Sostituisci “Ti aspetto!” con messaggi personalizzati o offerte promozionali per aumentare l’engagement dei visitatori e incentivare le conversioni sul sito.
Ad esempio, se hai un sito web di e-commerce, puoi utilizzare questo codice per mostrare ai tuoi visitatori una promozione speciale quando passano ad un’altra scheda. Ad esempio, potresti scrivere:
- “Torna indietro per uno sconto del 10% sul tuo primo acquisto!”
- “Hai lasciato il tuo carrello vuoto! Torna ora per usufruire di uno sconto del 5%!”.
Invece, se hai un sito web di viaggi, potresti utilizzare questo codice per mostrare ai tuoi visitatori un messaggio di benvenuto personalizzato quando tornano alla scheda del tuo sito web. Ad esempio, potresti scrivere:
- “Bentornato! Hai mai pensato di visitare le meravigliose spiagge di Bali?”
- “Hai appena fatto la scelta giusta! Il nostro sito web è il posto giusto per pianificare la tua prossima avventura!”.
Aumentiamo la complessità
let pageTitle = document.title;
let pageUrl = window.location.href;
window.addEventListener("blur", () => {
document.title = "Ti aspetto! 🕐";
window.setTimeout(() => {
window.location.href = "https://www.example.com/special-offer";
}, 5000);
});
window.addEventListener("focus", () => {
document.title = pageTitle;
});
window.addEventListener("visibilitychange", () => {
if (document.visibilityState === "hidden") {
// Esegui una determinata azione quando la pagina diventa invisibile
console.log("La pagina è diventata invisibile!");
} else {
// Esegui una determinata azione quando la pagina diventa visibile
console.log("La pagina è diventata visibile!");
}
});
In questa versione, abbiamo aggiunto alcune funzionalità interessanti. In particolare:
- Abbiamo salvato l’URL della pagina web in una variabile per poterla utilizzare in futuro.
- Abbiamo aggiunto un timer che, dopo 5 secondi, reindirizza l’utente a una pagina specifica. Questo è utile se si vuole mostrare un’offerta promozionale o una pagina di destinazione specifica ai visitatori che lasciano la scheda.
- Abbiamo aggiunto un evento “visibilitychange” che si attiva quando la pagina diventa visibile o invisibile. In questo modo, è possibile eseguire determinate azioni quando la pagina viene visualizzata o nascosta. Ad esempio, si può interrompere la riproduzione di un video quando l’utente passa a un’altra scheda o si può ripristinare lo stato di un gioco quando l’utente torna alla scheda del gioco.
