Step 2: Configuring and Activating the Plugin

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 resolution	Specify the browser resolution for large browsers in pixels (greater than or equal to the specified number of pixels).
   Seconds for large browser	Specify the seconds to mark a section of the element as read on small browser resolutions (the element is divided into 200 sections).
   Medium browser resolution	Specify the browser resolution for medium-sized browsers in pixels (greater than or equal to the specified number of pixels).
   Seconds for medium browser	Specify the seconds to mark a section of the element as read on medium browser resolutions (the element is divided into 200 sections).
   Small browser resolution	Specify the browser resolution for small browsers in pixels (greater than or equal to the specified number of pixels).
   Seconds for small browser	Specify 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
   };

   Parameter	Description
   percentageStepsInAnalytics	Define 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).
   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).
   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).
   largeBrowserResolution	Specify the browser resolution for large browsers in pixels (greater than or equal to the specified number of pixels).
   largeBrowserSeconds	Specify the seconds to mark a section of the element as read on small browser resolutions (the element is divided into 100 sections).
   mediumBrowserResolution	Specify the browser resolution for medium-sized browsers in pixels (greater than or equal to the specified number of pixels).
   mediumBrowserSeconds	Specify the seconds to mark a section of the element as read on medium browser resolutions (the element is divided into 100 sections).
   smallBrowserResolution	Specify the browser resolution for small browsers in pixels (greater than or equal to the specified number of pixels).
   smallBrowserSeconds	Specify 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>

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

   Example page-specific configuration

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

   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.