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

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2

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

function redirectToSpecialPage() {
    const referrer = document.referrer;

    if (referrer.includes("social-network.com")) {
        window.location.href = "/welcome-social-network-users.html";
    } else if (referrer.includes("search-engine.com")) {
        window.location.href = "/welcome-search-engine-users.html";
    } else {
        window.location.href = "/welcome.html";
    }
}

redirectToSpecialPage();