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.
| 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";
JS
import { WebtrekkContentEngagement } from "@webtrekk-smart-pixel/next";
JS
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>
);
}
JS