This article about the Teaser Tracking plugin shows a simple example of how to pass multiple teaser elements to Teaser Tracking using a basic for-loop. It also illustrates how display:none can be used to send the view request for a teaser that is initially invisible only when it finally becomes visible.

First, the code:

Now, let us go through the code.

for-loop for Transfer to the Teaser Tracking Plugin

The first step is to activate the Teaser plugin. This can also be set in the Tag Integration (TI) frontend in the container configuration if tag integration is used. The second step is to make a simple for-loop over the HTML collection, which is obtained, because every teaser element has a common class, the CSS class ‘framed’. Two more attributes have been added to the teaser elements. The values of these attributes will be read out in the for-loop and passed to the Teaser plugin. In the for-loop, the elements in the HTML collection are iterated over, and the method ‘wt_ttv2.push’ is executed in each run.

Invisible Teasers

Teasers are often not visible from the beginning, but only appear after a certain delay or through user interaction. Refer to the Teaser Tracking documentation for more information about the ‘seen’ property, which can be used to suppress a view request. Alternatively, automatic visibility recognition from the Teaser Tracking plugin can be used. It is precisely this technique that will be presented here. Teaser Tracking does not automatically send a view request for a teaser element if it is set to display:none. The CSS class ‘invisible’ is located on the third teaser in the example code, which contains that very property. Scrolling over the result page of the example code will not find a view request (ck523) for the third teaser in the network requests. The view request for Teaser3 is only sent out when the button is clicked, the third teaser becomes visible, and the user either scrolls or changes the window size.

Why are other properties not read out as well?

Maybe the page template does not use display:none, but visibility:hidden, or similar CSS properties to hide teasers. These properties are ignored by Teaser Tracking for performance reasons – display:none removes the element from the page flow. This allows for the visibility to be read directly from the page flow using the .getBoundingClientRect() method. In the case of visibility, the element remains in the page flow, which means that it would have to be checked in the actual element as well as in all parent elements. Depending on how deep the elements are in the page structure, this can cause considerable performance losses, since this check would be executed at each scroll and resize event. This is why this check is omitted, and instead only display:none is used.