To select the elements to be measured, add the configurations to the "wt_rt" array.

Example 1: Measuring the complete page

To measure the complete page, add the following code.

window.wt_rt = window.wt_rt || [];
window.wt_rt.push({
	selector: 'body'
});
JS

In this case, the page name (ContentId) will be the name of the element.

Example 2: Measuring more than one element on a page.

If more than one element is on your page, each element must be flagged and named individually.
Add the following code:

window.wt_rt.push({
	selector: '#content-engagement-1',
	name: 'Element1'
});

window.wt_rt.push({
	selector: '#content-engagement-2',
	name: 'Element2' 
});
JS
  • "selector" contains the attribute that has to be assigned to elements in order to be measured.
  • "name" contains the name that is shown in the analysis.

In the html-Code the integration could look as follows:

<div id="content-engagement-1">
	...
</div>

<div id="content-engagement-2">
	...
</div>
XML

Example 3:  Element with custom configuration


window.wt_rt = window.wt_rt || [];
window.wt_rt.push({
	selector: '#content-engagement-1',
    name: 'Element1',
    config: {
    	percentageStepsInAnalytics: 5,
        sendContentEngagment: 0, // 0 = unload, 1 = percentageReached, 2 = secondsReached ,
        percentageReached: 25,
        secondsReached: 30,
        largeBrowserResolution: 1080,
        largeBrowserSeconds: 20,
        mediumBrowserResolution: 700,
        mediumBrowserSeconds: 10,
        smallBrowserResoultion: 400,
        smallBrowserSeconds: 5
    }
});
JS
ParameterDescription
selectorUnder "selector" enter the element to be measured. You can pass this either directly as HTML element or the CSS selector of the element.
nameSpecify the name of the element to be measured. Alternatively, the plugin uses the name of the current page (contentId).
configHere, you can completely or partially overwrite the plugin configuration described above.

Event Simulation

If you subsequently change the size or position of a marked element, it is necessary to inform the plugin of this change via scroll or resize. If you use the plugin on a single page application, you must simulate unload before changing the page.

ParameterDescription
scroll

The current position of the visible area within the web page is determined. The visible fields are then marked using the configured "timer."

window.wt_rt = window.wt_rt || [];
window.wt_rt.push('scroll');
JS
resize

The size and position of the selected element are recalculated. Then the "scroll" event is simulated.

window.wt_rt = window.wt_rt || [];
window.wt_rt.push('resize');
JS
unload

The registered events "scroll," "resize," and "unload" are removed. Subsequently, pending tracking information is sent (depending on configuration).

window.wt_rt = window.wt_rt || [];
window.wt_rt.push('unload');
JS