Google Analytics-tracking van events configureren voor een aanmeldingsformulier

Wat je leert

Lees hoe je activiteit vanuit je Klaviyo-aanmeldingsformulieren naar Google Analytics 4 (GA4) stuurt, waaronder formulieropeningen, inzendingen en sluitingen. Je kunt ook belangrijke interacties, zoals form_submit, markeren als belangrijke gebeurtenissen in GA4. Volg dit proces in 2 stappen:

1. Voeg een codefragment toe aan uw website om Klaviyo-aanmeldingsformuliergegevens naar Google Analytics te sturen.
2. Markeer de gebeurtenissen die belangrijk zijn voor je bedrijf als belangrijke gebeurtenissen in Google Analytics.

Voordat je van start gaat

Zorg ervoor dat er een Klaviyo-formulier live staat op je website en dat je Google tag is ingesteld voor je GA4-property voordat je de snippet toevoegt. De snippet gebruikt gtag, dat op de pagina moet worden gedefinieerd en geconfigureerd voordat formulierevents plaatsvinden. Deze snippet verstuurt formulierevents naar GA4; hiermee installeer je Google Analytics niet.

Het configureren van event tracking voor je aanmeldingsformulier in Google Analytics vereist dat je een codefragment op je site plakt. Als je je niet prettig voelt bij het plakken van code en geen developer hebt die je kan helpen, heeft Klaviyo een uitgebreid netwerk van partners in onze Partner Directory. 

Formulieractiviteit in Klaviyo bijhouden

Je kunt Klaviyo-formulieractiviteit in Google Analytics bijhouden door een listener toe te voegen voor de klaviyoForms event en een GA4-event te verzenden voor elke interactie die je wilt meten. Installeer de listener één keer op elke pagina waar je formulieren wilt bijhouden, en zorg ervoor dat deze laadt vóór de formulieractiviteit die je wilt vastleggen.

• Als je Shopify gebruikt, plak je het snippet in je theme.liquid-bestand op een nieuwe regel boven de afsluitende </body> -tag. Let op: als je aangepaste productpagina's gebruikt, moet je dit snippet mogelijk toevoegen aan een ander themabestand of aan je afzonderlijke aangepaste productpagina's.
• Als alternatief kun je, als je Shopify 2.0-thema een Custom Liquid-sectie of -blok heeft, het snippet daar toevoegen op elke template waar je formulier verschijnt. Kies één installatiemethode per pagina om te voorkomen dat je dubbele events verzendt.
• Als je een BigCommerce Stencil-storefront gebruikt, gebruik je Script manager voor dat storefront om het snippet toe te voegen aan de footer op storefrontpagina's.

Gebruik de volgende listener met gtag.js om het openen van formulieren, inzendingen, stapinzendingen, URL-omleidingen en sluitingen naar Google Analytics te sturen:

<script>
  window.addEventListener("klaviyoForms", function(e) { 
    if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
      gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'submit') {
      gtag('event', 'form_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'stepSubmit') {
      gtag('event', 'form_step_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId, 'step_name': e.detail.metaData.$step_name});
    }
    if (e.detail.type == 'redirectedToUrl') {
      gtag('event', 'form_url_redirect', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'close') {
      gtag('event', 'form_close', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
  });
</script>

Sla je websitewijzigingen op en volg daarna de onderstaande teststappen om te bevestigen dat de listener events naar je GA4-property verzendt.

Om verschillende formulierversies bij te houden of A/B-testvariaties te testen, voeg je form_version_id toe aan de parameters van elke gtag-aanroep die je wilt vergelijken. Gebruik bijvoorbeeld deze aanroep in de form_open-branch:

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId, 'form_version_id': e.detail.formVersionId })

Vervang de volgende aanroep in plaats van een tweede aanroep toe te voegen. Laat form_id ingesteld op e.detail.formId, zodat de listener het formulier gebruikt dat de gebeurtenis heeft geactiveerd:

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId })

Als je versies wilt vergelijken in GA4-rapporten of verkenningen, maak dan een aangepaste dimensie met eventbereik voor form_version_id. Gebruik hetzelfde proces voor andere aangepaste parameters waarover je wilt rapporteren, zoals step_name.

