etracker
Analytics Editions / Pricing Live-Demo
etracker
Optimiser Editions / Pricing Live-Demo
Pricing For Agencies Support

Practice tips & guides

  1. Sample Concept for eCommerce Sites
  2. Technical Requirements for Using Testing & Targeting
  3. Technical Requirements for the Use of UX Analytics
  4. View-through Conversion Tracking
  5. Using etracker together with security headers

a Sample Concept for eCommerce Sites

  1. Integrating etracker Code
    1. etracker code (version 4.1)
    2. Wrapper functions
  2. Filling in Code Parameters
    1. Pagename (et_pagename)
    2. Browselink (et_url)
    3. Areas (et_areas)
  3. eCommerce Events
    1. Product seen
    2. Product placed into basket
    3. Order
  4. Internal search & on-site teaser
  5. General Event Tracking
    1. Structure of an Event Tracker call
    2. Integrating Event Tracker
    3. Event Examples in Shops

1 Integrating etracker Code

1.1 etracker Code (Version 4.1)

To use etracker and the connected capability to record basic data like visitors and page views, a special tracking code is required. This has to be integrated into all of the pages which are to be measured.

It must be positioned between the openingtag and closingtag. In principle, all data of this concept will be compiled in a single account based around one domain (e.g. http://www.xyz.de). Each of these domain accounts is assigned a security code of up to six characters (also called ‘Account Key 1’).

The etracker code is set up as shown in the following. The individually personalised code may vary in parts. The following tracking code needs to be integrated into all of the pages which are to be monitored with the corresponding security code of the domain account. Account Key 1 is inserted for the placeholders ‘XXXXX’ into the second last line of code of the tracking code.

<!-- Copyright (c) 2000-2016 etracker GmbH. All rights reserved. --> <!-- This material may not be reproduced, displayed, modified or distributed --> <!-- without the express prior written permission of the copyright holder. --> <!-- etracker tracklet 4.1 --> <script type="text/javascript"> // var et_pagename = ""; // var et_areas = ""; // var et_url = ""; // var et_tval = ""; // var et_tonr = ""; // var et_tsale = 0; // var et_basket = ""; // var et_cust = 0; </script> <script id="_etLoader" type="text/javascript" charset="UTF-8" data-secure-code="XXXXX" src="//static.etracker.com/code/e.js"></script> <!-- etracker tracklet 4.1 end -->

The parameter block of the tracking code (code line 6 to 13) contains elementary parameters for controlling etracker. Using and individually customising parameters is described in the following chapters.

Note:
The parameters et_cust, et_tval, et_tonr, et_tsale and et_basket are only recommended for websites with the primary target of lead generation or similar. For eCommerce Sites on the other hand, we recommend transferring baskets and orders via special eCommerce Events.

1.2 Wrapper Functions

Alongside conventional page requests, the tracking code can also be requested dynamically when the page content changes dynamically, e.g. with Ajax functionality. Here, the ‘et_eC_Wrapper’ function is used.

If there is dynamic content on a physical page with its own URL, which, for example, loads further information or additional form fields later on and you want to, for example, split the one-page checkout in the funnel analysis into individual steps, a virtual page call should be generated with the help of the wrapper function. In a similar way, other dynamic content can be transferred like category overview pages, which load more products from this category the further down the page you scroll down.

The format for the wrapper function looks as follows:

onmousedown="et_eC_Wrapper('Account-Key1','pagename','areas','url',);"

The trigger for the function can can be specified individually. In the upper example, the function will be executed when you click on a HTML object (onmousedown).

For Flash:

ExternalInterface.call("et_eC_Wrapper", "Account-Key1", "pagename", "areas", "url");
Note:
The wrapper function encodes the values independently, meaning that they can be entered in plaintext.

2 Filling in Code Parameters

The following code configuration makes sure the use of the website content can be evaluated as optimally as possible.

Note:
All values are to be transferred in the URL-coded format (RFC 3986), especially when they contain special characters.

2.1 Pagename (et_pagename)

When compiling data on the page descriptions, it is essential that each page has been assigned a distinct pagename as this pagename is understood as a page’s ID. If the parameter is not filled, the pagename in the reports will be automatically generated from the respective URLs, that is, from the URL of the respective page without domain or URL parameter.

Should the individual pages be controlled using parameters, clear page designations must be provided because the individual pages in the analysis cannot be viewed in a differentiated way.

In addition, it can be sensible to add the CMS ID of the page to the pagename or to add additional information which is relevant to reporting, like for example, the template designation.

Note:
In parameter et_pagename max. 255 characters can be transferred.

Examples for naming the pages:

Note:
The positions in bold are just placeholders which need to be filled dynamically with content.

http://www.YourSite.de

var et_pagename = "IndexSite *CMS-ID* ~Home~";

http://www.YourSite.de/category3/category3_3

var et_pagename = "category_3 *CMS-ID* ~category-Site~";

2-1_seitenname

2.2 Browselink (et_url)

Should there be pages on the website whose display is controlled via dynamic parameters like session ID or similar (e.g. search result pages), the dedicated URL including the parameters required for the display of the page must be specified for each of these pages as a browselink.

Transfer is done using the parameter:

var et_url = "";    //Browselink

2.3 Areas (et_areas)

The parameter et_areas defines areas or page groups which should be assigned to the individual pages of the website. If a page should be assigned to multiple areas or area levels, then they must be separated using a forward slash “/”. If the name of an area includes a slash (“/”) which is not to be used for setting up hierarchical areas, then you will need to enter the slash twice, like, Area AC//DC, for example.

Defining the different areas in etracker is done using the hierarchical setup of the website and orients itself around the sitemap and, if necessary, around defined special areas.

Fundamentally, each page of the website can be assigned to an area. The areas in etracker are set up in the same way as the breadcrumb navigation on the website.

If there are different language versions of a website, the corresponding language can be transferred as an additional area level. Here, if possible, the navigation areas should be named uniformly and in the same language.

All pages which stand alone and thus do not belong to any navigation area should be assigned to a special area, e.g. additional or landing pages.

Note:
By default, categories can be analysed up to the fifth level.

In the following, the levels will be sketched graphically to provide examples:

2-3_bereiche-et-areas

Examples of page allocation in areas:

  • Homepage

http://www.YourSite.de

var et_areas = "YourSite";
  • Subpage category 3.3.1

http://www.YourSite.de/category3/category3_3

var et_areas = "YourSite/category3";

2-3_bereiche-et-areas_2

  • Subpage AGB.html

http://www.YourSite.de/Service/FAQ/AGB.html

var et_areas = "YourSite/Service/FAQ";

2-3_bereiche-et-areas_3

3. eCommerce Events

With the help of eCommerce Events, actions like “Product page seen”, “Product placed into the basket” or “Product ordered” can be transferred with all of the relevant item information. Here, however, additional code needs to be integrated. The functions and parameters for this are included in the so-called eCommerce API.

This relates to JavaScript code which needs to be integrated into the corresponding pages on your website. The eCommerce API has two basic functions for transferring information to etracker: “sendEvent” and “attachEvent”.

sendEvent is the direct call of an eCommerce Event defined by the interface. This function is to be inserted if an event is to be run when a page is opened.

If sending is to be coupled to a specific (or already existing) JavaScript event, the function attachEvent needs to be used. An example for this is clicking a button for which a layer opens. What’s important here is that each HTML element, to which an eCommerce event is to be attached, has an ID. As such, the HTML parameter “id” always needs to have a value.

Using these two functions, the following available events can be recorded:

  • viewProduct – Product seen
  • insertToBasket – Product placed into basket
  • removeFromBasket – Product removed from basket
  • order – Order
  • orderCancellation – Order cancelled

With each event, so-called objects need to be defined and entered. The objects refer to:

  • product: This object defines a product with the respective attributes. The attributes of a product object are:
    • Product ID
    • Product name
    • Product hierarchy (category, up to four category levels)
    • (Nominal) price
  • basket: With an order, the ordered products are placed into a basket object. Here, a basket ID is transferred and the products, which can be found in the basket, are recorded. With the “viewProduct” event, the basket ID must be included.
  • order: The object of the order contains all order data and the basket object. The following order data will be recorded:
    • Order number: For the clear identification of turnover targets achieved by visitors (leads and sales), a clear value will be sent to etracker so that each booking can be recorded individually.
    • Status: When ordering, this is the status “sale”.
    • Order value: Total order value.
    • Basket: The basket object (see above)
Note:
When integrating the eCommerce API, debug mode is very useful if you wish to find possible transfer errors more quickly.

3.1 Product Seen

This event should be transferred each time a product page is viewed. A product should be evaluated as “seen” if it is possible to place it into the basket from this page.

Note:
This means if products are placed directly from the category overview page into the basket, a “Product seen event” must be called at the same time as the “Product placed in basket event”.

3-1_produkt-gesehen

Defining the Product Object

NameAttributeData typeFor company
Product IDidstring, max. 50 charactersA real or fictitious, but simultaneously unique product number
Product namenamestring, max. 250 charactersA real or fictitious, but simultaneously real product name
Product categorycategoryarray of strings, max. 50 characters/stringCategory level 1-4
(Normal) pricepricestring, max. 20 charactersA real or fictitious monetary value for the product

Note:
The product object requires two additional attributes when transferring to the eCommerce- API: “currency” and “variants”. An individual adjustment to this attribute is currently not possible.

When transferring the “viewProduct” event, the function “sendEvent” must be used on a product page. Accordingly, the following example code is needed to trigger the event:

Product: Product A
Item number:  125125125
Item name:  Product A
Price:  25.99
Category level 1:  Upper category X
Category level 2:  Lower category X.Y.
Category level 3:  Lower category X.Y.Z
Category level 4:  Special category i

var et_Commerce_product = 
 {
  id : '125125125', 
  name : 'Product A', 
  category : [‘Upper category X’, 'Lower category X.Y.', 'Lower category X.Y.Z.', 'Special category i'], 
  price : '25.99',
  currency: 'EUR',
  variants: {}
};
etCommerce.sendEvent('viewProduct',et_Commerce_product)

3.2 Product placed into basket

This event is triggered when the user clicks the “into the basket” button. When transferring with a click, you must use the “attachEvent” function.

3-2_produkt-in-den-warenkorb-gelegt

Accordingly, the following example code is needed to trigger the event:

var et_Commerce_product =  {   id : '125125125',    name : 'Product A',    category : [‘UpperCategory X’, 'LowerCategory X.Y.', 'LowerCategory X.Y.Z.', 'SpecialCategory i'],    price : '25.99',    currency: 'EUR',   variants: {} };  var quantity = '1'; etCommerce.attachEvent({'mousedown' : ['ButtonOffer']}, 'insertToBasket',et_Commerce_product,quantity);

3.3 Order

This event is triggered when the confirmation page of a purchase displays. Here, an order object needs to be defined.

Definition of an order object

NameAttributeData typeFor Brose
Order numberorderNumberstring, max. 50 charactersID of purchase or order number. If this is no longer available, a different unique value from the CMS or, if necessary, a continuous number, can be transferred.
StatusstatusenumSale
Order valueorderPricestringThe total volume decimal separator is a dot.
CurrencycurrencystringCurrency of the order according to ISO 4217: EUR, GBP or USD
Shopping basketbasketobject of warenkorbThe basket object - see above

The following example refers to the following content:

Product: Product A
Item number:  125125125
Item name:  Product A
Price:  25.99
Category level 1:  Upper category X
Category level 2:  Lower category X.Y.
Category level 3:  Lower category X.Y.Z
Category level 4:  Special category i

Accordingly, the following example code is needed to trigger the event:

var orderObject = {     orderNumber : 'ABC12345',     status : 'sale',       orderPrice : '25.99',     basket : {         id : '1',         products : [             {                 product: {   id : '125125125',    name : 'Product A',    category : [‘UpperCategory X’, 'LowerCategory X.Y.', 'LowerCategory X.Y.Z.', 'SpecialCategory i'],    price : '25.99',    currency: 'EUR',   variants: {}                        },                 quantity : 1             }                  ]     }, } etCommerce.sendEvent('order', orderObject);

The following is an example in which the potential customer orders multiple products in a single selection:

Product: Product A
Product ID:  123456789
Product name:  Product A
Category level 1:  Category X
Category level 2:  Category X.Y.
Category level 3:  Category X.Y.Z.
Category level 4:  Brand i
Price:  129,56
Quantity:  3

Product: Product B
Product ID:  234567890
Product name:  Product B
Category level 1:  Category A
Category level 2:  Category B
Category level 3:  Category C
Category level 4:  Brand ii
Price:  23,99
Quantity:  1

Accordingly, the following example code is needed to trigger the event:

var orderObject = {     orderNumber: 'ABC12345',     status: 'Sale',     orderPrice: '412.67',     currency: 'EUR',     basket: {         id: '1',         products: [{             product: {                 id: '123456789',                 name: 'Product A',                 category: ['Category X', 'Category X.Y.', 'Category X.Y.Z.', 'Brand i'],                 price: '129.56',                 currency: 'EUR',                 variants: {}            },             quantity = '3'         }, {             product: {                 id: '234567890',                 name: 'Produkt B',                 category: ['Category A', 'Category B', 'Category C', 'Brand ii'],                 price: '23.99',                 currency: 'EUR',                 variants: {}             },             quantity = '1'         }]     }, }
etCommerce.sendEvent('order',orderObject);

It is also possible to record the shipping costs as a product in itself. To do so we have the following example:

Product: Product A
Product ID:  23456789
Product name:  Product A
Category level 1:  Category X
Category level 2:  Category X.Y.
Category level 3:  Category X.Y.Z.
Category level 4:  Brand i
Price:  129,56
Quantity:  3

Product: Product B
Product ID:  234567890
Product name:  Product B
Category level 1:  Category A
Category level 2:  Category B
Category level 3:  Category C
Category level 4:  Brand ii
Price:  23,99
Quantity:  1

Produkt: Versandkosten
Produkt-ID:  Shipping costs
Produkt-Name:  Shipping costs
Category level 1:  Shipping costs
Category level 2:     
Category level 3:    
Category level 4:    
Price:  4,99
Quantity:  1

Accordingly, the following example code is needed to trigger the event:

var orderObject = {     orderNumber: '123456789',     status: 'Sale',     orderPrice: '417.66',     currency: 'EUR',     basket: {         id: '1',         products: [{             product: {                 id: '123456789',                 name: 'Product A',                 category: ['Category X', 'Category X.Y.', 'Category X.Y.Z.', 'Brand i'],                 price: '129.56',                 currency: 'EUR',                 variants: {}             },             quantity = '3'         }, {             product: {                 id: '123456789',                 name: 'Product B',                 category: ['Category A', 'Category B', 'Category C', 'Brand ii'],                 price: '23.99',                 currency: 'EUR',                 variants: {}             },             quantity = '1'         }, {             product: {                 id: 'Shipping costs',                 name: 'Shipping costs',                 category: ['Shipping costs', '', '', ''],                 price: '4.99',                 currency: 'EUR',                 variants: {}             },             quantity = '1'         }]     }, }
etCommerce.sendEvent('order', orderObject);

4 Internal Searches & On-site Teaser

When orders are recorded, etracker will automatically calculate a value for each event as well as for the individual pages and page areas. This shows how valuable an individual page, area or event object is in regard to the following transactions, that is, how often the page or event was viewed by visitors, who executed an order.

Along with this, there is also the option to directly determine how many orders and what volume was generated by website visitors after a certain event. On-site campaigns are used for this.

On-site campaigns for recording the internal search

Depending on whether or not the display is with or without results on the search result page, the following code must be transferred in the etracker code.

Example: Search phrase “Product A” with result

var cc_attributes = new Object(); cc_attributes["etcc_cu"] = "onsite"; cc_attributes["etcc_med_onsite"] = "Internal search";  cc_attributes["etcc_cmp_onsite"] = "With result";  cc_attributes["etcc_st_onsite"] = "Product A"; 

4-1_onsite-kampagne-zur-messung-der-internen-suche

Example: Search phrase “unknown” without result

var cc_attributes = new Object(); cc_attributes["etcc_cu"] = "onsite"; cc_attributes["etcc_med_onsite"] = "Header search";  cc_attributes["etcc_cmp_onsite"] = "without result";  cc_attributes["etcc_st_onsite"] = "unknown"; 

4-1_onsite-kampagne-zur-messung-der-internen-suche_2

5 General Event Tracking

Along with page views, eCommerce events and on-site campaigns, any other interaction, e.g. clicks on links or elements on the website, can be recorded using events. Examples of such events are downloads of PDF documents, picture views, external links and filter functions on search result pages or category pages.

External Social Media link views and clicks on PDF download links can be identified by etracker automatically and tracked as events. This means that no additional JavaScript code needs to be implemented for this. Automatic recording is deactivated by default. You can activate this in the etracker application under Settings > Statistic settingsAutomatic recording of events.

Other events will not be recorded automatically using the conventional tracking code. In addition to the etracker tracking code, you need a JavaScript function which dynamically triggers the counting of the interactions. To record further events, build the corresponding JavaScript code for dynamically triggering the counting into the website to be monitored at a suitable position.

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

5.1 Structure of an Event Tracker Call

In the etracker JavaScript, you will find the following function which sends the corresponding events:

_etracker.sendEvent(Event Object);

This universal function accepts every defined event object. The differentiation of the various 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 “new”.

Note:
All of the elements to be defined will be marked in bold in the code examples.

JavaScript function with a click event:

_etracker.sendEvent(new et_ClickEvent(‘ExternalLink1’));

5.2 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.mysite.de/test.pdf" onmousedown="_etracker.sendEvent(new et_DownloadEvent(‘My%20PDF’))">PDF-Download</a>

Example button for starting a film:

<input type="button" value="Start film" onmousedown="_etracker.sendEvent(new et_VideoStartEvent(‘Film1’))">

Event Tracker functions:

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

5.3 Event Examples in Shops

The following events are available for most shops:

  • Login: The login of a visitor can be recorded including the UserID or the unsuccessful login attempt.Successful login:Here “et_AuthenticationSuccessEvent(eventObject)” will be transferred as a category and the UserID/successful as the object.Unsuccessful login:Here “et_AuthenticationFailureEvent(eventObject)” will be transferred as the category and the UserID/unsuccessful as the object.The login of a visitor can be recorded including the UserID or the unsuccessful login attempt.
  • Download: The download of various files can be recorded. “et_DownloadEvent(eventObject)” will be chosen as the category and the filename can be transferred as the object.

b Technical Requirements for Using Testing & Targeting

  1. Requirements and Targets of this Documentation
  2. Function and Purpose of Testing & Targeting
  3. Checklist for Using A/B Testings
    1. You can export an A/B test to your website under these conditions
    2. The Visual Editor of the A/B testing can generally be used under these conditions
    3. Under these conditions, you can use the Visual Editor when, for example, it cannot open a page due to the JavaScript code
  4. Requirements for Using Testing & Targeting
    1. Integrating the Tracking Code
    2. Dynamic content in the Visual Editor

1 Requirements and Targets of this Documentation

Testing & Targeting offers various functions to analyse the usability of your website so that you can optimise it. How to use the functions essentially depends on the structure of your website.
This document describes which options for usage Testing & Targeting provides, which prerequisites need to be in place and how you can customise your website to Testing & Targeting if needed. It might not be possible to implement some functions or to adapt them to your website by altering things.

2 Function and Purpose of Testing & Targeting

Testing & Targeting is a product for optimising websites. Using A/B tests, you can export and evaluate different versions of your website. Using the findings of Testing & Targeting, you can uncover weaknesses and errors in the user guidance and in the design of the content, thus enabling you to create the basics for more targeted optimisation of the usability of the content.

Along with the original page, A/B testing also delivers different versions of the page randomly and records their conversion rate compared to the original. Here, you can set up the variants either as your own alternative pages on a web server (split URL test) or create it in the Visual Editor by varying individual page elements like pictures, copy text, labels or buttons. etracker automatically exports the page variants which you have exported with the Visual Editor using the “DOM Manipulation” technique. You can define a target for each test (e.g. target pages or other etracker key figures like the quantity of products viewed, products placed in the basket or purchased products). Using target achievement, Testing & Targeting measures how successful a page variant is.

With the Testing & Targeting findings, you can optimise the content of your website and, for example, reduce bounce rates. You can inspect central use cases of a page, identify obstacles the visitor cannot get past and possibly provide assistance for this via smart messages.

3 Checklist for Using A/B Testings

With this checklist, you can check if all of the prerequisites for the A/B testing of Testing & Targeting exist on your website.

3.1 You can export an A/B test to your website under these conditions

        • The tracking code is integrated at the very top of the page in the head section.
        • The customer account is active and has a sufficient test quota.
        • The page to be tested is correctly defined in the test configuration.
        • The test is activated.

3.2 The Visual Editor of the A/B testing can generally be used under these conditions

        • The website to be tested is accessible for the Testing & Targeting server via the Internet. The website in particular must be neither login-protected nor part of an Intranet separate from the Internet.
        • The page to be tested and their dynamic content must not require cookies, as can be necessary in some order processes, for example.
        • You do not wish to edit any Flash films or dynamic content in the Visual Editor.
        • The page to be tested should contain as little JavaScript as possible.
          By integrating CSS and jQuery code (see point 3.3), you can, if you wish, use the Visual Editor on pages with problematic JavaScript code.

3.3 Under these conditions, you can use the Visual Editor when, for example, it cannot open a page due to the JavaScript code

        • Create a local version of the page (by copying the source text and opening the page in the browser).
        • Add CSS and jQuery code to this page so that the desired version is created. The problematic page will then be loaded in the Visual Editor.
        • Carry out the test configuration to its completion.

4 Requirements for Using Testing & Targeting

Testing & Targeting can be used to its full extent and under the following basic requirements without any additional adjustments.

        • The current tracking code is integrated correctly. (Notes on integration, see point 4.1).
        • The website consists solely of static content. The Visual Editor can only be used to a limited extent in the case of dynamic content (see point 4.2).

4.1 Integrating the Tracking Code

So that etracker can record your website’s data, you will need to insert the etracker tracking code into the HTML source code on each page of your website or in the template of your Content Management System or Shop System.

To avoid flickering effects, you should integrate the tracking code directly after the opening <head> tag or as close as possible to it. In addition, you can set the timeout parameter et_popto.

This standard integration of the tracking code is sufficient for the use of Testing & Targeting. etracker immediately begins tracking the website and the pagenames are generated automatically. The URL paths of the pages without URL parameters are used as the pagenames. Further information on the tracking code can be found in the Technical Manual.

The tracking code is provided in the Settings > Setup/Tracking Code menu point.

4.2 Dynamic content in the Visual Editor

If a page contains dynamically post-loading content, the Visual Editor will show this as white windows which you cannot edit.

c Technical Requirements for the Use of UX Analytics

  1. Function and Purpose of UX Analytics
  2. Requirements for Use of UX Analytics
  3. Recording Dynamic Page Content for UX Analytics
  4. The Form Analysis in UX Analytics
    1. Requirements for the Form Analysis
    2. Customisation for the Form Analysis

1 Function and Purpose of UX Analytics

UX Analytics is a user experience product for precisely analysing how a user interacts with the website in order to optimise usability, content and conversion rates. Here, the behaviour of visitors on individual pages of your website is the main priority.

UX Analytics tracks all user behaviour on a website: from the mouse movement and speed to the scrolling as well as all mouse-clicks and even changes in the size of the browser window. The page content of the viewed website is also tracked (real page content) for this. The recordings can be played back for individual users like a film in the “Motion Player” or as aggregated overlay maps in the “Map Viewer” directly on the website.

With the help of the form analysis in UX Analytics, you can track and evaluate the use of forms on websites.

Using this data, the behaviour of the users can be analysed to the highest possible degree of detail, thus allowing you to gather an overall picture of the visitors. The analysis tools show if your visitors really use the designed navigational paths and work flows. If there are obstacles to these processes which the visitor cannot get past, these will be identified precisely.

2 Requirements for Use of UX Analytics

UX Analytics can be used to its full extent and without any additional adjustments under the following basic requirements.

            • The current tracking code is integrated.
            • The website consists solely of static content.
            • The style sheets of the page do not contain any @import instructions with absolute paths (for security reasons, etracker only allows relative paths).
            • The points described in “Requirements for the Form Analysis in UX Analytics” are met.

3 Requirements for the Recording of Dynamic Page Content in UX Analytics

If your website contains dynamic content (client-side manipulations) or is designed completely dynamically, additional adjustments will be required for UX Analytics.

For UX Analytics, the DOM is transferred and recorded for the on-load event (with asynchronous counting, or later on if necessary). Each time the website is reloaded, the DOM is transferred again. However, many websites and web applications work with AJAX requests, which exchange central components of the DOM so that the DOM which was recorded the first time does not match up with the DOM which is transferred when the page is reloaded.

If page content is exchanged or reloaded dynamically in this way, then you can customise your website by integrating the JavaScript call et_vm_reload into it. This way, you notify etracker of the change in state so that it can track a “new” changed page.

With the help of this JavaScript call, UX Analytics helps you illustrate, for example, the navigation on a single web page, but not the emptying or editing of a basket on a multi-page shop website. Additionally, this customisation only makes sense when the change to the page is relevant to how to use the page, e.g. when an overlay is shown to select a date on the page.

When the website is newly loaded, a new PI (Page Impression) will also be logged. This is split up in order to display correctly in UX Analytics. This means that multiple PIs are created from a single PI. So a greater allocation is used when recording UX Analytics with this method and the UX Analytics data, which is based on PIs (e.g. how often a page was opened), changes. This, however, does not have any influence on the other etracker products.

So what do you need to do to customise UX Analytics?

1. Set the security settings in the Configuration menu to “low”. This is the only way to transfer the changed DOM.

2. Identify the asynchronous changes to the website. Here, it is best to visit the website and test out all the elements. Then look at the films recorded in the Motion Player. If you have used elements which normally lead to a change in the website, but not in the film, then we are usually dealing with JavaScript.

3. Decide where to reload the page. Here, consider that the splitting up of the PI, which accompanies this, affects the UX Analytics reports and the used quota. Decide which limitations you can accept (e.g. fold-out menus, small information windows) and which post-load elements you cannot do without (e.g. vital forms).

4. To technically implement the identified points for the simulated reload, integrate the following JavaScript code at the point which follows from the corresponding manipulation by the DOM:

if(typeof et_vm_reload == 'function') {   et_vm_reload();  }

Transferring parameters is not necessary.

4 Form Analysis in UX Analytics

4.1 Requirements for the Form Analysis

Special requirements for the form analysis in UX Analytics need to be met:

            • All forms and their form elements must be valid HTML.
              Example: Each form must have an opening and closing tag.
              If in doubt you should check the validity with an HTML Validator in order to uncover possible errors.
            • Each form must include a unique attribute ‘name’.
              This serves to differentiate between the individual forms.
            • The submit button of each form must be a real button (<input type=”submit” />).
              If this is not the case (<a class=“button“ href=“javascript:document.formular.submit();“>
              Continue with order</a>
              ), the button will not be recorded as an element of the form. Nonetheless, the form will be counted as sent.
            • All elements of the form must exist in the DOM of the website.
              Hidden elements, which are just overlaid (e.g. via CSS), are recorded. (JavaScript) Elements which are post-loaded dynamically in the HTML code are not recorded.
            • All form elements must be “real” HTML form elements.
              Often, design/layout reasons are the reason why form elements are rebuilt with CSS and why the original HTML elements are located at a completely different position on the page. The form analysis only works perfectly if the HTML elements are “real”.
            • During the form processing, there is no dynamic exchange of the form elements.
              If the forms exchange each form element dynamically for verification purposes, the form analysis will not work as it is not possible to allocate the elements to the form.

4.2 Customisation For the Form Analysis

The forms of many web applications and websites are designed in such a way that they process their data using AJAX requests instead of the usual way by opening a following page using the Submit button. When using AJAX requests, the forms are not sent. Instead they just transfer their data to the server working in the background.

So that the form analysis can still work, you must tell etracker the time that this data was communicated (form “submit” via AJAX Request). Only this way will etracker detect and save this process in the same way as the classic “Submit”.

Note:
The saving of form “submits” via AJAX requests with UX Analytics has no additional influence on the PI quota or on the other etracker products.

The etracker API is used to transmit the “Submit” form via AJAX request. In order for the procedure to work, you need to check some prerequisites and rework the website code as described in the following.

1. In UX Analytics, select Configuration > Settings and check the Recording Conditions section to see if the recording of the pages which contain the forms is activated. Correct the setting if necessary.

2. Check the source text of the website to identify from where the data of a form is transferred to the server. Those buttons or links which are used to send contents have “on-click” events. They can, for example, come from libraries and execute AJAX requests later on. You need to integrate the calls to the etracker API directly before these sections.

3. Redesign the website code by integrating the following JavaScript call directly before the determined code sections:

if(typeof et_vm_formSubmit == 'function') {  et_vm_formSubmit(form);  }

The form must be transmitted as a parameter which should then be recorded as “sent”. Valid values are either the ID of the form as ‘string’ or the HTML form as ‘object’. Example: ID of the form as ‘string’:

var form = 'myForm';  if(typeof et_vm_formSubmit == 'function') {      et_vm_formSubmit(form);  }

Example: HTML form as ‘Object’:

var form = document.getElementById('myForm');  if(typeof et_vm_formSubmit == 'function') {      et_vm_formSubmit(form);  }

d View-through Conversion Tracking

Tracking Emails and Display Ads better with “View-through Conversion Tracking”

If website visitors click on a display advert or a newsletter link before conversion, the success will be assigned to the campaigns based on the selected attribution model. The prerequisite here is that the links were given suitable redirects or parameters and that the clicks happened during the conversion period (by default 30 days).

What happens if an advertisement pops up for someone or the email opens and they don’t click, but open the website later on and order? If only click conversions are tracked, then these advertising contacts will not be taken into consideration. As a result, it may come about that the campaign’s performance and thus the return on investment (ROI) is evaluated incorrectly.

The View-through Conversion Tracking of etracker makes it possible to track the more indirect influence of visual contacts and have them flow into the customer journeys. To implement this, integrate the Ad-View Script into your advertising or email and configure your campaign reports accordingly (see instructions). With each view, that is, every time the ad is displayed or an email opened, a view pixel will be set off and a corresponding cookie set with the user. If the user then visits your website, etracker will export the cookie and assign the previous view, and possible later conversions, to the visit.
Please note that etracker offers the possibility to set the conversion period for views individually and separate from clicks, depending on how high impact the campaigns are. If, for example, the period 48 (hours) is set, the order can only be assigned to the view if it happened within these 48 hours. In general, it is recommended to not set the conversion period to too long. Because the more time that elapses after a view, the less probable it becomes that the buyer will remember the purely visual contact with the display ad and order something in the online shop because of it.

In addition, you do not need to settle on an attribution model when tracking success. Instead you can change it according to your needs. When measuring view-through conversions in particular it is important to be careful with the attribution. Here, the classic “last ad” model is usually not to be recommended because only if the website is opened exclusively via direct access will conversions in this model be assigned to views.

The following is a sample contact sequence with subsequent purchase: View -> SEO -> Click. If the “last ad” distribution model is selected here, the order will be assigned to the click on the banner. The view will not be counted. Using the “Position-based” distribution model (bath tub model), the conversion will be assigned to the first (here: view) and last (here: click) contact, each with 40%, and to the others with 20%. This way, the influence of the visual contact with a banner can also be taken into account.

e Using etracker together with security headers

In order to increase the security of web applications, it is good practice to use HTTP security headers. These include, among others Content Security Policy (CSP) headers.

To use the tracking code on a server with CSP enabled, the CSP header must be set as follows:

Header set Content-Security-Policy “script-src
‘self’ https: //*.etracker.comhttps: //*.etracker.de ‘unsafe-inline’;”

Note:
With this restrictive integration of etracker, only the use of etracker Analytics is possible. The use of etracker Optimiser could otherwise be used to inject other scripts.

Need help?
Our friendly, knowledgeable support engineers are here for you.