Suivi des formulaires

Mesurer les interactions avec les formulaires

L’API d’événements de formulaires permet de mesurer les informations sur l’utilisation des formulaires jusqu’au niveau des champs, ce qui permet d ‘alimenter le rapport d’analyse des formulaires.

Conditions préalables

1. Pour pouvoir utiliser le formulaire Event API, vous avez besoin d’une édition etracker analytics Pro ou Enterprise.
2. Le code de suivi est intégré à la page sur laquelle un événement de formulaire doit être déclenché.

Structure des formulaires

Les formulaires à mesurer nécessitent un nom unique qui est transmis à etracker afin de garantir une attribution correcte. Un formulaire peut être divisé en plusieurs sections. Ces sections correspondent par exemple à une seule page dans un formulaire de commande de plusieurs pages ou à un nouvel onglet qui s’ouvre lorsque, par exemple, des conditions préalables (comme le remplissage correct de certains champs) ont été remplies. Tout comme le nom du formulaire, le nom de la section est un identifiant unique au sein du formulaire. Une section peut contenir un ou plusieurs champs de formulaire. Ici aussi, l’identification au sein d’une section se fait par un nom de champ de formulaire unique. Les informations individuelles à transmettre sont décrites plus en détail ci-dessous.

Structure des fonctions

L’appel à la fonction suit généralement le schéma suivant :

etForm.sendEvent(<eventType>, <formName>[,<formEventData>]);

eventType indique de quel type d’événement formulaire il s’agit. formName est le nom sous lequel le formulaire apparaîtra dans le rapport. Le champ formEventData contient d’autres informations, qui ne peuvent être transmises que pour certains types d’événements.

etForm.sendEvent(<eventType>, <formName>);

Types d’événements possibles

formView

Avec formView, l’information est transmise à etracker qu’un certain formulaire a été vu. Cet événement doit être déclenché à chaque fois qu’un visiteur appelle initialement le formulaire. Un formulaire a toujours un nom unique, dont la valeur est transmise avec la clé formName. Ce nom permet d’identifier le formulaire dans le rapport. Forme générale de l’appel :

etForm.sendEvent('formView', <formName>);

Cela peut se produire plusieurs fois au cours d’une même visite, si le visiteur se connecte à nouveau au formulaire au moment que vous avez choisi pendant sa visite. L’envoi d’un formView crée une Impression de formulaire dans le rapport correspondant. Si le visiteur peut à nouveau accéder au formulaire déjà traité pendant sa visite, l’opérateur du site Web doit décider s’il s’agit pour lui d’une nouvelle Form-Impression (et alors créer en conséquence une autre formEvent du type formView avec ce nom de formulaire). Exemple d’appel :

etForm.sendEvent('formView', 'Bestellformular');

Dans ce cas, un formulaire Impression est créé pour le formulaire nommé Formulaire de commande.

formFieldsView

Un formFieldsView permet de transmettre à etracker des informations sur les champs que le visiteur du site a vus, ainsi que la section dans laquelle se trouvent ces champs. Un formulaire se compose d’une ou de plusieurs sections. Chaque section devrait toujours avoir un nom unique par formulaire, dont la valeur est transmise avec la clé sectionName. Une section peut contenir un ou plusieurs champs de formulaire. Ces champs de formulaire sont placés dans un tableau nommé sectionFields est passé en paramètre. Un champ de formulaire est défini comme un objet à l’intérieur du tableau des sectionFields est transmis à l’objet. L’objet a deux propriétés : name et type. Le champ de formulaire doit toujours avoir un nom unique au sein de la section, dont la valeur est définie dans la propriété name est transmise. De plus, il a toujours un type qui est passé dans la propriété type. Le type attendu est une chaîne de caractères qui décrit le type du champ de formulaire. Nous vous recommandons de spécifier une représentation sous forme de chaîne du type d’élément de formulaire HTML correspondant. Cependant, vous pouvez également utiliser votre propre identifiant comme type de formulaire.

