---
title: "Teaser Tracking"
slug: "vue-teaser-tracking"
updated: 2024-03-21T13:20:59Z
published: 2024-03-21T13:21:00Z
canonical: "docs.mapp.com/vue-teaser-tracking"
---

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

# Teaser Tracking

With teaser tracking, you can analyze your onsite teasers' views, clicks, and engagement. Learn more about it [here](/v1/docs/teaser-tracking).

## Overview

| Value | Description | Data type | Default value | Required | Where to analyze | Request Parameter |
| --- | --- | --- | --- | --- | --- | --- |
| name | Specifies the teaser name. E.g., "16554_winter-sale" | `String` |  | Yes | *Navigation > Teaser - Performance > Teaser Name* | ck521 |
| 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` |  | - |  | - |
| rank | Specifies the teaser placement. E.g., "Position_6" | `String` |  | - | *Navigation > Teaser - Performance > Teaser Performance* | ck520 |
| content | Specifies the teaser content. E.g., "News" | `String` |  | - | *Navigation > Teaser - Performance > Teaser Performance* | ck526 |
| variant | Specifies the teaser variant and is often used for testing. E.g., "A". | `String` |  | - | *Navigation > Teaser - Performance > Teaser Performance* | ck522 |
| seen | When set to `true` , teasers whose visibility is controlled via a zIndex, a rotation of different teaser elements, or using another dynamic method must also be flagged if they are displayed. View tracking will be deactivated for this teaser. Click-, engagement- and conversion tracking will still be activated. | `Boolean` | `false` | - |  | ck523 |
| type | Specifies the teaser conversion type. - `view`: The teaser should be connected to the conversion when it has been **viewed**. - `click`: The teaser should be connected to the conversion when it has been **clicked**. - `product:` The teaser should be connected to the conversion when it has been **clicked** and you have product teasers (teaser name uses product name). | `String` | `product` | - |  | ck527 |
| goal | Specifies the teaser conversion goal. - `order`: The teaser should only be connected to the conversion. - `goal: `The teaser should only be connected to the website goal. - `both`: The teaser should be connected to conversion or website goal. | `String` | `both` | - |  | - |
| value | Specifies the teaser conversion value that will be assigned to the teaser in case of an order. - `conversion value`: uses the product cost parameter. Only works, if the teaser name is identical to the product name. - `percentage of order value`: uses a percentage of order value parameter (i.e., 5%). - `fixed value:` Fixed value (i.e., 15). | `String` | `conversion value` | - |  | - |

## Implementation Example

```xml
<template>
  <a href="#" ref="teaser_element">Teaser</a>
</template>
 
<script>
export default {
  name: "example",
  mounted() {
    this.$webtrekk.extension("teaser_tracking"); // activate teaser tracking
    this.$webtrekk.extension("teaser_tracking", "add", {
      selector: this.$refs.teaser_element,
      data: {
        name: "My products",
        rank: "header",
        content: "My products overview",
        variant: "products"
      },
      conversion: {
        type: "click",
        goal: "order",
        value: "10%"
      }
    });
  }
};
</script>
```

```xml
<template>
  <div>
    <a
      v-webtrekk.teaser_tracking="{
        data: {
          name: 'My products',
          rank: 'header',
          content: 'My products overview',
          variant: 'products'
        },
        conversion: {
          type: 'click',
          goal: 'order',
          value: '10%'
        }
      }"
      href="#"
      >Teaser</a
    >
  </div>
</template>
```