Verander de website voor terugkerende bezoekers

Wat als je terugkerende bezoekers een persoonlijk bericht laat zien? Dit zijn bezoekers die je website al eerder hebben bezocht en terugkomen, misschien een paar uur later of de volgende dag. Deze personen hebben nog niet besloten of ze met jou willen werken of iets willen kopen.

* Deze techniek kan ook worden gebruikt voor alle andere veranderingen op de website.

Het aanpassen van je website voor terugkerende bezoekers is een eerste stap richting personalisatie van je website. Dit kan voordelen bieden, zoals het vergroten van de betrokkenheid van bezoekers bij jouw bedrijf en het verbeteren van de gebruikerservaring.

Door de inhoud van je website aan te passen op basis van de interesses en gedragingen van terugkerende bezoekers, kun je hen een meer gepersonaliseerde ervaring bieden en zo de kans vergroten dat zij klant worden.

Voordelen:

  • Verhoogde betrokkenheid van de bezoekers
  • Hogere conversieratio
  • Betere inzichten in het gedrag en de interesses van bezoekers

In dit artikel beginnen we met de basis. Het wijzigingen van de titel, paragraaf en button tekst in de header op de homepagina.

Verander van de website voor terugkerende bezoekers

Ik heb exact dezelfde code gebruikt als ik je zal laten zien in dit artikel, op de homepage van deze website. Gewoon om je te laten zien wat de code deed:

De lay-out de eerste keer dat een bezoeker op de website komt.
Vooraf
De lay-out voor een terugkerende bezoekers.
Achteraf

Leuke truc toch? Dit alles is gedaan met vanilla JavaScript, dus het zou moeten werken in elke browser op elke website.

Hoe werkt het?

De eerste keer dat iemand de website bezoekt, controleert de JavaScript of de gebruiker een cookie heeft. Als dat niet het geval is, wordt er een kleine cookie ingesteld met de informatie dat de bezoeker op de website is geweest. Je zou dit ook met localStorage kunnen doen.

De volgende keer dat de bezoeker terugkeert naar de website, doet de JavaScript opnieuw een controle om te zien of de bezoeker de cookie heeft. Als dat het geval is, wordt de JavaScript geladen en worden de wijzigingen op de website zichtbaar.

Klaar om dit te bouwen?

Controleer en stel de cookie in voor terugkerende bezoekers

De belangrijkste stap in het proces is het instellen van een cookie wanneer iemand de website bezoekt. Afhankelijk van of er een cookie is, kunnen we wijzigingen zichtbaar maken.

Stap één: maak een Event Listener om de cookie te herkennen.

document.addEventListener("DOMContentLoaded", function () {
    const userCookieName = "returningVisitor";
    checkUserCookie(userCookieName);
});

Nu gaan we de functie maken die controleert of er een cookie aanwezig is.

function checkUserCookie(userCookieName) {
    const regEx = new RegExp(userCookieName, "g");
    const cookieExists = document.cookie.match(regEx);

    if (cookieExists != null) {
      /* PLACE CHANGES HERE */  
    } else {
      createUserCookie(userCookieName);
    }
}

De laatste stap is het deel dat de cookie en de instellingen daarvan creëert.

function createUserCookie(userCookieName) {
    const userCookieValue = "Yes";
    const userCookieDays = 7;
    let expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + userCookieDays);
    document.cookie = userCookieName + "=" + userCookieValue +"; expires=" + expiryDate.toGMTString() + "path=/";
}

Dit zijn alle cookie-gerelateerde elementen.

Het wijzigen van de kop (H1).

Voordat we de kop wijzigen, maken we een const-variabele om de kop te selecteren. Met behulp van de querySelector is het gemakkelijk om het element te selecteren.

Classes: .class-name
ID: #id-name
Element: h1

Let op. Het selecteert alle classes, IDs en elementen die dezelfde naam bevatten.

function checkUserCookie(userCookieName) {
    const returnChangeHeading = document.querySelector("#changeHeading");

    if (cookieExists != null) {
        returnChangeHeading.innerText = "Hé! Are you checking back with me? Nice!";
    } else {
      createUserCookie(userCookieName);
    }
}

Dit was alles voor de kop. In de if-else statement heb ik de innerText veranderd. Dit betekent dat de tekst binnen het geselecteerde element, in dit geval de H1, zal worden veranderd.

Het veranderen van de tekst van de alinea.

Er wordt nu nog een constante variabele gemaakt, waarbij het paragraaf onder de kop wordt geselecteerd.

function checkUserCookie(userCookieName) {
    const returnChangeParagraph = document.querySelector("#changeParagraph");

    if (cookieExists != null) {
        returnChangeParagraph.innerText = "Changing this content and call-to-action is just one of the things I'm capable of. Are you interested in a video call?";
    } else {
      createUserCookie(userCookieName);
    }
}

Het doet hetzelfde als bij de kop.

Aanpassen van de button

