Teaser Tracking

With teaser tracking, you can analyze your onsite teasers' views, clicks, and engagement. Learn more about it here.

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

Please add WebtrekkSmartPixelModule to your root NgModule and configure the options before using directives.

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%'
    }
}