La proprietà document.referrer di Javascript
La proprietà referrer in Javascript restituisce l'indirizzo URL della pagina precedente, quella da cui l'utente è arrivato alla pagina corrente.
document.referrer
E' una proprietà dell'oggetto document. In altre parole rivela il documento di origine del link che ha portato l'utente a visitare la pagina corrente.
Ma attenzione: funziona solo se l'utente è arrivato tramite un link diretto da un'altra pagina. Se l'utente arriva direttamente digitando l'URL o tramite un segnalibro, document.referrer sarà una stringa vuota.
A cosa serve? Questa proprietà è particolarmente utile per tracciare il percorso degli utenti sul tuo sito, per analisi di marketing, o semplicemente per personalizzare l'esperienza dell'utente in base alla pagina da cui proviene. Tuttavia, dal momento che document.referrer può rivelare l'URL di provenienza, è opportuno considerare la privacy degli utenti e non utilizzare questa informazione per scopi invasivi.
Ad esempio, considero due semplici pagine web.
La pagina in cui si trova il link.
<!DOCTYPE html>
<html>
<head>
<title>Pagina 1</title>
</head>
<body>
<h1>Benvenuti nella Pagina 1</h1>
<a href="pagina2.html">Vai alla Pagina 2</a>
</body>
</html>
E la pagina a cui è diretto il link.
<!DOCTYPE html>
<html>
<head>
<title>Pagina 2</title>
</head>
<body>
<script>
if (document.referrer.includes("pagina1.html")) {
document.write("<h1>Bentornato! Venivi dalla Pagina 1.</h1>");
} else {
document.write("<h1>Benvenuto nella Pagina 2!</h1>");
}
</script>
</body>
</html>
In quest'ultima pagina ho inserito anche uno script con la proprietà referrer.
Quando un utente clicca sul link nella pagina1.html e arriva alla pagina2.html, lo script controlla se document.referrer contiene l'URL di pagina1.html. Se è così, mostra un messaggio di benvenuto personalizzato.
Nota. Alcune impostazioni del browser o specifiche politiche di sicurezza, come il tag rel="noreferrer" sui link o le politiche di sicurezza dei contenuti (CSP) potrebbero impedire il passaggio dell'URL referrer. Quindi, non sempre document.referrer è affidabile per tracciare percorsi complessi all'interno di un'applicazione, specialmente in ambienti con molte redirezioni.
Ad esempio, se sei arrivato su questa pagina da un link interno o esterno, qui di seguito dovresti vedere il link di provenienza grazie alla proprietà referrer.