Integration & Setup

⌘K
  1. Home
  2. Integration & Setup
  3. Tracking Code & SDKs
  4. Tracking Code Integration
  5. Event Tracker

Event Tracker

Mithilfe des Event Trackers können Sie die Interaktionen der Website-Besucher auswerten und damit umfassende Kennzahlen über die Nutzung interaktiver Website-Inhalte erhalten. Diese Ereignisse können über den herkömmlichen Tracking Code nicht gemessen werden. Man benötigt dafür zusätzlich zum etracker Tracking Code eine JavaScript-Funktion, die die Zählung der Interaktionen dynamisch auslöst.

Dieses sogenannte Event Tracker-Funktion ist notwendig, um Klicks auf Links zu messen.

Um die Daten zu erfassen, bauen Sie den entsprechenden JavaScript-Code zur dynamischen Auslösung der Zählung an geeigneter Stelle in die aufzuzeichnende Website ein. Das bietet sich beispielsweise bei Downloads, Abspielen von Videos oder beim Klicken auf Bilder an.

Hinweis:
Alle Werte sind im URL-codierten Format (RFC 3986) nach dem ISO-Standard zu übergeben, insbesondere wenn diese Sonderzeichen enthalten.

Die Event Tracker-Funktion löst die Zählung entsprechend dem auf der Seite implementierten Tracking Code dynamisch aus.

Struktur eines Aufrufs des Event Trackers

Folgende Funktion im etracker JavaScript versendet die jeweiligen Events:

_etracker.sendEvent(Event-Objekt)

Diese universelle Funktion nimmt jedes definierte Event-Objekt entgegen. Die Unterscheidung der verschiedenen Events wird also durch die Event-Objekte definiert. Diese werden im einfachsten Fall direkt in der Funktion erzeugt. Die Erzeugung sollte in jedem Fall mit einem ’new‘ geschehen. Um weitere Informationen zu einem Event an etracker zu übergeben, nutzen Sie das Event-Attribut ‚Type‘ . So ist eine umfangreichere Differenzierung von Events gegeben. Im Event Report unter dem Punkt SegmentierungSegmente HinzufügenContentTyp kann das Event-Attribut ausgewählt werden. JavaScript-Funktion mit einem Click Event:

_etracker.sendEvent(new et_ClickEvent('ExternerLink1','Anzeige1'));

Event Tracker einbauen

Der Event Tracker wird mit dem JavaScript-Code von etracker ausgeliefert und kann über die benutzerdefinierten Events z. B. so eingebaut werden:

Benutzerdefiniertes Event:

<a href="http://www.meineseite.de/test.pdf" onmousedown="_etracker.sendEvent(new et_UserDefinedEvent('myObject', 'myCategory', 'myAction', 'myType'));">PDF-Download</a>

Beispiel Download:

<a href="http://www.meineseite.de/test.pdf" onmousedown="_etracker.sendEvent(new et_UserDefinedEvent('test.html, 'Download', 'Anleitungen', 'PDF'));">Link-Click</a>

Beispiel Link-Click:

<a href="http://www.meineseite.de/link.html" onmousedown="_etracker.sendEvent(new et_UserDefinedEvent('Links.html', 'Links', 'Click', 'Link'));">PDF-Download</a>

Beispiel Button zum Starten eines Films:

<input type="button" value="Film starten" onmousedown="_etracker.sendEvent(new et_VideoStartEvent('Film1','Produktvorstellung'))">

Die Übergabe mittels der Event Tracker Funktionen sieht wie folgt aus:

JavaScript Funktion Beschreibung
et_DownloadEvent(eventObject,eventType) Messung von Downloads von Dokumenten.
et_ClickEvent(eventObject,eventType) Messung von Klicks auf beliebige Elemente.
et_LinkEvent(eventObject,eventType) Messung von Klicks auf interne und externe Links.
et_AuthenticationSuccessEvent(eventObject,eventType) Messung eines erfolgreichen Logins.
et_AuthenticationFailureEvent(eventObject,eventType) Messung eines nicht erfolgreichen Logins.
et_AuthenticationLogoutEvent(eventObject,eventType) Messung eines erfolgreichen Logouts.
et_AudioStartEvent(eventObject,eventType) Messung der Startfunktion eines Musikplayers.
et_AudioStopEvent(eventObject,eventType) Messung der Stopfunktion eines Musikplayers.
et_AudioPauseEvent(eventObject,eventType) Messung der Pausefunktion eines Musikplayers.
et_AudioMuteEvent(eventObject,eventType) Messung der Stummschaltefunkt. eines Musikplayers.
et_AudioSeekEvent(eventObject,eventType) Messung der Abspielposition eines Musikplayers.
et_AudioNextEvent(eventObject,eventType) Messung der Weiterfunktion eines Musikplayers.
et_AudioPreviousEvent(eventObject,eventType) Messung der Zurückfunktion eines Musikplayers.
et_VideoStartEvent(eventObject,eventType) Messung der Startfunktion eines Videoplayers.
et_VideoStopEvent(eventObject,eventType) Messung der Stopfunktion eines Videoplayers.
et_VideoPauseEvent(eventObject,eventType) Messung der Pausefunktion eines Videoplayers.
et_VideoMuteEvent(eventObject,eventType) Messung der Stummschaltefunkt. eines Videoplayers.
et_VideoSeekEvent(eventObject,eventType) Messung der Abspielposition eines Videoplayers.
et_VideoNextEvent(eventObject,eventType) Messung der Weiterfunktion eines Videoplayers.
et_VideoPreviousEvent(eventObject,eventType) Messung der Zurückfunktion eines Videoplayers.
et_VideoFullsizeEvent(eventObject,eventType) Messung der Vollbildfunktion eines Videoplayers.
et_VideoRestoreEvent(eventObject,eventType) Messung der Normalbildfunktion eines Videoplayers.
et_GalleryViewEvent(eventObject,eventType) Messung der Ansicht eines Bildes.
et_GalleryZoomEvent(eventObject,eventType)Messung der Zoomfunktion zu einem Bild.
et_GalleryNextEvent(eventObject,eventType)Messung der Weiterfunktion einer Bildergalerie.
et_GalleryPreviousEvent(eventObject,eventType)Messung der Zurückfunktion einer Bildergalerie.

