- 2 Minutes to read
- Print
- DarkLight
Content Engagement
- 2 Minutes to read
- Print
- DarkLight
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. |
|
| - |
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. |
|
| - |
name | Defaults to |
|
| - |
percentageStepsInAnalytics | Defaults to |
|
| - |
sendContentEngagement | Specifies the event that triggers the request to Mapp Intelligence.
|
|
| - |
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%). |
|
| - |
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). |
|
| - |
largeBrowserResolution | Specifies the browser resolution for large browsers in pixels (greater than or equal to the specified number of pixels). |
|
| - |
largeBrowserSeconds | Specifies the seconds to mark a section of the element as read on small browser resolutions. |
|
| - |
mediumBrowserResolution | Specifies the browser resolution for medium-sized browsers in pixels (greater than or equal to the specified number of pixels). |
|
| - |
mediumBrowserSeconds | Specifies the seconds to mark a section of the element as read on medium browser resolutions. |
|
| - |
smallBrowserResolution | Specifies the browser resolution for small browsers in pixels (greater than or equal to the specified number of pixels). |
|
| - |
smallBrowserSeconds | Specifies the seconds to mark a section of the element as read on small browser resolutions. |
|
| - |
Implementation Example
<template>
<a href="#" ref="content_engagement_element">Content Engagement</a>
</template>
<script>
export default {
name: "example",
mounted() {
this.$webtrekk.extension("content_engagement"); // activate content engagement
this.$webtrekk.extension("content_engagement", "add", {
selector: this.$refs.content_engagement_element,
name: "name of the element",
config: {
percentageStepsInAnalytics: 5,
sendContentEngagement: 1,
percentageReached: 25,
secondsReached: 30,
largeBrowserResolution: 1080,
largeBrowserSeconds: 5,
mediumBrowserResolution: 700,
mediumBrowserSeconds: 5,
smallBrowserResolution: 400,
smallBrowserSeconds: 5
}
});
}
};
</script>
<template>
<div
v-webtrekk.content_engagement="{
name: 'name of the element',
config: {
percentageStepsInAnalytics: 5,
sendContentEngagement: 1,
percentageReached: 25,
secondsReached: 30,
largeBrowserResolution: 1080,
largeBrowserSeconds: 5,
mediumBrowserResolution: 700,
mediumBrowserSeconds: 5,
smallBrowserResolution: 400,
smallBrowserSeconds: 5
}
}"
>
content
</div>
</template>