Bij een formulier met meerdere stappen kan de browser tijdens één formulierinteractie meer dan 1 submit -event versturen. Met het fragment hierboven stuurt elk van deze events een form_submit-event naar GA4. Het submit-event wordt geactiveerd in de volgende situaties:

• Bij formulieren met e-mail- of sms-abonnementsacties triggert het succesvol indienen van een e-mailadres of telefoonnummer een submit-event.
• Voor formulieren die e-mail- en sms-abonnementen in aparte stappen verzamelen, activeert het verzenden van elke abonnementsstap een verzendgebeurtenis. Als je bijvoorbeeld de e-mailstap indient en daarna de sms-stap, worden er 2 form_submit-gebeurtenissen naar GA4 gestuurd.
• Voor formulieren die alleen profielvelden bevatten, zoals tekstvelden, activeert de eerste ingediende stap die die velden verzamelt een verzendgebeurtenis. Klik om de stap te verzenden op een knop waarbij Actie is ingesteld op Formulier verzenden.

De gebeurtenis stepSubmit wordt geactiveerd wanneer elke stap wordt verzonden. Het fragment stuurt deze interacties naar GA4 als form_step_submit, met form_id en step_name zodat je het formulier en de stap kunt identificeren.

Je tracking code testen

Zodra je de trackingcode op je site hebt geïnstalleerd, kun je die testen om te controleren of data wordt getrackt. Om je code te testen:

1. Ga naar je website en interacteer met je formulier (bijv. door het in te dienen of te sluiten).
2. Open Google Analytics, selecteer de GA4-property die is ingesteld voor je website en ga naar Rapporten > Realtime.
3. Zoek in Aantal gebeurtenissen per gebeurtenisnaam naar de gebeurtenis die overeenkomt met je actie. Als je bijvoorbeeld het formulier sluit, wordt form_close verzonden. Selecteer de gebeurtenis om te controleren of de parameter form Klaviyo-formulier is en of form_id overeenkomt met het formulier dat je hebt getest. Controleer bij een formulier met meerdere stappen form_submit en form_step_submit terwijl je elke aanmeldstap verzendt.

Als je je events niet ziet, zorg er dan voor dat Google Analytics correct is ingesteld en dat het codefragment dat je hebt gebruikt, klopt. Let er ook op dat je events maar 30 minuten zichtbaar zijn in Realtime. Bekijk [GA4] Realtime rapport voor meer details.

Markeer belangrijke formuliergebeurtenissen als belangrijke gebeurtenissen

Nadat je hebt bevestigd dat je formulierevents GA4 bereiken, kies je welke interacties belangrijk genoeg zijn om als belangrijke events te markeren. Kies bijvoorbeeld form_submit om inzendingen te meten. Je hebt toegang als Editor of Beheerder nodig om de onderstaande configuratie te voltooien.

1. Navigeer in Google Analytics naar Beheerder > Gegevensweergave > Gebeurtenissen. Open het tabblad Recente gebeurtenissen en zoek de gebeurtenis die je wilt markeren, zoals form_submit.
2. Klik op het sterpictogram naast de gebeurtenis om deze als een belangrijke gebeurtenis te markeren.

Als je evenement nog niet is verschenen, kun je alvast een nieuw evenement markeren als een belangrijk evenement. Gebruik de exacte naam die door het snippet wordt verzonden, zoals form_submit.

Om inzendingen van een specifiek formulier te tellen, maak je een afzonderlijke gebeurtenis op basis van parameterwaarden met overeenkomende voorwaarden: event_name is gelijk aan form_submit en form_id is gelijk aan de ID van dat formulier. Geef het een unieke naam voor de gebeurtenis en markeer die nieuwe gebeurtenis vervolgens als een sleutelgebeurtenis.

GA4 telt belangrijke gebeurtenissen op basis van de telmethode van de gebeurtenis: Eenmaal per gebeurtenis telt elk voorkomen, terwijl Eenmaal per sessie het één keer binnen een sessie telt. Bekijk het aantal belangrijke gebeurtenissen voor je formulier in Beheerder > Gegevensweergave > Gebeurtenissen op het tabblad Belangrijke gebeurtenissen.

Extra hulpbronnen