Teaser Tracking
    • 2 Minutes to read
    • Dark
      Light

    Teaser Tracking

    • Dark
      Light

    Article summary

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


    Was this article helpful?

    What's Next