1. Home
  2. Docs
  3. Integration & Setup
  4. Tracking Code & SDKs
  5. Tracking Code Integration
  6. Event Tracker

Event Tracker

Using the Event Tracker, any interactions of website visitors with page elements can be recorded and evaluated. The recording is triggered by a JavaScript function that has to be explicitly implemented. As an alternative to the event tracker function, interactions can also be recorded using a CSS selector. This avoids the need to embed additional code in the HTML of the page.

Please note that many types of interactions – such as scrolling, external links, downloads and video views – are automatically captured unless this has been deactivated. To deactivate automatic tracking, go to Settings → Account → Automatic Event Tracking and for scrolling go to Settings → Privacy → Automated Scroll Tracking.

Note:
All values are to be communicated in the URL-coded format (RFC 3986) as per the ISO standard, particularly when they include special characters.

The event tracker function triggers payment dynamically according to the tracking code implemented on the page.

Structure of an Event Tracker call

The following function in the etracker JavaScript sends the corresponding events:

_etracker.sendEvent(Event-Object)

This universal function accepts every defined event object. The differentiation of the different events is thereby defined by the event objects. In the simplest case, these are generated directly in the function. It should however be generated with a “new”. To transfer additional information on an event to etracker, use the ‘Type’ event attribute. This way, it is possible to distinguish between the events in a more comprehensive way. In the event report under Segmentation → Segments → Add → Content → Type, the event attribute can be selected. JavaScript function with a click event:

_etracker.sendEvent(new et_ClickEvent(‘ExternalLink1’,'Banner1'));

Integrating Event Tracker

The event tracker is delivered with the default JavaScript code of etracker and can be integrated as follows: Example PDF call:

<a href="http://www.YourSite.de/test.pdf" onmousedown="_etracker.sendEvent(new et_DownloadEvent(‘My%20PDF’,'Manual'))">PDF-Download</a>

Example Button for starting a film:

<input type="button" value="Film start" onmousedown="_etracker.sendEvent(new et_VideoStartEvent(‘Film1’,'ProductPreview'))">

Transfer using the event tracker functions looks like this:

JavaScript function Description
et_DownloadEvent(eventObject,eventType) Tracks downloads of documents.
et_ClickEvent(eventObject,eventType) Tracks clicks on any element.
et_LinkEvent(eventObject,eventType) Tracks clicks on internal and external links.
et_AuthenticationSuccessEvent(eventObject,eventType) Tracks a successful login.
et_AuthenticationFailureEvent(eventObject,eventType) Tracks an unsuccessful login.
et_AuthenticationLogoutEvent(eventObject,eventType) Tracks a successful logout.
et_AudioStartEvent(eventObject,eventType) Tracks the start function of a music player.
et_AudioStopEvent(eventObject,eventType) Tracks the stop function of a music player.
et_AudioPauseEvent(eventObject,eventType) Tracks the pause function of a music player.
et_AudioMuteEvent(eventObject,eventType) Tracks the mute function of a music player.
et_AudioSeekEvent(eventObject,eventType) Tracks the playback function of a music player.
et_AudioNextEvent(eventObject,eventType) Tracks the Next function of the music player.
et_AudioPreviousEvent(eventObject,eventType) Tracks the Back function of a music player.
et_VideoStartEvent(eventObject,eventType) Tracks the start function of a video player.
et_VideoStopEvent(eventObject,eventType) Tracks the stop function of a video player.
et_VideoPauseEvent(eventObject,eventType) Tracks the pause function of a video player.
et_VideoMuteEvent(eventObject,eventType) Tracks the mute function of a video player.
et_VideoSeekEvent(eventObject,eventType) Tracks the playback function of a video player.
et_VideoNextEvent(eventObject,eventType) Tracks the Next function of the video player.
et_VideoPreviousEvent(eventObject,eventType) Tracks the Back function of the video player.
et_VideoFullsizeEvent(eventObject,eventType) Tracks the fullscreen function of a video player.
et_VideoRestoreEvent(eventObject,eventType) Tracks the normal screen function of a video player.
et_GalleryViewEvent(eventObject,eventType) Tracks the view of a picture.
et_GalleryZoomEvent(eventObject,eventType)Tracks the zoom function of a picture.
et_GalleryNextEvent(eventObject,eventType)Tracks the next function of a picture gallery.
et_GalleryPreviousEvent(eventObject,eventType)Tracks the back function of a picture gallery.

Measure Form interactions

The Form Event API offers etracker customers a possibility to send information about the use of the forms available on their website. This information is processed by etracker and displayed for evaluation in the „Form Analysis“ Report of UX Analytics.

Functions

Function and purpose of the Form Event API

The Form Event API is designed to collect information about visibility of and interactions with forms on the customer´s website. The data is transferred via a provided function to etracker und further processed. In the etracker user interface, a report is available where this data can be evaluated. Using the report, the customers can then evaluate their forms, sections and individual form fields regarding visibility, frequency of use, error frequency and conversions.

Access to the Form Event API

To capture a form event, a JavaScript function provided by etracker must be called. This feature is provided to any etracker account in the normal tracking code, if the account has a corresponding product.

