The Content Engagement Plugins measure the percentage of an article read by the end-user. Learn more about it here.
The element to be tracked is divided into 200 parts, each part with an individual timer that determines at what point the specific element is marked as read.

The following list shows all recordable parameters and their predefined IDs:

  • Event parameter 921: Content Engagement - Name
  • Event parameter 922: Content Engagement - Element Visibility % (figure)
  • Event parameter 923: Content Engagement - Element Visibility % (text)

The plugin does not work when using infinite scrolling.

If a "READ MORE" button or similar is used in an article, you can create a second element for the plugin after a user clicked on the button. The plugin will then track the content inside the second element separately (it will create two separate analyses for the article).

Browser support

The content engagement plugin uses "querySelector" to find the configured elements. This method is supported by the following browsers:

  • Internet Explorer version 8 or higher
  • Microsoft Edge
  • Firefox version 3.5 or higher
  • Google Chrome
  • Safari version 3 or higher
  • Opera version 10 or higher

Methods and properties

name

Get the name of the extension.

/**
 * @type {string}
 */
wtSmart.extension.content_engagement.name;
JS

version

Get the version of the extension.

/**
 * @type {string}
 */
wtSmart.extension.content_engagement.version;
JS

config

Set and get the current configuration of the extension.

  • percentageStepsInAnalytics: Define the percentage steps that are to be reported in Analytics (e.g., "five" means that the count is incremented in five steps).
  • sendContentEngagement: Specify the event that triggers the sending of content engagement to Analytics:
    • 0: on leaving the page: The user clicks a link or reloads the page.
    • 1: after reaching % of content: The user exceeds a certain percentage (e.g., all 25% of the element).
    • 2: after reaching x sec if status changed: After a certain number of seconds (e.g., every 30 seconds).
  • percentageReached: If you specify "1" as the event trigger, enter the desired percentage here (e.g., at 25%, the event is triggered after every 25%).
  • secondsReached: If you specify "2" as the event trigger, define the desired interval of seconds here (e.g., at 30 the event is triggered every 30 seconds if the percentage has increased).
  • largeBrowserResolution: Specify the browser resolution for large screens in pixels (greater than or equal to the specified number of pixels).
  • largeBrowserSeconds: Specify the seconds to mark part of the element as read on large browser resolutions (the element is divided into 200 sections).
  • mediumBrowserResolution: Specify the browser resolution for medium-sized screens in pixels (greater than or equal to the specified number of pixels).
  • mediumBrowserSeconds: Specify the seconds to mark part of the element as read on medium browser resolutions (the element is divided into 200 sections).
  • smallBrowserResolution: Specify the browser resolution for small screens in pixels (greater than or equal to the specified number of pixels).
  • smallBrowserSeconds: Specify the seconds to mark part of the element as read on small browser resolutions (the element is divided into 200 sections).
/**
 * @param {{
 *      [percentageStepsInAnalytics=5]: number,
 *      [sendContentEngagement=0]: number,
 *      [percentageReached=25]: number,
 *      [secondsReached=30]: number,
 *      [largeBrowserResolution=1080]: number,
 *      [largeBrowserSeconds=20]: number,
 *      [mediumBrowserResolution=700]: number,
 *      [mediumBrowserSeconds=10]: number,
 *      [smallBrowserResolution=400]: number,
 *      [smallBrowserSeconds=5]: number
 * }} [config]
 *
 * @returns {object}
 */
wtSmart.extension.content_engagement.config(config);
JS

isActivated

Get the status, if the extension is enabled.

/**
 * @returns {boolean}
 */
wtSmart.extension.content_engagement.isActivated();
JS

activate

Activate the extension.

wtSmart.extension.content_engagement.activate();
JS

deactivate

Deactivate the extension.

wtSmart.extension.content_engagement.deactivate()
JS

Example

// is content engagement activated
var isActivated = wtSmart.extension.content_engagement.isActivated();

// set content engagement config
wtSmart.extension.content_engagement.config({
    percentageStepsInAnalytics: 5,
    sendContentEngagement: 0,
    percentageReached: 25,
    secondsReached: 30,
    largeBrowserResolution: 1080,
    largeBrowserSeconds: 20,
    mediumBrowserResolution: 700,
    mediumBrowserSeconds: 10,
    smallBrowserResolution: 400,
    smallBrowserSeconds: 5
});

// activate content engagement
wtSmart.extension.content_engagement.activate();

// deactivate content engagement
wtSmart.extension.content_engagement.deactivate();
JS

Debug mode

If you want to check the current plugin configuration, you can activate the plugin debug mode. For this, add the URL parameter or hash fragment "wtstp_debug" into the URL. Please note you will need to reload the page after activating this.

http://new.domain.com/start.html?wtstp_debug=1

or

http://new.domain.com/start.html#wtstp_debug=1
TEXT

Initialization of the elements

To flag the element you want to measure, add the configuration to the "wtstp_ce" array. The configuration for an element is divided into "selector", "name" and "config".

  • selector: enter the element to be measured. You can either pass this directly as an HTML element or pass the respective CSS selector for the element.
  • shadowRoot: If your content to be measured is inside a shadow DOM element, specify the CSS selector of the shadow DOM element. If you have defined a CSS selector as the "selector", it will refer to the "shadowRoot" selector you have defined.
  • name: enter a name of the element to be measured. Alternative, the plugin used the name from the current page (contentId).
  • config: you can overwrite the current plugin configuration.
window.wtstp_ce = window.wtstp_ce || [];
window.wtstp_ce.push(
    {
        selector: "#article",
        name: "name of the element",
        config: {
            percentageStepsInAnalytics: 5,
            sendContentEngagement: 0,
            percentageReached: 25,
            secondsReached: 30,
            largeBrowserResolution: 1080,
            largeBrowserSeconds: 20,
            mediumBrowserResolution: 700,
            mediumBrowserSeconds: 10,
            smallBrowserResolution: 400,
            smallBrowserSeconds: 5
        }
    }
);
JS

Event simulation

If you change the size or position of the flagged element, you should notify the plugin via "scroll" or "resize". If you use the plugin on a SPA, you should simulate "unload" before changing the page.

  • scroll: The current position of the visible area within the website is determined. Then the visible areas are marked by the configured "Timer".
  • resize: The size and position of the flagged element will be recalculated. Then the "scroll" event is simulated.
  • unload: The registered events "scroll", "resize" and "unload" are removed. After this, any pending tracking information will be sent (configuration dependent).
window.wtstp_ce = window.wtstp_ce || [];
window.wtstp_ce.push('scroll');

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

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