After the Teaser Tracking plugin has been integrated (see Step 2), you must explicitly define which elements on your website should be tracked as teasers. This step is required for all integration methods — regardless of whether you use Smart Pixel, Tag Integration, or Pixel Version 4.
To initialize teaser tracking, you define teaser elements in the global JavaScript array wtstp_ttv2. Each teaser must include basic metadata such as a name or placement, and can optionally include conversion logic or additional attributes.
This page provides detailed guidance on:
Structuring and pushing teaser objects
View tracking (automatic, disabled, or manual)
Manual tracking of engagement and conversions
Updating the viewport for dynamically loaded teasers
Once initialized, teaser views, clicks, engagement, and conversions will be tracked according to your configuration.
Teaser Initialization
Teasers must be explicitly flagged using the global array wtstp_ttv2. Each teaser object includes selector, data, and (optional) conversion logic.
window.wtstp_ttv2 = window.wtstp_ttv2 || [];
window.wtstp_ttv2.push({
selector: "li.item:nth-of-type(2)",
shadowRoot: "#women-collection",
exclude: ["li.item:nth-of-type(2) a:last-child"],
data: {
name: "New Women Collection",
rank: "Main Page Banner",
content: "Women Collection",
variant: "campaign"
},
conversion: {
type: "view", // view | click | product
goal: "order", // order | goal | both
value: "10%" // e.g. "10%" or fixed value "15"
}
});Field | Type | Required | Description |
|---|---|---|---|
selector | string / HTMLElement | Yes | CSS selector or direct element reference for the teaser container. All default clickable elements inside it will be tracked (a, area, button, input[type="submit"]). |
shadowRoot | string | No | CSS selector of a shadow DOM root, if the selector is located inside a shadow DOM. |
exclude | array | No | Array of CSS selectors or elements to exclude from teaser click tracking (e.g. legal links inside teaser). |
data.name | string | Yes* | Name of the teaser. Required unless rank is used. Used for identification in reporting and conversion matching. |
data.rank | string | Yes* | Placement of the teaser (e.g. "Hero Banner"). Required unless name is used. |
data.content | string | No | Optional: Describes the teaser content (e.g. "Shoes", "Sale"). |
data.variant | string | No | Optional: Used to distinguish A/B versions of a teaser (e.g. "blue CTA" vs. "red CTA"). |
data.seen | boolean | No | Set to true if view tracking should be disabled (e.g. for dynamically rotated teasers). Clicks, engagements and conversions are still tracked. |
conversion.type | string | No | Determines when a teaser is linked to a conversion: – "view" → after view – "click" → after click – "product" → after product purchase with same name |
conversion.goal | string | No | Specifies what qualifies as a conversion: – "order" → after order only – "goal" → after custom website goal only – "both" → order or goal |
conversion.value | string / number | No | Conversion value: – Fixed value (e.g. "15") – Percentage (e.g. "5%" of order value) – If omitted: default is product price |
* Either name or rank must be defined — at least one is required for proper tracking.
View Tracking for Dynamically Displayed Teasers
Some teasers are not visible on page load, but appear dynamically — for example, via rotating banners, z-index changes, or lazy loading. In these cases, automatic view tracking might not work as expected.
There are two options:
A) Disable View Tracking (click/engagement/conversion only)
If you want to skip view tracking entirely for a teaser (but still track clicks, engagement, and conversions), set the seen flag to true in the data object:
data: {
name: "New Women Collection",
rank: "Main Page Banner",
seen: true,
content: "Women Collection",
variant: "campaign"
}Note
This disables the automatic sending of teaser views but does not affect other tracking types.
B) Manual View Tracking
To explicitly track a teaser view (e.g. when a teaser is shown in a carousel), use the following push call:
window.wtstp_ttv2 = window.wtstp_ttv2 || [];
window.wtstp_ttv2.push([
"view",
{
name: "New Women Collection",
rank: "Main Page Banner",
content: "Women Collection",
variant: "campaign"
}
]);You can also define conversion-specific logic when triggering a manual view:
window.wtstp_ttv2.push([
"view",
{
name: "New Women Collection",
rank: "Main Page Banner",
content: "Women Collection",
variant: "campaign",
cType: "view", // view | click | product
cGoal: "goal", // order | goal | both
cValue: "15" // Fixed value or percentage
}
]);Field | Type | Description |
|---|---|---|
cType | string | Same logic as conversion.type: when to link view to conversion |
cGoal | string | Same logic as conversion.goal: which goal counts |
cValue | string or number | Fixed value or percentage of order value |
Manual Engagement and Conversion Tracking
If you want to control engagement or conversion tracking manually, define the respective variables in your source code before loading the pixel.
On engagement pages:
<script type="text/javascript">
var wtstp_teaserEngagements = true;
</script>On conversion pages:
<script type="text/javascript">
var wtstp_teaserConversions = true;
</script>Note
If you’re using Pixel Version 4, these flags must be defined before loading the teaser tracking plugin and the base pixel script (webtrekk_v4.min.js).
For Smart Pixel and Tag Integration, the variable order is not relevant.
Viewport Recalculation (for dynamic changes)
If teaser elements are added or shown dynamically (e.g. via AJAX or animation), you can force a re-evaluation of visibility using:
wtSmart.extension.teaser_tracking.update();This method recalculates the viewport detection logic and ensures that view tracking applies correctly after content changes.