Home › Blog › Google Tag Manager › Inschrijvingen Klaviyo formulieren meten met Google Tag Manager

Inschrijvingen Klaviyo formulieren meten met Google Tag Manager

Klaviyo is een populair e-mailmarketing software. Ook wel ESP genoemd (E-mail Service Provider). Door de AVG-wetgeving is het populaire MailChimp (Amerikaans bedrijf) minder geschikt voor Europese gebruikers. Om die reden stappen veel gebruikers over naar een andere aanbieder, zoals Klaviyo.

Door deze toename, vragen steeds meer gebruikers zich af hoe ze Klaviyo formulieren kunnen meten. Bijvoorbeeld een inschrijving voor een mailing op de website.

De supportpagina’s van Klaviyo geven wél goede informatie hoe je direct informatie naar Google Analytics stuurt. Maar niet hoe je dit kan doen via Google Tag Manager. Bijvoorbeeld als je Analytics via GTM hebt geïmplementeerd. Dit artikel is een bondig stappenplan voor hoe je met behulp van GTM Klaviyo formulieren meetbaar maakt.

Op de supportpagina van Klaviyo, zie vorige link, lees je dat het mogelijk is om weergaves van het formulier, het sluiten van het formulier en het versturen van het formulier te meten middels een zogenaamde ‘listener’. Een stukje code dat ‘luistert’ naar acties rondom de formulieren van Klaviyo. Op de supportpagina is deze code te vinden. De basis van deze code gebruiken we in Google Tag Manager. Zie het volgende script.

<script>
window.addEventListener(‘klaviyoForms’, function(e) {
window.dataLayer.push({
event: ‘klaviyoEvent’,
klaviyoEventData: e.detail
});
});
</script>

Deze specifieke code heb ik gevonden op Reddit, waar Simo Ahava antwoord gaf op een soortgelijke vraag. Dat bespaart mij een klein beetje schrijfwerk.

De bovenstaande script ‘luistert’ dus naar acties rondom de formulieren. En maakt hiervoor een event aan in GTM. Zie afbeelding.

 

Afbeelding 1 – Event klaviyo in Google Tag Manager

 

Stap 1 – Plak de listener-code

De bovenstaande code kopieer en plak je in een ‘Aangepaste HTML’ tag. Te vinden via Tags → Nieuw → Aangepaste HTML. Geef de tag een naam. Bijvoorbeeld: ‘cHTML – Klaviyo listener’. En sla deze op. Ga naar de voorbeeldmodus door te klikken op ‘Voorbeeld’.

 

Stap 2 – Test de tag in voorbeeldmodus

Als je in de voorbeeldmodus je inschrijft voor een mailing en/of nieuwsbrief. Dan zie je dat het event ‘klaviyoEvent’ verschijnt. Precies zoals in de bovenstaande afbeelding. Klik op het event ‘klaviyoEvent’ en ga naar het tabblad ‘Datalayer’. In de dataLayer vind je bij ‘klaviyoEventData’ diverse informatie terug. Zie onderstaande afbeelding als voorbeeld.

Afbeelding 2 – Klaviyo data in datalayer

 

Stap 3 – Stel een variabele uit gegevenslaag in

Om de inschrijvingen te meten als doel. Halen we informatie uit de dataLayer. In dit geval de de informatie van ‘type’ bij ‘klaviyoEventData’. Deze stellen we in als variabele uit gegevenslaag (dataLayer variabele). Dit is eenvoudig via Variabelen → Nieuw → Variabele voor gegevenslaag. Typ bij ‘naam voor variabele van gegevenslaag’: ‘klaviyoEventData.type’. Geef het een naam. En sla de variabele op.

 

Afbeelding 3 – Instellingen datalayer variabele voor Klaviyo

 

Stap 4 – Creëer een trigger

Maak vervolgens een trigger aan: Triggers → Nieuw → Aangepaste gebeurtenis. En vul bij ‘Naam van gebeurtenis’, ‘klaviyoEvent’ in (uit stap 2).

 

Afbeelding 4 – Klaviyo event trigger

 

Het is mogelijk om een extra voorwaarde mee te geven. Bijvoorbeeld alleen bij ‘submit’ van het formulier. Zie afbeelding.

 

Afbeelding 5 – Extra voorwaarde event trigger

 

Deze trigger gebruik je vervolgens voor al je gewenste tags in Google Tag Manager. Bijvoorbeeld voor het sturen van een gebeurtenis naar Universal Analytics. Zoals in dit voorbeeld.

 

Stap 5 – Maak een gebeurtenis tag aan

Dan rest ons enkel nog het instellen van een gebeurtenis voor Google Analytics via GTM. Maak een nieuwe tag via Tags → Nieuw → Google Analytics – Universal Analytics. Kies in het dropdownmenu voor ‘Gebeurtenis’. En vul vervolgens de parameters in. Kies bij categorie bijvoorbeeld voor ‘Klaviyo’ of ‘Klaviyo events’. En gebruik bij gebeurtenis actie de eerder aangemaakte variabele (uit stap 3). Zie onderstaande afbeelding.

Deze variabele retourneert ‘submit’ na de verzending van het formulier. Naast het feit dat het fijn is om te registreren wat er precies gemeten is, is dit ook nodig om bij de volgende stap een doel in te stellen in Google Analytics. Gebruik het veld ‘Label’ om eventueel extra informatie mee te geven, bijvoorbeeld de pagina waar de inschrijving heeft plaatsgevonden. En bij het veld ‘Waarde’ voeg je eventueel de waarde van een inschrijving toe. In dit specifieke voorbeeld heb ik de laatste twee velden leeg gelaten.

 

Afbeelding 6 – Tagconfiguratie event tracking Analytics 

 

Stap 6 – Stel een gebeurtenis in als doel

Ga naar de beheerdersinstellingen van Google Analytics. En kies bij de kolom ‘Weergave’ voor ‘Doelen’. Kies voor de optie ‘Aangepast’ en geef het nieuwe doel een toepasselijke naam. In mijn geval ‘Nieuwsbrief inschrijving’. Daarna selecteer ik ‘Gebeurtenis’ en klik ik op de blauwe knop ‘Doorgaan’.

Bij ‘Doeldetails’ stel je alle voorwaarden van het doel in. Zie afbeelding. In dit geval stel ik voorwaarden in voor zowel de gebeurteniscategorie als de gebeurtenisactie. Omdat ik kies voor ‘gelijk aan’ dient de waarde exact overeen te komen. Klik op opslaan en de klus is geklaard.

 

Afbeelding 7 – Configuratie gebeurtenisdoel in Universal Analytics

 

Stap 7 – Test en publiceer de wijzigingen

Voordat je alle wijzigingen in de GTM container publiceert, is het verstandig om alles te testen via de voorbeeldmodus van Google Tag Manager én de real time rapportage van Universal Analytics. Als alles naar wens werkt, publiceer je de nieuwe versie van jouw GTM container.

Mocht je er niet uitkomen, kan je altijd gebruik maken van onze support.