Requirements for use

The following requirements must be fulfilled in order to use the etracker Form Event API:

  • The etracker account has the required scope of services to use the Form Event API
  • The tracking code is integrated on the page on which a corresponding event is to be triggered.
Structure of forms

The forms to be measured have a unique name, which is transferred to etracker. Otherwise, the form cannot be correctly assigned. A form can be divided into several sections. For example, these sections could correspond to one page in a multi-page order form or a new tab opening when e.g. preconditions (such as the correct filling of certain fields) were fulfilled. Like the form name, the section name within a form is a unique identifier. In one section, one or more form fields may be present. Again, the identification within a section is based on a unique form field name. Hereinafter the individual information to be submitted will be described in further detail.

Structure of the functions

The call of the function generally follows the following scheme:

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

eventType indicates what type of form event it is. The parameter formName specifies the name under which the form is to be found in the report. The formEventData field contains more information, which, however, can only be passed on for specific event types.

Please Note: The third parameter only must be passed for appropriate event types. It should only then be set, otherwise only the first two parameters must be passed.

etForm.sendEvent(<eventType>, <formName>);
Possible event types
formView

The information, that a certain form was seen, is passed to etracker with formView. This event should be triggered whenever a visitor invokes the form initially. A form always has a unique name, whose value is passed with the formName parameter. Based on this name the form can be identified in the report. General structure of the call:

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

The formView event can be triggered several times during a visit. This happens when a visitor re-enters the form during his visit. When the point of invoking initially is is at the discretion of the website operator. The submission of a formView event generates a corresponding form impression in the Form Analysis report.  If the visitor of the website can re-enter the already ‘edited’ form during his visit, the website operator must decide whether this should be counted as a new form impression (and then create another formEvent of the type formView with this form name). Example call:

etForm.sendEvent('formView', 'Order form');

In this case, a form impression is generated for the form named ‘order form’.

formFieldsView

With formFieldsView, information about the form fields the visitor has seen, as well as the section in which these fields are located is passed to etracker. A form consists of one or several sections. Each individual section should always have a unique name per form, whose value is passed with the parameter sectionName. One section can contain one or several form fields. These form fields are passed in an array named sectionFields. A form field is passed as an object within the array of sectionFields. The object has two properties, name and type. A form field should always have a unique name within a section whose value is passed in the name property. Furthermore, it always has a type that is passed in the type property. The type property expects a string, which describes the type of the form field. etracker recommends specifying a string representation of the corresponding HTML form element type. But also, a separate identifier can be used as a form type. General structure of the call:  

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

This call passes the information to etracker, that the website visitor viewed the section with the name <section_name> and the form fields specified in the sectionFields. Example call:

etForm.sendEvent('formFieldsView', 'Kontaktformular',
     {
           'sectionName': 'Adressangaben',
           'sectionFields':
                 [
                       {'name': 'Salutation', 'type': 'radio'},
                       {'name': 'First name','type': 'text'},
                       {'name': 'Surname','type': 'text'}
                 ]
     }
     );
formFieldInteraction

With the event type formFieldInteraction the information is passed, that a visitor has interacted with a specific form field. General structure of the call:

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

If a website visitor interacts with the order form within the section Contact information with the checkbox Salutation (for example the visitor selects ‘Mr.’), the corresponding call looks like this:

etForm.sendEvent('formFieldInteraction', 'Bestellformular',
     {
           'sectionName': 'Contact information',
           'sectionField': {'name': 'Salutation','type': 'checkbox'}
     }
     );

In the corresponding report then an interaction for this form field, section and form is counted.

formFieldError

With the event type formFieldError the information is passed, that an error occurred in a certain form field. General structure of the call:

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

If a website visitor produces an error in the order form within the section Contact information in the text field Surname (for example the visitor left a form field unfilled), the corresponding call to etracker could look like this:

etForm.sendEvent('formFieldError', 'Order form',
     {
           'sectionName': 'Contact information',
           'sectionField': {'name': 'Surname','type': 'text'}
     }
);

In the corresponding report then an error for this form field, section and form is counted.

formConversion

With the event type formFieldError the information is passed, that a form was successfully sent. General structure of the call:

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

If a website visitor successfully completed and submitted the form (for example by clicking the ‘buy now’ button), the corresponding call to etracker could look like this:

etForm.sendEvent('formConversion', 'Order form');

Exemplary implementation

The events should always be sent to etracker, when the corresponding action is triggered by the website visitor. The event formView for example could be triggered, when a website visitor clicks on the link opening the corresponding form

<a href="orderform.html" onmousedown="etForm.sendEvent
('formView', 'Order form');"> To the order form
</a>

In this case a formView event with the form name ‘Order form’ is recorded to etracker, whenever a visitor clicks on the link ‘To the order form’. Similarly, the formView event could be triggered, when the page, where the form is on, is loaded or if a form appears in the visible area of the viewed page.

Note: For more information about evaluating the form analysis report click here.

Viewing in report

The values transferred with the event tracker are displayed as follows in the event report:

View in the ‘Events’ report