Contents x
      Content Engagement
      • 1 Minute to read
      • Print
      • Dark
        Light
      Contents

      Content Engagement

      • 1 Minute to read
      • Print
      • Dark
        Light
      Article summary

      The Content Engagement extension measures the percentage of an article read by the end-user.

      It requires additional setup. Learn more about it here.

      Overview

      Value

      Description

      Data value

      Default value

      Required

      selector

      Specifies the element to be measured. You can pass the CSS selector of the element.

      String

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

      String

      empty

      -

      name

      Defaults to current page name. Specifies the name of the element to be measured. Alternatively, the plugin uses the name of the current page.

      String

      current page name

      -

      percentageStepsInAnalytics

      Defaults to 5. Defines the percentage intervals to be reported in Mapp Intelligence (e.g., five means that the count is incremented in five steps).

      Number

      5

      -

      sendContentEngagement

      Specifies the event that triggers the request to Mapp Intelligence.

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

      Number

      0

      -

      percentageReached

      If you specify "percentage reached" as the event trigger, enter the desired percentage here (e.g., at 25%, the event is triggered after every 25%).

      Number

      25

      -

      secondsReached

      If you specify "seconds reached" as the event trigger, define the desired interval of seconds here (e.g., at 30 the event is triggered every 30 seconds).

      Number

      30

      -

      largeBrowserResolution

      Specifies the browser resolution for large browsers in pixels (greater than or equal to the specified number of pixels).

      Number

      1080

      -

      largeBrowserSeconds

      Specifies the seconds to mark a section of the element as read on small browser resolutions.

      Number

      20

      -

      mediumBrowserResolution

      Specifies the browser resolution for medium-sized browsers in pixels (greater than or equal to the specified number of pixels).

      Number

      700

      -

      mediumBrowserSeconds

      Specifies the seconds to mark a section of the element as read on medium browser resolutions.

      Number

      10

      -

      smallBrowserResolution

      Specifies the browser resolution for small browsers in pixels (greater than or equal to the specified number of pixels).

      Number

      400

      -

      smallBrowserSeconds

      Specifies the seconds to mark a section of the element as read on small browser resolutions.

      Number

      5

      -

      Implementation Example

      import { WebtrekkContentEngagement } from "@webtrekk-smart-pixel/react";
      import { WebtrekkContentEngagement } from "@webtrekk-smart-pixel/next";

      Component

      render()
{
    return (
        <div>
            <WebtrekkContentEngagement
                selector="#my-content"
                name="My Content"
                percentageStepsInAnalytics={ 5 }
                sendContentEngagement={ 1 }
                percentageReached={ 25 }
                secondsReached={ 30 }
                largeBrowserResolution={ 1080 }
                largeBrowserSeconds={ 5 }
                mediumBrowserResolution={ 700 }
                mediumBrowserSeconds={ 5 }
                smallBrowserResolution={ 400 }
                smallBrowserSeconds={ 5 }
            >
                <div id="my-content">
                    <p>My Content</p>
                </div>
            </WebtrekkContentEngagement>
        </div>
    );
}

      Was this article helpful?
      What's Next