Step 3: Initializing Elements

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'
});

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' 
});

• "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>

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
    }
});

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.

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

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

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