Data capture

Doelgroep: landingspagina template bouwers

In Ternair Marketing Cloud kunnen via de HTML-code van een landingspagina verschillende functionaliteiten worden bepaald. Deze functionaliteiten begeleiden de gebruiker in het invullen van het datacapture formulier dat wordt gebruikt op een landingspagina.

Gebruik de functietoetsen CTRL-F om de HTML-code te doorzoeken.

 

Standaardvelden datacapture

De data die via formulieren voor gegevensverzameling wordt verzameld wordt verdeeld in standaardwaarden en andere waarden.

Alle verzamelde standaardwaarden worden opgeslagen in de entiteit ‘Datacapture’ en alle andere waarden worden opgeslagen in de entiteit ‘Datacapture eigenschappen’ onder de bron ‘Campagne Informatie (Ternair)’.

Standaardwaarden

Onderstaande standaard profieldata wordt opgeslagen in de entiteit ‘Datacapture’:

EN	NL
lastname	achternaam
surname	voornaam
initials	voorletters
prefix	tussenvoegsel
gender	geslacht
e-mail	email
phone, phonenumber	telefoon
mobile, mobilenumber	mobiel
street	straat
number, housenumber	huisnummer
addition	toevoeging
postalcode, zipcode	postcode
city	plaats
ddgeboorte, birthdate	geboortedatum

 

Alle waarden die niet overeenkomen met een van de hierboven genoemde standaardwaarden worden opgeslagen in de entiteit ‘Datacapture eigenschappen’.

De volgende metadata wordt in Ternair Marketing Cloud aan de datacapture records toegevoegd:

• datum
• selectie_id
• run_id
• blok_id

 

Formulierattributen

De volgende formulierattributen kunnen in een datacapture formulier worden gebruikt.

data-capture-form
Attribuut om het formulier te herkennen. Kan in een formulier of div element geplaatst worden.

data-capture-validate-summary
Foutmeldingen worden standaard onder het tekstvak getoond. Dit attribuut verzamelt alle foutmeldingen boven het formulier.

data-capture-ignore-labels
Labels voor validatie worden met dit attribuut genegeerd (als summary actief is).

data-capture-submit
Opslaan button. Dit attribuut kan alleen gebruikt worden als de <form> tag niet in gebruik is. Als de <form> tag wordt gebruikt kan de standaard submit worden gebruikt: <button type=”submit”>.

data-capture-success
Dit attribuut vervangt de “data-capture-form” content nadat het succesvol is ingediend. Dit element wordt zowel op het formulier als op de content geplaatst. Op het formulierniveau heeft dit attribuut een waarde die overeenkomt met het id van het succes-element.

action
Attribuut met waarde. Dit attribuut kan alleen gebruikt worden bij gebruik van een <form> tag. Dit geeft een tweede landingspagina aan die getoond wordt na het succesvol indienen van het formulier.

Voorbeeld

Formulier met succespagina <div data-capture-form data-capture-validate-summary data-capture-success="successForm"> <div> <label>voornaam</label> <input data-capture value="[voornaam]" placeholder="voornaam"/> </div> <div> <label>email adres</label> <input data-capture value="[email]" placeholder="email"/> </div> <button data-capture-submit>Opslaan</button> </div> <div data-capture-success id="successForm"> We hebben uw gegevens ontvangen. </div>

 

Voorbeeld

Toon na het opslaan van data een tweede landingspagina <form data-capture-form data-capture-validate-summary method="get" action="%%landingpage%%DataCapture_Succes%%"> <div> <label>voornaam</label> <input data-capture value="[voornaam]" placeholder="voornaam"/> </div> <div> <label>email adres</label> <input data-capture value="[email]" placeholder="email"/> </div> <button type="submit"> Opslaan</button> </form>

 

Inputelementen

De volgende inputelementen kunnen worden gebruikt in een datacapture formulier.

data-capture
Deze waarde wordt opgeslagen in de database.

data-capture-required
Veld is goedgekeurd / vereist.

data-capture-int
Numeriek veld (geheel getal). Alleen numerieke waarden kunnen worden ingevoerd.

data-capture-email
Dit veld bevat een e-mailadres. De waarde moet een @ bevatten.

data-capture-custom-message
Attribuut met waarde. De waarde wordt getoond in het geval dat de invoer ongeldig is. Gebruik in combinatie met data-capture-email.

