E-mailadres ophalen uit LocalStorage en toevoegen aan een HTML-tag in Google Tag Manager

Met behulp van LocalStorage kun je het e-mailadres van een gebruiker opslaan en ophalen. Dit e-mailadres kun je vervolgens gebruiken als User-Provided Data in je Google Analytics 4 (GA4) en Google Ads tags. Volg onderstaande stappen om dit te realiseren.

Stap 1: Controleer of het e-mailadres in LocalStorage staat

Open de ontwikkelaarstools van je browser (F12 of rechtsklik op de pagina en kies "Inspecteren").

Ga naar het tabblad Application.

Klik links in het menu op LocalStorage en selecteer de URL van je website.

Zoek naar de key waarin het e-mailadres is opgeslagen. Dit is vaak een duidelijk benoemde key, zoals userEmail of email.

Let op: Zorg dat de LocalStorage van je website correct wordt gevuld voordat je deze stappen uitvoert. Neem contact op met je ontwikkelaar als je niet zeker weet waar het e-mailadres wordt opgeslagen.

Je zal wel je e-mailadres al ingevuld moeten hebben in je sessie wil je dit testen.

Stap 2: Maak een nieuwe variabele in Google Tag Manager

Log in op je Google Tag Manager-account.

Klik op Variabelen in het linker menu.

Klik op Nieuwe variabele en geef deze een naam, bijvoorbeeld LocalStorage Email.

Kies als variabelesoort Aangepaste JavaScript-variabele.

Voeg de volgende code toe:

function() {
    return localStorage.getItem('userEmail') || '';
}

Opmerking: Vervang 'userEmail' door de exacte key waarin het e-mailadres in LocalStorage staat.

Klik op Opslaan.

Stap 3: Voeg een HTML-tag toe om het e-mailadres door te sturen

Ga naar het tabblad Tags in Google Tag Manager.

Klik op Nieuwe tag en geef deze een naam, bijvoorbeeld Stuur e-mailadres naar GA4.

Kies als tagtype Aangepaste HTML.

Voeg de volgende code toe:

<script>
    (function() {
        var email = {{LocalStorage Email}};
        if (email) {
            gtag('set', 'user_properties', {
                email: email
            });
        }
    })();
</script>

Klik op Triggering en selecteer een geschikte trigger, bijvoorbeeld All Pages of een specifieke pagina waarop je het e-mailadres wilt doorsturen.

Klik op Opslaan.

Stap 4: Test je configuratie

Klik in Google Tag Manager op Voorbeeld om de Debug-modus te activeren.

Open je website in een nieuw venster.

Controleer in de Debug Console of de variabele LocalStorage Email wordt gevuld.

Controleer ook of de HTML-tag correct wordt uitgevoerd en het e-mailadres doorgeeft.

Stap 5: Toevoegen aan een user-provided data variabele

Maak een nieuwe variabele aan, als type kies je voor User-Provided Data.

Selecteer 'Manual Configuration' en bij 'E-mail' selecteer je je zojuist aangemaakte E-mail variabele.

Je kan ook andere door de gebruiker verstrekte gegevens hier invullen als die op te halen zijn uit de sessie van de gebruiker.

Sla de variabele op.

Stap 6: Publiceer je wijzigingen

Als alles werkt zoals verwacht, klik je op Submit in Google Tag Manager.

Voeg een beschrijving toe, bijvoorbeeld Toevoegen van LocalStorage e-mailvariabele.

Klik op Publiceren.

Veelgestelde vragen

Wat moet ik doen als het e-mailadres niet wordt opgehaald?

Controleer of het e-mailadres daadwerkelijk in LocalStorage wordt opgeslagen.

Zorg ervoor dat je de juiste key gebruikt in je JavaScript-variabele.

Kan ik andere gegevens uit LocalStorage gebruiken?

Ja, je kunt ook andere gegevens ophalen door de key in het script aan te passen.

Is het veilig om een e-mailadres in LocalStorage op te slaan?

Het is belangrijk om zorgvuldig om te gaan met gebruikersgegevens. Gebruik HTTPS en zorg ervoor dat gevoelige gegevens niet toegankelijk zijn via JavaScript in ongeautoriseerde contexten.

Met deze handleiding kun je eenvoudig een e-mailadres ophalen uit LocalStorage en deze doorsturen als User-Provided Data. Heb je vragen of kom je er niet uit? Neem gerust contact op met onze supportafdeling!

Bijgewerkt op: 22/01/2025