etForm.sendEvent('formFieldsView', <form_name>,
     {
           'sectionName': <section_name>,
           'sectionFields':
                 [
                       {'name': <field_name>,'type': <field_type>},
                       ...
                       {'name': <field_name>,'type': <field_type>}
                 ]
     }
     );

Cet appel permet de transmettre à etracker l’information selon laquelle le visiteur du site a vu la section nommée <section_name> et les champs spécifiés dans les sectionFields .

etForm.sendEvent('formFieldsView', 'Kontaktformular',
     {
           'sectionName': 'Adressangaben',
           'sectionFields':
                 [
                       {'name': 'Anrede', 'type': 'radio'},
                       {'name': 'Vorname','type': 'text'},
                       {'name': 'Nachname','type': 'text'}
                 ]
     }
     );

formFieldInteraction

Le type d’événement formFieldInteraction permet de transmettre à etracker l’information selon laquelle une interaction a eu lieu avec un champ spécifique.

etForm.sendEvent('formFieldInteraction', <form_name>,
     {
           'sectionName': <section_name>,
           'sectionField': {'name': <field_name>,'type':
<field_type>}
     }
     );

Ainsi, si le visiteur du site Web a interagi avec la case à cocher Titre dans la section Données d’adresse du formulaire de commande (par exemple, s’il a sélectionné ‘Monsieur’ en cliquant dessus), l’appel correspondant à etracker pourrait être formulé ainsi :

etForm.sendEvent('formFieldInteraction', 'Bestellformular',
     {
           'sectionName': 'Adressdaten',
           'sectionField': {'name': 'Anrede','type': 'checkbox'}
     }
     );

Dans le rapport correspondant, une interaction est alors comptabilisée pour ce champ de formulaire, cette section et ce formulaire.

formFieldError

Le type d’événement formFieldError permet de transmettre à etracker l’information selon laquelle une erreur est survenue dans un champ donné.

etForm.sendEvent('formFieldError', <form_name>,
     {
           'sectionName': <section_name>,
           'sectionField': {'name': <field_name>,'type':
<field_type>}
     }
);

Ainsi, si le visiteur du site Web a généré une erreur dans la section Données d’adresse du formulaire de commande dans l’entrée de texte Nom de famille (par exemple, s’il a laissé un champ requis vide), l’appel correspondant à etracker pourrait être formulé ainsi :

etForm.sendEvent('formFieldError', 'Bestellformular',
     {
           'sectionName': 'Adressdaten',
           'sectionField': {'name': 'Nachname','type': 'text'}
     }
);

Dans le rapport correspondant, une erreur est alors comptabilisée pour ce champ de formulaire, cette section et ce formulaire.

formConversion

Le type d’événement formConversion permet de transmettre à etracker l’information selon laquelle un formulaire donné a été envoyé avec succès. En général, l’appel se présente comme suit :

etForm.sendEvent('formConversion', <form_name>);

Si le visiteur du site Web a rempli avec succès le formulaire de commande et l’a envoyé (par ex. en cliquant sur le bouton ‘Acheter maintenant’), l’appel correspondant à etracker pourrait être formulé ainsi :

etForm.sendEvent('formConversion', 'Bestellformular');

Exemple de mise en œuvre

Les événements devraient toujours être envoyés à etracker lorsque l’action correspondante a été déclenchée, par exemple par le visiteur du site web. Le site formView L’événement peut être déclenché, par exemple, lorsque le visiteur du site web clique sur le lien qui ouvre le formulaire correspondant :

<a href="bestellformular.html" onmousedown="etForm.sendEvent
('formView', 'Bestellformular');"> Zum Bestell-Formular
</a>

Dans ce cas, un formView avec le nom de formulaire Formulaire de commande est donc enregistré pour etracker dès que le client clique sur le lien Vers le formulaire de commande. De même, l’événement formView peut être déclenché lorsqu’une page contenant un formulaire est chargée ou lorsqu’un formulaire apparaît dans la zone visible de la page consultée.