Dynamic Page Content

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.

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