In this section, you will find the steps to integrate the plugin based on the used pixel integration.

Implementation Methods

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



Integrate the Content Engagement Plugin into the container in which the webpage to be measured is located.

To add plugins to the desired container, proceed as follows:

  1. In the container overview, select the required container by clicking the corresponding entry.
  2. Click Add Plugin. You will be forwarded to the overview of all available plugins.


  3. Select Content Engagement Plugin by clicking the appropriate button. The plugin configuration dialog opens.



  4. First, make the Request configuration:

    Two different settings can be defined:

    1. In which steps regarding the percentage should the engagement be analyzed?
      The predefined setting is 5 percent.
    2. When should the information on engagement be sent?
      3 options are available:
      • on leaving the page (preconfigured)

        Please note that the engagement information is possibly not passed if the user closes his browser.

      • after reaching % of content

        The information is sent as soon as the defined engagement value is reached ("Percentage reached") Steps of 25% are predefined, i.e., if an article has been viewed completely, the information is passed 5 times (0%, 25%, 50%, 75%, and 100%).

        Advantages of this method:
        • It is less likely that values are missing because a user closed his browser, as data is passed gradually. The smaller the chosen value, the higher the accuracy.
        • Allows a funnel-like analysis: After which share (stepwise) do users stop viewing?

      • after reaching x seconds if % steps changed

        The information is sent as soon as the defined time is reached. Also, it is sent after closing the browser if engagement increases. 30 seconds are predefined.

        If an article has been viewed for 90 seconds and the engagement at 30 seconds is 10%, at 60 seconds is 10% and at 90 seconds is 20%, the information is passed two times (after seconds 30 and 90).

        Advantages of this method:
        • It is less likely that values are missing because a user closed his browser, as data is passed gradually. The lower the chosen time, the higher the accuracy.


  5. Next, configure the Engagement by browser resolution tab.
    For calculating the engagement, the content is split into equal-sized parts. Each part has to be shown for a certain amount of seconds in the browser to count as engagement. Many websites dynamically adapt to the size of the browser window. High resolutions usually show more text than low resolutions. Consequently, the user needs more time to read the content for high resolutions.

    Here, the time in seconds that is necessary to count as "engagement" can be defined for three groups of browser resolution (small, medium, large).

    Hint: In the debug mode, you can check the settings directly on your website.

    Parameter

    Description

    Large browser resolutionSpecify the browser resolution for large browsers in pixels (greater than or equal to the specified number of pixels).
    Seconds for large browserSpecify the seconds to mark a section of the element as read on small browser resolutions (the element is divided into 200 sections).
    Medium browser resolutionSpecify the browser resolution for medium-sized browsers in pixels (greater than or equal to the specified number of pixels).
    Seconds for medium browserSpecify the seconds to mark a section of the element as read on medium browser resolutions (the element is divided into 200 sections).
    Small browser resolutionSpecify the browser resolution for small browsers in pixels (greater than or equal to the specified number of pixels).
    Seconds for small browserSpecify the seconds to mark a section of the element as read on small browser resolutions (the element is divided into 200 sections).
  6. In the Assign rules area, you define the page areas on which the measurement is to be carried out.


  7. Click Add plugin.

  8. Finally, click Publish.


  1. Download the JavaScript file.
  2. In the JavaScript file pixel-contentengagement.min.js, make the following adjustments in the configuration object wt_contentEngagementConfig:

    Example

    var contentEngagementConfig = {
    	percentageStepsInAnalytics : 5,
        sendContentEngagement : 0, //0 = unload, 1 = percentageReached, 2 = secondsReached
        percentageReached : 25,
        secondsReached : 30,
        elementVisibilityFigure : ''
        largeBrowserResolution : 1080,
        largeBrowserSeconds: 20,
        mediumBrowserResolution : 700,
        mediumBrowserSeconds: 10,
        smallBrowserResolution : 400,
        smallBrowserSeconds: 5
    };
    JS

    Parameter

    Description

    percentageStepsInAnalyticsDefine the percentage intervals 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 request to Analytics:

    • 0 = On leaving the page: The user clicks a link, reloads the page, or is inactive until the end of the session.
    • 1 = Percentage reached: The user exceeds a certain percentage (e.g., all 25% of the element).
    • 2 = Seconds reached: After a certain number of seconds (e.g., every 30 seconds).


    percentageReachedIf you specify "1" as the event trigger, enter the desired percentage here (e.g., at 25%, the event is triggered after every 25%).
    secondsReachedIf 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).
    elementVisibilityFigure

    By default, element visibility is sent with a predefined Mapp Intelligence parameter. This parameter is configured as 'text' and cannot be changed.

    To use further analyses, you can additionally send the element visibility in a parameter configured as 'number' (Custom click parameter).

    largeBrowserResolutionSpecify the browser resolution for large browsers in pixels (greater than or equal to the specified number of pixels).
    largeBrowserSecondsSpecify the seconds to mark a section of the element as read on small browser resolutions (the element is divided into 100 sections).
    mediumBrowserResolutionSpecify the browser resolution for medium-sized browsers in pixels (greater than or equal to the specified number of pixels).
    mediumBrowserSecondsSpecify the seconds to mark a section of the element as read on medium browser resolutions (the element is divided into 100 sections).
    smallBrowserResolutionSpecify the browser resolution for small browsers in pixels (greater than or equal to the specified number of pixels).
    smallBrowserSecondsSpecify the seconds to mark a section of the element as read on small browser resolutions (the element is divided into 100 sections).
  3. Insert the script pixel-contentengagement.min.js before the script webtrekk_v4.min.js.

    Example

    <script type="text/javascript" src="path/to/file/pixel-contentengagement.min.js"></script>
    <script type="text/javascript" src="path/to/file/webtrekk_v4.min.js"></script>
    XML
  4. The parameter executePluginFunction is used for the activation itself. This can be set either in the configuration variable (webtrekkConfig) in the global pixel file (for example, "webtrekk_v4.js") or as a parameter of a page-specific pixel object.

    The data acquisition is started as soon as the plugin is activated.

    Example global configuration

    var webtrekkConfig = {
         trackId: "111111111111111",
         trackDomain: "track.webtrekk.net",
         domain: "www.website.com",
         executePluginFunction: "wt_contentengagement"
    };
    JS

    Example page-specific configuration

    var wt = new webtrekkV3();
    wt.contentId = "en.home";
    wt.executePluginFunction = "wt_contentengagement";
    wt.sendinfo();
    JS

    If you want to measure the data on all your pages, we recommend global integration. The page-specific configuration is used for the measurement of individual pages.

  5. If you want to check if your configuration works, you can activate the debug mode in the plugin. Add the URL parameter or hash "wt_debug=1" to the URL.

    Example

    http://new.domain.com/start.html?wt_debug=1
    
    or
    
    http://new.domain.com/start.html#wt_debug=1
    TEXT