---
title: "Teaser Tracking"
slug: "extensions-teaser-tracking"
updated: 2024-05-23T11:21:57Z
published: 2024-05-23T11:21:57Z
canonical: "docs.mapp.com/extensions-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 Examples

### **Directive**

> [!NOTE]
> Please add `WebtrekkSmartPixelModule` to your root NgModule and configure the options before using directives.

```javascript
import { Component } from "@angular/core";

@Component({
    template: `<div id="my-products" [wt-teaser]="webtrekkData"></div>`,
    styles: [
        'div { height: 500px; width: 100%; border: solid 1px black; }'
    ]
})
export class ExampleComponent {
    webtrekkData = {
        selector: '#my-products',
        name: 'My products',
        rank: 'header',
        content: 'My products overview',
        variant: 'products',
        type: 'click',
        goal: 'order',
        value: '10%'
    }
}
```