data-capture-validate-message
Attribuut met waarde. De waarde wordt getoond indien het veld leeg is. Dit attribuut wordt eenmalig geplaatst op lijst van elementen (keuzerondje, selectievakjes, drop-down).

value
Attribuut met waarde. Waarden worden gebruikt voor het prefillen van tekstvakken

Voorbeeld
Tekstvak achternaam	<input data-capture data-capture-required value="[Achternaam]" data-capture-validate-message="Achternaam is verplicht"/>
Tekstvak e-mail	<input data-capture name="email" data-capture-email data-capture-required value="[email]" placeholder="email" data-capture-validate-   message="email adres is verplicht" data-capture-custom-message="email address is invalid"/>
Tekstvak schoenmaat	<input data-capture class="form-control" name="schoenmaat" data-capture-int placeholder="schoenmaat" />

 

Keuzerondje, selectievakjes en drop-down elementen

data-capture-value
Attribuut met waarde. Als de waarde overeenkomt met data-capture-value wordt de waarde geselecteerd.

Voorbeeld

Keuzerondje (:radio) <input data-capture type="radio" data-capture-required name="geslacht" value="m" data-capture-value="[geslacht]" data-capture-validate-message="Geslacht is verplicht"> Man <input data-capture type="radio" data-capture-required name="geslacht" value="v" data-capture-value="[geslacht]"> Vrouw

Drop-down (select) <select data-capture name="land" data-capture-value="[land]"> <option value=""></option> <option value="NL">Nederland</option> <option value="BE">Belgie</option> <option value="DE">Duitsland</option> </select>

 

Het formulier in stappen verdelen

data-capture-step
Container attribuut van de stap (deel van het formulier). Dit attribuut moet een waarde bevatten. De eerste stap is 1, een onbeperkt aantal stappen is toegestaan.

Voorbeeld

Tekstbox achternaam <form data-capture-form method="get"> <div data-capture-step="1"> [part 1 form] </div> <div data-capture-step="2"> [part 2 form] </div> <div data-capture-step="3"> [part 3 form] </div> </form>

data-capture-step-next
Button attribuut om naar de volgende stap te gaan. De volgende stap wordt automatisch bepaald (oplopend).

data-capture-step-prev
Button attribuut om naar de volgende stap te gaan. De volgende stap wordt automatisch bepaald (aflopend).

data-capture-step-goto
Button attribuut met waarde. Knop om meteen naar een opgegeven stap te gaan.

data-capture-ignore-validate
Button attribuut om goedkeuring te negeren. Bijvoorbeeld knop om terug te gaan.

Voorbeeld

<div data-capture-form data-capture-validate-summary data-capture-success="successForm"> <div data-capture-step="1"> <div> <label>voornaam</label> <input data-capture value="[voornaam]" placeholder="voornaam"/> </div> <div> <label>email address</label> <input data-capture value="[email]" placeholder="email"/> </div>     <button data-capture-step-next>Next</button> </div>  <div data-capture-step="2"> <div> <div> <label>woonplaats</label> <input data-capture value="[woonplaats]" placeholder="woonplaats"/> </div> <input data-capture type="checkbox" name="isthiscorrect"> My data is correct</div>     <button data-capture-ignore-validate data-capture-step-prev>Previous</button> <button data-capture-submit>Save</button> </div> </div>

 

Automatisch invullen

Door standaard automatisch-invullen attributen te gebruiken worden gebruikers geholpen bij het invullen van het formulier. Wanneer een automatisch-invullen attribuut wordt herkend door een browser worden deze velden automatisch ingevuld.

Let op: automatisch invullen wordt (nog) niet door alle browser ondersteund.

Voorbeeld

<input type="email" name="email" autocomplete="email"> <input type="text" name="family name" autocomplete="family-name">

 

Aanvullende opmerkingen

Functioneel

Het selectievak ‘Datacapture’ moet worden aangevinkt in de template-instellingen voor de landingspagina. Dit zorgt ervoor dat de benodigde scripting voor de datacapture functionaliteiten op de landingspagina wordt aangemaakt.

Verder kunnen meerdere formulieren op één landingspagina worden geplaatst. Gebruik “data-capture-success” als de formulieren met meerdere waarden worden opgeslagen.

Technisch

jQuery hoeft niet in een landingspagina te worden ingeladen. Dit wordt standaard gedaan.

Scripts dienen bovenaan de pagina geplaatst te worden om conflicten te voorkomen.