Er is meer nodig om de knop aan te passen dan voor de kop en de paragraaf. Omdat ik meerdere elementen van de knop moest aanpassen, heb ik ervoor gekozen om de huidige knop te verbergen en een nieuwe knop toe te voegen.

Eerst creëren we de constante om de huidige knop te selecteren. Vervolgens verbergen we deze door de display op “none” te zetten. Daarna maken we een nieuw element aan en voegen we de innerHTML toe aan dat element.

function checkUserCookie(userCookieName) {
    const returnChangeButton = document.querySelector("#changeButton");

    if (cookieExists != null) {
        returnChangeButton.style.display = "none";

        /* Create function to add HTML after element */
        function insertAfter(referenceNode, newNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        }

        /* Select and add HTML */
        let selectElement = document.querySelector("#changeButton");
        let element = document.createElement('div');
        element.setAttribute("class", "returning-cta")

        /* Add class to created element */
        element.innerHTML = `
            <a href="https://calendly.com/sandervolbeda/lets-meet" class="btn primary" target="_blank" rel="nofollow">Schedule a video call <img src="https://sandervolbeda.nl/wp-content/uploads/2022/07/calendar.png"></a>
        `;

        /* Run function to add HTML after selected element */
        insertAfter(selectElement, element);

    } else {
      createUserCookie(userCookieName);
    }
}

Volledige JavaScript code

Heb je het onder de knie? Zorg ervoor dat je de stappen in het artikel volgt voordat je deze volledige codevoorbeeld kopieert en plakt in je eigen website.

document.addEventListener("DOMContentLoaded", function () {
    const userCookieName = "returningVisitor";
    checkUserCookie(userCookieName);
});

function checkUserCookie(userCookieName) {
    const regEx = new RegExp(userCookieName, "g");
    const cookieExists = document.cookie.match(regEx);
    const returnChangeHeading = document.querySelector("#changeHeading");
    const returnChangeParagraph = document.querySelector("#changeParagraph");
    const returnChangeButton = document.querySelector("#changeButton");

    if (cookieExists != null) {
        returnChangeHeading.innerText = "Hé! Are you checking back with me? Nice!";
        returnChangeParagraph.innerText = "Changing this content and call-to-action is just one of the things I'm capable of. Are you interested in a video call?";
        returnChangeButton.style.display = "none";

        /* Create function to add HTML after element */
        function insertAfter(referenceNode, newNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
        }

        /* Select and add HTML */
        let selectElement = document.querySelector("#changeButton");
        let element = document.createElement('div');
        element.setAttribute("class", "returning-cta")

        /* Add class to created element */
        element.innerHTML = `
            <a href="https://calendly.com/sandervolbeda/lets-meet" class="btn primary" target="_blank" rel="nofollow">Schedule a video call <img src="https://sandervolbeda.nl/wp-content/uploads/2022/07/calendar.png"></a>
        `;

        /* Run function to add HTML after selected element */
        insertAfter(selectElement, element);

    } else {
      createUserCookie(userCookieName);
    }
  }

  function createUserCookie(userCookieName) {
    const userCookieValue = "Yes";
    const userCookieDays = 7;
    let expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + userCookieDays);
    document.cookie = userCookieName + "=" + userCookieValue +"; expires=" + expiryDate.toGMTString() + "path=/";
  }

Schone Cookie code

Wil je de code niet aanpassen? Hier is een ‘schoon’clean’ voorbeeld dat je kunt kopiëren en plakken in je JavaScript-bestand.

document.addEventListener("DOMContentLoaded", function () {
    const userCookieName = "returningVisitor";
    checkUserCookie(userCookieName);
});

function checkUserCookie(userCookieName) {
    const regEx = new RegExp(userCookieName, "g");
    const cookieExists = document.cookie.match(regEx);
    
    if (cookieExists != null) {
        
    /* ADD CHANGES HEREH */

    } else {
      createUserCookie(userCookieName);
    }
  }

  function createUserCookie(userCookieName) {
    const userCookieValue = "Yes";
    const userCookieDays = 7;
    let expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + userCookieDays);
    document.cookie = userCookieName + "=" + userCookieValue +"; expires=" + expiryDate.toGMTString() + "path=/";
  }

Samenvatting

Kortom, dit artikel ging over het personaliseren van website inhoud voor terugkerende bezoekers met behulp van JavaScript. Er is uitgelegd hoe je een cookie kunt instellen om de terugkerende bezoekers te identificeren, hoe je de inhoud van de kop (h1), alinea en knop kunt veranderen, en hoe je de cookie kunt opruimen. Er is ook een voorbeeld van een schone code gegeven die gekopieerd en geplakt kan worden in een JavaScript-bestand.

Logo Freelance CRO specialist Sander Volbeda

Werkzaam vanuit Groningen voor bedrijven in het binnen- en buitenland. Laten we een kennismaking inplannen. Je zit uiteraard nergens aan vast.

Stuur een bericht
© 2024 Sander Volbeda, Alle rechten voorbehouden
KVK: 53236734 BTW: NL002247968B39