Formular-Tracking

Formular-Interaktionen messen

Die Formular-Event API bietet eine Möglichkeit, Informationen über die Nutzung von Formularen bis auf Feldebene zu messen die in den Formularanalyse Report einfließen.

Voraussetzungen

1. Um die Formular Event API nutzen zu können, benötigst du eine etracker analytics Pro oder Enterprise Edition.
2. Der Tracking Code ist auf der Seite integriert, auf der ein Formular-Event ausgelöst werden soll.

Aufbau von Formularen

Die zu messenden Formulare benötigen einen eindeutigen Namen, der an etracker übergeben wird, umeine korrekte Zuordnung zu gewährleisten. Ein Formular kann in mehrere Sektionen aufgeteilt sein. Diese Sektionen entsprechen bspw. einer einzelnen Seite in einem mehrseitigen Bestellformular oder einem sich neu öffnenden Tab, der erscheint, wenn z.B. Vorbedingungen (wie die korrekte Befüllung bestimmter Felder) erfüllt wurden. Genau wie der Formularname ist auch der Sektionsname innerhalb des Formulars ein eindeutiger Identifikator. In einer Sektion können ein oder mehrere Formularfelder vorhanden sein. Auch hier erfolgt die Identifikation innerhalb einer Sektion über einen eindeutigen Formularfeld-Namen. Im Folgenden wird näher auf die einzelnen zu übergebenden Informationen eingegangen.

Aufbau der Funktionen

Der Aufruf der Funktion folgt generell folgendem Schema:

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

Dabei bezeichnet eventType um was für ein Form-Event es sich handelt. Unter formName wird der Name eingetragen, unter dem das Formular im Report erscheinen. Das Feld formEventData enthält weitere Informationen, die allerdings nur bei bestimmten Event-Typen übergeben werden dürfen.

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

Mögliche Event-Typen

formView

Mit der formView wird die Information an etracker weitergegeben, dass ein bestimmtes Formular gesehen wurde. Dieses Event sollte immer dann ausgelöst werden, wenn ein Besucher das Formular initial aufruft. Ein Formular hat stets einen eindeutigen Namen, dessen Wert mit dem Schlüssel formName übergeben wird. Anhand dieses Namens kann das Formular im Report identifiziert werden. Allgemeine Form des Aufrufs:

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

Dies kann innerhalb eines Besuches auch mehrmals passieren ,wenn der Besucher während seines Besuches noch einmal zu dem von dir festgelegten Zeitpunkt neu in das Formular einsteigt. Das Abschicken eines formView erzeugt eine Form Impression im entsprechenden Report. Kann der Besucher während seines Besuches erneut in das bereits bearbeitete Formular einsteigen, so muss der Website-Betreiber entscheiden, ob dies für ihn eine neue Form-Impression ist (und dann entsprechend eine weiteres formEvent vom Typ formView mit diesem Formularnamen erzeugen). Beispielaufruf:

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

In diesem Fall wird eine Form Impression für das Formular mit dem Namen Bestellformular erzeugt.

formFieldsView

Mit einer formFieldsView werden Informationen über die Felder an etracker übergeben, die der Website-Besucher gesehen hat, sowie die Sektion, in der sich diese Felder befinden. Ein Formular besteht aus einer oder mehreren Sektionen. Die einzelne Sektion sollte pro Formular immer einen eindeutigen Namen haben, dessen Wert mit dem Schlüssel sectionName übergeben wird. Eine Sektion kann ein oder mehrere Formularfelder enthalten. Diese Formularfelder werden in einem Array mit dem Namen sectionFields übergeben. Ein Formularfeld wird als Objekt innerhalb des Arrays der sectionFields übergeben. Das Objekt hat zwei Eigenschaften: name und type. Das Formularfeld sollte immer einen eindeutigen Namen innerhalb der Sektion haben, dessen Wert in der Eigenschaft name übergeben wird. Weiterhin hat es immer einen Typ, der in der Eigenschaft type mit übergeben wird. Als Typ wird ein String erwartet, der den Typen des Formularfeldes beschreibt. Wir empfehlen, eine String-Repräsentation des entsprechenden HTML Formularelement-Types anzugeben. Als Formulartyp kann aber auch ein eigener Bezeichner verwendet werden.

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

Mit diesem Aufruf wird die Information an etracker übergeben, dass der Website-Besucher die Sektion mit dem Namen <section_name> und die in den sectionFields angegebenen Felder gesehen hat.

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

formFieldInteraction

Mit dem Eventtyp formFieldInteraction kann die Information an etracker übergeben werden, dass mit einem bestimmten Feld interagiert wurde.

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

Wenn also der Besucher der Website im Bestellformular in der Sektion Adressdaten mit der Checkbox Anrede interagiert hat (zum Beispiel die Auswahl ‚Herr‘ durch einen Klick ausgewählt hat), könnte der entsprechende Aufruf an etracker so lauten:

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

Im entsprechenden Report wird dann eine Interaktion für dieses Formularfeld, diese Sektion und dieses Formular gezählt.

formFieldError

Mit dem Eventtyp formFieldError kann die Information an etracker übergeben werden, dass in einem bestimmten Feld ein Fehler auftrat.

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

Wenn also der Besucher der Website im Bestellformular in der Sektion Adressdaten im Text-Input Nachname einen Fehler erzeugt hat (zum Beispiel ein erforderliches Feld leer gelassen hat), könnte der entsprechende Aufruf an etracker so lauten:

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

Im entsprechenden Report wird dann ein Fehler für dieses Formularfeld, diese Sektion und dieses Formular gezählt.

formConversion

Mit dem Eventtyp formConversion kann die Information an etracker übergeben werden, dass ein bestimmtes Formular erfolgreich abgeschickt wurde. Allgemein sieht der Aufruf so aus:

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

Wenn der Besucher der Website im Bestellformular erfolgreich das Formular ausgefüllt und abgeschickt hat (z.B. durch Klick auf den ‘Jetzt kaufen’-Button), könnte der entsprechende Aufruf an etracker so lauten:

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

Beispielhafte Implementation

Die Events sollten immer dann an etracker gesendet werden, wenn die entsprechende Aktion z.B. durch den Website-Besucher ausgelöst wurde. Das formView Event kann z.B. ausgelöst werden, wenn der Besucher der Website auf den Link klickt, der das entsprechende Formular öffnet:

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

In diesem Fall wird also für etracker eine formView mit dem Formularnamen Bestellformular erfasst, sobald der Kunde auf den Link Zum Bestell-Formular klickt. Ebenso kann das formView Event ausgelöst werden, wenn eine Seite geladen wird, die ein Formular enthält oder wenn ein Formular im sichtbaren Bereich der betrachteten Seite erscheint.