Wat je kunt verwachten van deze handleiding?
Wanneer je aan de slag gaat met event tracking zul je al snel tegen de vraag aan lopen hoe je op de juiste manier formulier inzendingen kunt doorsturen naar Google Analytics. In deze handleiding zal ik je stap voor stap uitleggen hoe je form tracking kunt instellen voor Ninja Forms.
Mocht je alleen de succesvolle inzendingen willen doorsturen naar GA4 dan hoef je alleen event 4 in te stellen. Maar ik raad je aan om ook de andere events in te stellen. Hiermee kun je ook inzicht krijgen in de obstakels die mensen ervaren bij het invullen van het formulier en hoeveel mensen afhaken tijdens het invullen van een formulier.
Inhoudsopgave:
In dit artikel leg ik je uit hoe je voor Ninja Forms de volgende vier events kunt doorsturen naar GA4 via Google Tag Manager.
Event 1: Formulier vertoningen meten (nf_form_view)
Onderstaand script dient toegevoegd te worden aan het javascript bestand (als je zelf bij de code kan) of voeg deze toe middels een HTML tag (als je niet zelf bij de code kan).
Stap 1.1: Voeg onderstaande listener toe aan de code
Optie 1: Via de code: Dit kan alleen als je toegang hebt tot de code en is niet aan te raden als je geen ervaring hebt met Javascript.
$(document).on('nfFormReady', function (e, layoutView) {
var el = layoutView.el;
var transform = el.split('-');
var form_id = transform[2];
dataLayer.push({
'event': 'ninjaFormReady',
'NinjaFormID': form_id,
});
});
Optie 2: Via Google Tag Manager: Dit doe je door een Tag aan te maken met als type ‘Custom HTML’. Vervolgens voeg je bovenstaande code toe en als trigger kies je ‘All pages’.
Stap 1.2: Maak een NinjaFormID variabele aan
- Dit doe je door naar Variables te gaan, een nieuwe ‘User-Defined’ variabele aan te maken en bij type ‘Data Layer Variable’ te kiezen.
- Vul bij Data Layer Value ‘NinjaFormID’ in. Mocht je de naam van de variabele veranderen in de code bij stap 1.1, dan moet je dat hier uiteraard ook doen.
Geef de variabele de naam Ninja Forms – ID (dit mag elke naam zijn die je wilt).
Stap 1.3: Maak een trigger aan voor de form start
Dit doe je door naar Triggers te gaan, een nieuwe trigger aan te maken en bij type voor ‘Custom Event’ te kiezen. Voer als event naam hetgeen in wat in de code staat achter ‘event’ (in het voorbeeld: ninjaFormReady).
Geef de trigger de naam NF – form_view (dit mag elke naam zijn die je wilt).
Stap 1.4: Maak een tag aan waarmee je de gebeurtenis naar GA4 stuurt
- Dit doe je door naar Tags te gaan, een nieuwe tag aan te maken en bij type ‘GA4 Gebeurtenis’ te kiezen.
- Kies vervolgens de juiste Configuration Tag (dit is de GA4 tag waar je de gebeurtenis naar door wilt sturen).
- Vul bij Event Name ‘nf_form_view’ in.
- Voeg een Event Parameter toe met als parameter name ‘form_id’ en als value {{Ninja Forms – ID}}
- Kies de aangemaakte (NF – form_view) trigger.
Geef de tag de naam GA4 – Event – nf_form_view (dit mag elke naam zijn die je zelf wilt).
Stap 1.5: Aangepaste statistiek aanmaken
Vervolgens moet je alleen nog een aangepaste statistiek toevoegen om de form_id parameter te ontvangen in GA4. Dit doe je als volgt:
- Ga naar het juiste account in GA4. Selecteer de GA4 property waar je mee bezig bent.
- Ga linksonderin naar Beheer door op het tandwiel icoontje te klikken.
- Ga in het rechter deel naar ‘Custom definitions’.
- Klik op Create custom dimensions.
- Vul bij Dimension name Form ID in & bij Event parameter ‘form_id’. De name mag je zelf bepalen, de event parameter moet gelijk zijn aan de parameter name die je gebruikt in Google Tag Manager.
Event 2: Form starts meten (nf_form_start)
Belangrijk om te weten: zonder Event 1 zal deze gebeurtenis niet goed worden doorgestuurd.
Stap 2.1: Enhanced measurement aanzetten
- Ga naar het juiste account in GA4. Selecteer de GA4 property waar je mee bezig bent.
- Ga linksonderin naar Beheer door op het tandwiel icoontje te klikken.
- Ga in het rechter deel naar ‘Data Streams’ en klik vervolgens op de betreffende Stream.
- Klik vervolgens op het tandwieltje bij ‘Enhanced measurement’ (een andere dan waar je eerder op klikte).
- Vink ‘Form interactions’ aan.
Stap 2.2: Maak een form_start trigger
Dit doe je door naar Triggers te gaan, een nieuwe trigger aan te maken en bij type voor ‘Custom Event’ te kiezen. Voer als event naam ‘form_start’ in.
Geef de trigger de naam NF – form_start (dit mag elke naam zijn die je zelf wilt).
Stap 2.3: Maak een tag aan waarmee je de gebeurtenis naar GA4 stuurt
- Dit doe je door naar Tags te gaan, een nieuwe tag aan te maken en bij type ‘GA4 Gebeurtenis’ te kiezen.
- Kies vervolgens de juiste Configuration Tag (dit is de GA4 tag waar je de gebeurtenis naar door wilt sturen).
- Vul bij Event Name ‘nf_form_start’ in.
- Voeg een Event Parameter toe met als Parameter Name ‘form_id’ en als value {{Ninja Forms – ID}}
- Kies de aangemaakte (NF – form_start) trigger.
Geef de tag de naam GA4 – Event – nf_form_start (dit mag elke naam zijn die je zelf wilt).
Event 3: Submit pogingen meten (nf_form_attempt)
Belangrijk om te weten: zonder Event 1 zal deze gebeurtenis niet goed worden doorgestuurd.
Stap 3.1: Maak de Click Element variabele aan
Dit doe je door naar Variables te gaan, een nieuwe ‘Built-in’ variabele aan te maken en onders Clicks te kiezen voor Click Element.
Stap 3.2: Maak een form_attempt trigger
- Dit doe je door naar Triggers te gaan, een nieuwe trigger aan te maken en bij type ‘Click – All elements’ te kiezen.
- Klik vervolgens op ‘Some Clicks’.
- Kies als variabele ‘Click Element’, kies voor ‘matches CSS selector’ en voer vervolgens ‘.submit-wrap input’ als waarde in.
Geef de trigger de naam NF – form_attempt (dit mag elke naam zijn die je zelf wilt).
Stap 3.3: Maak een tag aan waarmee je de gebeurtenis naar GA4 stuurt
- Dit doe je door naar Tags te gaan, een nieuwe tag aan te maken en bij type ‘GA4 Gebeurtenis’ te kiezen.
- Kies vervolgens de juiste Configuration Tag (dit is de GA4 tag waar je de gebeurtenis naar door wilt sturen).
- Vul bij Event Name ‘nf_form_attempt’ in.
- Voeg een Event Parameter toe met als Parameter Name ‘form_id’ en als value {{Ninja Forms – ID}}
- Kies de aangemaakte (NF – form_attempt) trigger.
Geef de tag de naam GA4 – Event – nf_form_attempt (dit mag elke naam zijn die je zelf wilt).
Event 4: Successvolle inzendingen meten (nf_form_success)
Stap 4.1: Voeg onderstaande listener toe aan de code
Onderstaand script wordt alleen uitgevoerd wanneer het formulier correct is ingevuld. Hiermee kunnen we dus een nf_form_succes event doorsturen. Wil je alleen maar de succesvolle inzendingen meten, dan is dit scriptje voldoende. Voeg deze toe aan de het javascript bestand (als je zelf bij de code kan) of voeg deze toe middels een HTML tag (als je niet zelf bij de code kan).
Optie 1: Via de code: Dit kan alleen als je toegang hebt tot de code en is niet aan te raden als je geen ervaring hebt met Javascript.
$(document).on('nfFormSubmitResponse', function(event, response, id) {
dataLayer.push ({
'event' : 'ninjaFormSuccess',
'NinjaFormID' : response.id,
'NinjaFormTitle' : response.response.data.settings.title
});
});
Optie 2: Via Google Tag Manager: Dit doe je door een Tag aan te maken met als type ‘Custom HTML’. Vervolgens voeg je bovenstaande code toe en als trigger kies je ‘All pages’.
Stap 4.2: Maak een NinjaFormID & NinjaFormTitle variabele aan
Onder stap 1.2 heb ik je al uitgelegd hoe je een NinjaFormID variabele toevoegt. Mocht je alleen dit event willen meten dan moet je dit opnieuw doen voor NinjaFormID. Daarnaast moet in ieder geval ook hetzelfde worden gedaan voor NinjaFormTitle.
Geef de variabele de naam Ninja Forms – Title (dit mag elke naam zijn die je zelf wilt).
Stap 4.3: Maak een form_success trigger
Dit doe je door naar Triggers te gaan, een nieuwe trigger aan te maken en bij type voor ‘Custom Event’ te kiezen. Voer als event naam ‘ninjaFormSuccess’ in.
Geef de trigger de naam NF – form_success (dit mag elke naam zijn die je zelf wilt).
Stap 4.4: Maak een tag aan waarmee je de gebeurtenis naar GA4 stuurt
- Dit doe je door naar Tags te gaan, een nieuwe tag aan te maken en bij type ‘GA4 Gebeurtenis’ te kiezen.
- Kies vervolgens de juiste Configuration Tag (dit is de GA4 tag waar je de gebeurtenis naar door wilt sturen).
- Vul bij Event Name ‘nf_form_success’ in.
- Voeg een Event Parameter toe met als Parameter Name ‘form_id’ en als value {{Ninja Forms – ID}}
- Voeg vervolgens nog een Event Parameter toe met als Parameter Name ‘form_name’ en als value {{Ninja Forms – Title}}
- Kies de aangemaakte (NF – form_attempt) trigger.
Geef de tag de naam GA4 – Event – nf_form_success (dit mag elke naam zijn die je zelf wilt).
Stap 4.5: Aangepaste statistiek aanmaken
Vervolgens moet je alleen nog een aangepaste statistiek toevoegen om de form_id en form_name parameter te ontvangen in GA4. Als het goed is heb je dit bij Event 1 al gedaan voor form_id, dus in dit voorbeeld zal ik je laten zien hoe je een form_name parameter aanmaakt. Dit doe je als volgt:
- Ga naar het juiste account in GA4. Selecteer de GA4 property waar je mee bezig bent.
- Ga linksonderin naar Beheer door op het tandwiel icoontje te klikken.
- Ga in het rechter deel naar ‘Custom definitions’.
- Klik op Create custom dimensions.
Vul bij Dimension name Form Name in & bij Event parameter ‘form_name’. De name mag je zelf bepalen, de event parameter moet gelijk zijn aan de parameter name die je gebruikt in Google Tag Manager.
