---
title: "Content Engagement"
slug: "vue-content-engagement"
updated: 2024-03-21T13:18:17Z
published: 2024-03-21T13:18:17Z
canonical: "docs.mapp.com/vue-content-engagement"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/v1/docs/content-engagement).

## 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

```xml
<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>
```

```xml
<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>
```