Voor degenen die gewoon de code willen kopiëren/plakken.

Een Git commit terugdraaien (kan elke commit zijn):

git revert {commit_id}

De laatste Git commit terugdraaien:

git reset --soft HEAD~1

Hoe kun je je commit terugdraaien?

In dit geval zullen we de hele commit terugdraaien. Anders zul je alle wijzigingen handmatig moeten doorlopen. Het maakt niet uit of het de laatste commit is of een commit die je eerder gedaan hebt.

Door een commit terug te draaien, zul je een nieuwe commit aanmaken. De nieuwe commit maakt alle wijzigingen ongedaan die gemaakt zijn binnen de commit die je terugdraait.

git revert {commit_id}

Waar vind ik de git commit ID in Github?

Voordat we de commit kunnen terugdraaien, moeten we zijn ID weten. Voor dit voorbeeld zal ik GitHub gebruiken om te laten zien waar het is.

1. Ga naar het beginscherm van je archief

2. Gebruik de dropdown om te wisselen van de master (of hoofd) branch naar de branch waar je de commit hebt gedaan die je wilt terugdraaien

3. Nu is er een blok dat zegt: Deze tak ligt X commit voor op master. Klik op de X commit vooruit.

4. Klik op het kopieer-icoon “Kopieer de volledige SHA”, dat is de commit ID

5. Plak het nu in de regel code die aan het begin van het artikel wordt gedeeld

git revert 5cfc208de9dd834e4625c42d29639840c910f969

Plak de regel in de terminal, en het zou allemaal goed moeten werken.

De laatste commit terugzetten

Om je laatste commit op de branch waar je op zit ongedaan te maken, is er een eenvoudigere code. Je hebt de commit ID niet nodig zoals in de voorgaande stappen.

git reset --soft HEAD~1

Dat is alles! Aanvullende bronnen zijn te vinden op Stack Overflow en in deze GitHub repository.

* 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:

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.

De variant(en) die je hebt aangemaakt in Google Optimize lijken te werken als je het experiment hebt gebouwd. Je hebt het experiment gecontroleerd op verschillende apparaten, de pagina targeting ingesteld en de metrics gedefinieerd die relevant zijn. Het is tijd om het experiment te publiceren, altijd een enigszins zenuwslopend moment.

Nu is het tijd om in de browser te controleren of het experiment live is en of het werkt. Vanwege caching is het slim om een nieuw incognito venster te openen. Openen, sluiten, openen, sluiten …. het kan een paar pogingen duren voordat je de gewenste variant te zien krijgt. Daarnaast is het niet altijd duidelijk in welke variant je zit.

In dit artikel vertel en laat ik zien hoe je naar verschillende varianten van één experiment kunt overschakelen.

Cookies Google Optimize

Bij het publiceren van een experiment plaatst Google Optimize een cookie in de browser van de bezoeker. Google Optimize doet dit om te voorkomen dat de bezoeker meerdere varianten binnen hetzelfde experiment te zien krijgt. Dit is erg belangrijk anders krijg je onbetrouwbare gegevens.

Om varianten van gepubliceerde experimenten te zien moet je de cookie aanpassen. Daar kom ik nog op terug. Er is nog wat meer informatie die je moet weten.

Het slechte aan Cookies

Tegenwoordig worden cookies door browsers heel snel gereset. Safari reset cookies in sommige gevallen al na 24 uur, wat slecht is voor onze data.

Browsers die helemaal gericht zijn op privacy krijgen ook steeds meer gebruikers. Denk aan de browser Brave. Ze beschermen de gebruikers en cookies zijn niet altijd even gebruiksvriendelijk, dus blokkeren ze die.

Voorlopig zou je, indien mogelijk, je data van je experimenten alleen op de Chrome-browser kunnen filteren. Dan krijg je de meest betrouwbare gegevens.

Hoe je handmatig varianten van je gepubliceerde experimenten kunt bekijken

We gaan onze eigen cookies veranderen om ons de verschillende varianten van een experiment te laten zien. Voor de onderstaande stappen gebruik ik de browser Google Chrome. Ik neem aan dat dit ook zo werkt met andere browsers.

1. Open je browser
2. Ga naar de website en de pagina waar het experiment actief is
3. Gebruik je rechtermuisknop op de pagina en kies inspecteren
4. Ga in de bovenste balk van de ontwikkelaarstools naar Application (Toepassing)

5. Ga in de linker zijbalk van de ontwikkelaarstools (tabblad Application/Toepassing) naar Opslag > Cookies en selecteer het domein waarop het experiment actief is.
6. Typ in de filterbalk _gaexp (kopieer het van het codeblok hieronder zodat het geen HTML bevat)

_gaexp

7. Controleer of de value (waarde) gelijk is aan het experiment ID. Het experiment-ID is te vinden in het tabblad Google Optimize details.

8. Pas het laatste cijfer van de value (waarde) aan. Het origineel wordt weergegeven als 0, variant 1 is gelijk aan 1 enzovoort
9. Vernieuw de pagina. Google Optimize moet opnieuw geladen worden
10. Je ziet nu de variant die je hebt geselecteerd

Hieronder zie je het voorbeeld. Ik heb het origineel (controle) veranderd in variant 1. Hetzelfde werkt met variant 2 enz.

Dat is het. Je hebt nu volledige controle over welke experimentele variant je wilt zien, zonder dat je de incognito modus meerdere keren hoeft te openen.

Samenvatting

In dit artikel heb ik uitgelegd waarom en hoe de cookies werken met Google Optimize. Je kunt nu de cookie wijzigen, wat betekent dat je zelf kunt bepalen welke variant je te zien krijgt.

TIP: Zorg ervoor dat je je IP-adres hebt gefilterd in Google Analytics 4, anders zou dit proces je data kunnen beïnvloeden.