JS властивість Document.referrer

Загальний опис

Властивість Document.referrer відіграє значущу роль у веб-розробці, надаючи можливість здійснювати інтерактивність та адаптивність веб-сторінок до користувачів і їхніх дій у мережі Інтернет. Ця властивість відноситься до об’єкта Document у мові програмування JavaScript і повертає URL-адресу документа, з якого користувач перейшов на поточний документ. Це забезпечує цінну інформацію для аналізу веб-трафіку, дозволяючи розробникам відстежувати, звідки приходять їхні відвідувачі, та оптимізувати маркетингові та рекламні стратегії відповідно.

Застосування Document.referrer може бути різноманітним, починаючи від простого виведення адреси сторінки-джерела до складних механізмів редиректу чи персоналізації контенту на основі походження користувача. Наприклад, можна адаптувати вміст сторінки або показувати спеціальні пропозиції для відвідувачів, які прийшли з певних ресурсів.

Основний спосіб застосування Document.referrer полягає у простому отриманні URL-адреси вихідної сторінки. Розглянемо базовий приклад:

console.log(document.referrer);

Цей рядок коду виведе в консоль URL-адресу сторінки, з якої користувач перейшов на поточну сторінку. Якщо користувач прийшов на сторінку безпосередньо, не переходячи з інших сторінок (наприклад, ввівши адресу вручну або через закладки), Document.referrer поверне порожній рядок.

Для складніших сценаріїв використання можна розглянути наступний приклад, де використовується Document.referrer для редиректу користувачів на специфічну сторінку, якщо вони прийшли з певного домену:

if (document.referrer.indexOf("https://example.com") === 0) {
    window.location.href = "https://yourdomain.com/special-offer";
}

У цьому прикладі, якщо користувач перейшов на поточну сторінку з домену example.com, його буде автоматично перенаправлено на сторінку зі спеціальною пропозицією. Це може бути корисно для маркетингових кампаній, спрямованих на користувачів з певних сайтів-партнерів.

Додаткове застосування включає аналіз Document.referrer для налаштування аналітики відвідуваності сайту. Розробники можуть використовувати цю інформацію для створення детальних звітів про джерела трафіку, що допомагає в плануванні рекламних стратегій та оптимізації вмісту веб-сайту.

Document.referrer є потужним інструментом у руках веб-розробників, що дозволяє збирати важливі дані про джерела трафіку та адаптувати веб-сайти до потреб та інтересів відвідувачів. Його правильне використання може значно підвищити ефективність веб-ресурсів, зробити їх більш привабливими для користувачів та покращити загальну взаємодію з цільовою аудиторією.

правити

Порада

Майте на увазі, що в деяких випадках document.referrer може повертати порожній рядок. Це станеться, якщо користувач прийшов на ваш сайт безпосередньо, ввівши URL у браузері, або через приватний режим перегляду, де реферери можуть бути приховані. Тому не слід покладатися на цю властивість як на єдине джерело інформації про трафік.

автор: Bond правити

Порада

Використовуйте document.referrer для покращення користувацького досвіду на вашому сайті. Наприклад, якщо ви виявите, що користувач прийшов з певного сайту, ви можете налаштувати вміст або рекламу, яка буде більш релевантною для його інтересів. Такий підхід дозволяє створити персоналізованіше середовище для ваших відвідувачів.

автор: Bond правити

Порада

Розробники повинні враховувати аспекти приватності та безпеки при роботі з document.referrer. Оскільки ця властивість може містити чутливу інформацію про джерела відвідувань, необхідно уникати її використання в ситуаціях, де така інформація може бути неправильно розкрита або використана без дозволу користувача. Важливо забезпечити, щоб обробка та використання цих даних відповідали всім застосовним нормам захисту даних.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.referrer

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

const referrer = document.referrer;

if (referrer.includes('social-network.com')) {
    console.log('Прийшов із соцмережі — показуємо відповідне вітання');
} else if (referrer.includes('search-engine.com')) {
    console.log('Прийшов із пошуку');
} else {
    console.log('Реферер:', referrer || '(порожній)');
}

if (document.referrer.includes("example.com")) {
    console.log("Відвідувач прийшов з example.com");
} else {
    console.log("Відвідувач прийшов не з example.com");
}