Benutzerdefinierte Event

Um ein User-Defined-Event zu versenden genügt der Einbau folgender Snippet in einem HTML-Tag:

onmousedown="_etracker.sendEvent(new et_UserDefinedEvent('myObject', 'myCategory', 'myAction', 'myType'));"

Die Parameter sind alle frei definierbare Zeichenketten und entsprechen die Event-Report-Attribute object (Objekt), category (Kategorie), action (Aktion) und type (Typ).

Darstellung im Report

Die mit dem Event Tracker übergebenen Werte werden in dem Event-Report wie folgt dargestellt:

Ansicht im Report ‚Events‘

Formular-Interaktionen messen

Die Formular-Event API bietet dem etracker Kunden eine Möglichkeit, Informationen über die Nutzung der auf seiner Website vorhandenen Formulare zu übersenden. Diese Informationen werden durch etracker verarbeitet und im Report „Formularanalyse“ von UX Analytics > Inpage Analytics zur Auswertung dargestellt.

Funktionen

Funktion und Zweck der Formular-Event API

Die Formular-Event API dient der Erfassung von Informationen über Sichtbarkeit von und Interaktionen mit Formularen auf der Kunden-Website. Die Daten werden dabei über eine bereitgestellte Funktion an etracker übertragen und weiterverarbeitet. In der etracker Oberfläche steht dem Kunden ein entsprechender Report zur Auswertung dieser Daten zur Verfügung. Mit Hilfe des Reports kann der Kunde dann seine Formulare, Sektionen und einzelne Formularfelder im Hinblick auf Sichtbarkeit, Nutzungshäufigkeit, Fehlerhäufigkeit und Konversion auswerten.

Zugang zur Formular-Event API

Um ein Formular-Event zu erfassen, muss eine von etracker bereitgestellte JavaScript-Funktion aufgerufen werden. Diese Funktion wird jedem etracker Account im normalen Tracking Code bereitgestellt, sofern er ein entsprechendes Produkt besitzt.

Voraussetzungen für die Nutzung

Folgende Voraussetzungen müssen erfüllt sein, um die etracker Formular-Event API nutzen zu können:

  1. Der etracker Account hat den benötigten Leistungsumfang, um die Formular-Event API nutzen zu können.
  2. Der Tracking Code ist auf der Seite integriert, auf der ein entsprechendes Event ausgelöst werden soll.

Aufbau von Formularen

Die zu messenden Formulare haben einen eindeutigen Namen, der an etracker übergeben wird. Eine korrekte Zuordnung des Formulars kann sonst nicht erfolgen. Ein Formular kann in mehrere Sektionen aufgeteilt sein. Diese Sektionen entsprechen beispielsweise 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) während des Ausfüllens erfüllt wurden. Genau wie der Formularname ist auch der Sektionsname innerhalb des Formulars ein eindeutiger Identifikator. In einer solchen Sektion wiederrum 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 welchem das Formular im Report zu finden sein soll. Das Feld formEventData enthält weitere Informationen, die allerdings nur bei bestimmten Event-Typen übergeben werden dürfen.

Bitte beachten: Der dritte Parameter ist nur bei den entsprechenden Event-Typen zu übergeben. Er sollte nur dann gesetzt werden, ansonsten sind nur die ersten beiden Parameter zu übergeben:

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 immer 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, und zwar genau dann, wenn der Besucher während seines Besuches noch einmal neu in das Formular einsteigt. Wann dieser Zeitpunkt ist, liegt im Ermessen des Website-Betreibers. Das Abschicken einer entsprechenden formView erzeugt eine entsprechende Form Impression im entsprechenden Report. Kann der Besucher der Website 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. etracker empfiehlt eine String-Repräsentation des entsprechenden HTML Formularelement-Types anzugeben. Als Formulartyp kann aber auch ein eigener Bezeichner verwendet werden. Allgemeine Form des Aufrufes:

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. Beispiel für einen Aufruf:

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. Allgemein sieht der Aufruf so aus:

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 entsprechend 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. Allgemein sieht der Aufruf so aus:

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 entsprechend 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 also 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.

Hinweis: Mehr zu dem Thema Auswertungen des Formularanalyse Reports finden Sie hier.