In diesem Artikel zum Teaser Tracking Plugin können Sie anhand eines simplen Beispiels sehen, wie Sie mehrere Teaser Elemente mit einem einfachen for-Loop an das Teaser Tracking übergeben können.

Außerdem wird veranschaulicht wie Sie display:none nutzen können um den View Request für einen Teaser, der zunächst unsichtbar ist, erst abzufeuern wenn er schließlich sichtbar wird.

Hier zunächst der Code:


Nun gehen wir den Code durch.

for-loop für die Übergabe an das Teaser Tracking Plugin

Zunächst wird im ersten Schritt das Teaser Plugin aktiviert. Dies kann, wenn Sie die Tag Integration benutzen, auch im TI Frontend in der Container-Konfiguration eingestellt werden.

Im zweiten Schritt wird dann ein simpler for-Loop über die HTML Collection gemacht, die wir bekommen weil jedes Teaser Element eine gemeinsame Klasse hat, nämlich die CSS Klasse "framed".

Wir haben den Teaser Elementen außerdem noch zwei Attribute hinzugefügt, deren Werte wir im for-loop auslesen und an das Teaser Plugin übergeben werden.

 Im for-loop iterieren wir jetzt über die Elemente in der HTML Collection, und führen dort in jedem Durchlauf die Methode "wt_ttv2.push" aus.

Unsichtbare Teaser

Oftmals sind Teaser nicht von Beginn an sichtbar, sondern tauchen erst nach einer gewissen Verzögerung oder durch eine Nutzerinteraktion auf.

In der Dokumentation des Teaser Tracking erhalten Sie mehr Informationen zum "seen" Property, das Sie nutzen können um einen View Request zu unterdrücken.

Sie können sich aber auch die automatische Erkennung der Sichtbarkeit aus dem Teaser Tracking Plugin zunutze machen, und genau diese Technik soll hier vorgestellt werden.

Das Teaser Tracking schickt automatisch keinen View Request für ein Teaser Element, wenn dieses auf display: none steht.

Auf dem dritten Teaser im Beispielcode liegt die CSS Klasse "invisible", die eben jene Eigenschaft beinhaltet.

Wenn Sie über die Ergebnisseite des Beispielcodes scrollen werden Sie in den Netzwerk Requests keinen view Request (ck523) zum dritten Teaser finden .

Erst wenn Sie den Button klicken, der dritte Teaser sichtbar wird und Sie entweder scrollen oder die Fenstergröße ändern geht der View-Request für Teaser3 raus.

Warum werden nicht auch andere Eigenschaften ausgelesen?

Möglicherweise nutzen Sie in Ihrem Seitentemplate nicht display:none, sondern z.B. visibility: hidden oder ähnliche CSS Eigenschaften um Teaser zu verbergen.

Diese Eigenschaften werden vom Teaser Tracking aus Performancegründen nicht beachtet - display: none nimmt das Element aus dem Pageflow heraus. Dadurch kann man über die Methode .getBoundingClientRect() direkt sie Sichtbarkeit herauslesen.

Bei visibility bleibt das Element im Pageflow, das heißt es müsste sowohl im eigentlichen Element als auch in allen Elternelementen überprüft werden. Je nachdem wie tief die Elemente in der Seitenstruktur sind kann es dabei zu erheblichen Performanceeinbußen kommen, da diese Überprüfung bei jedem Scroll und Resize Event stattfinden würde. Deshalb verzichten wir auf diesen Check und beschränken uns auf display: none.