The plugin is available in Tag Integration. Alternatively, you can integrate it in the standard pixel as a separate JavaScript file.

Implementation Methods

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 was 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%).

        Advantage 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 increased. 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).

        Advantage 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.


Since version 3.2.x of the Mapp Intelligence tracking script, the use of plugins is supported. A plugin is all JavaScript functions that are transferred to the Mapp Intelligence pixel.

For the integration of the Content Engagement Plugin, you need the JavaScript file pixel-contentengagement.min.js.

  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 = "de.homepage";
    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