Content Engagement

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