PORTAL und PPS Knowledge Base
Swiper (Layout im Teasermanagement)
Der Swiper ist ein im Teasermanagement | Teaser Layouts für Beiträge verfügbares Layout für Beiträge, Schnappschüsse und Veranstaltungen.
Es handelt sich dabei um einen Slider basierend auf den Teasercards der jeweiligen Inhaltsform (Beiträge/Schnappschüsse/Veranstaltungen), der auf das https://swiperjs.com/ Framework aufbaut.
Der Swiper ist im mobilen wischbar, für kleine Bildschirmbreiten und Teaserslots optimiert und unterstützt Lazy-Loading.
Funktionalitäten des Swipers
Im mobilen wischbar
Optimiert für kleine Bildschirmbreiten und Teaserslots
Unterstützt Lazy-Loading
Inhaltsverzeichnis
Allgemeine Beschreibung
Der Swiper als Teaser-Layout für Kuration und Targeting wurde aufbauend auf dem https://swiperjs.com/ Framework implementiert und basiert auf den Teasercards der jeweiligen Inhaltsform (Beiträge/Schnappschüsse/Veranstaltungen).
Als Layout im Teasermangement steht der Swiper jeweils für Beiträge, Schnappschüsse und Veranstaltungen zweimal zur Verfügung. Damit können Inhalte einerseits wie gewohnt in einer bestimmten Reihenfolge kuratiert werden. Andererseits können Inhalte auch in zufälliger Reihenfolge ausgespielt werden. Dies ist insbesondere für den Swiper relevant, da hier immer nur ein Inhalt sichtbar ist.
Aufbau
Der Swiper besteht aus einem Bild, einem Container (Textbox), der auf einem transparenten Hintergrund auf dem Bild platziert ist, einer Pagination und ggf. aus einer Leiste mit Vorschaubildern (konfigurierbar). Zudem können Labels (für Kategorie, Anzeigenmarkierung, Premium-Content) auf dem Inhaltsbild platziert sein (je nachdem, wie die Teasercards konfiguriert sind, auf denen der Swiper basiert).
Hintergrundbild
Im Swiper wird das Inhaltsbild des jeweiligen Inhalts angezeigt. Ist am Inhalt kein Bild hinterlegt, wird eine schraffierte Hintergrundfläche anstatt eines Bildes im Swiper ausgespielt:
Bildseitenverhältnisse
Standardmäßig sind folgende – an den Teasercards der jeweiligen Inhaltsform orientierte –Bildseitenverhältnisse hinterlegt:
Ansicht |
| Content-Breite |
|
---|---|---|---|
Desktop | Bildseitenverhältnis der Cards | fullsize | Bildseitenverhältnis der Cards |
Tablet | Bildseitenverhältnis der Cards | content | Bildseitenverhältnis der Cards |
Mobile | 3:2 | mini | 3:2 |
Für die mobile Ansicht wurde standardmäßig ein Bildseitenverhältnis von 3:2 implementiert, da es sich insbesondere für Inhalte mit viel Text robuster verhält.
Pagination
Damit ist die Anzeige unter dem Bild gemeint, an der man sieht, wie viele Slides kuratiert sind, und welcher Slide aktiv ist. Derzeit im Einsatz sind die Konfigurationsmöglichkeiten bulletpoints
und progressbar
.
Pagination bulletpoints
Pagination progressbar
Vorschaubilder
Bei aktivierter Vorschaubilder-Leiste werden ab zwei kuratierten Inhalten Vorschaubilder angezeigt. Sollten nicht genügend Inhalte kuratiert sein, um die Vorschaubilder-Plätze zu füllen, wiederholen sich die vorhandenen Inhalte in der Vorschaubilder-Leiste.
Standardmäßig ist die Vorschaubilder-Leiste deaktiviert. Sie kann auf Wunsch von PEIQ aktiviert werden.
Beispiel für aktivierte Vorschaubilder-Leiste
Weiterblättern der Vorschaubilder-Leiste
Die Vorschaubilder-Leiste ist fest verknüpft mit dem Weiterblättern des Swipers, d. h. erst, wenn ein Slide erreicht ist, das nicht mehr in der Vorschaubilder-Leiste sichtbar wäre (der fünfte), dreht sich die Vorschaubilder-Leiste weiter.
Das automatische Weiterblättern des Swipers wird gestoppt, sobald der oder die Benutzer:in mit der Maus über ein Slide oder Vorschaubild schwebt, um dem bzw. der Benutzer:in die Möglichkeit zu geben, den Text zu lesen oder robust auf den Beitrag zu klicken – ohne, dass in der Zwischenzeit weitergeswipt wird und dadurch ggf. nicht der gewünschte Inhalt gewählt wird.
Übergang zum nächsten Slide
Der Swiper wurde mit Autoplay implementiert, d. h. nach einer bestimmten Zeitspanne wird automatisch zum nächsten Slide gewechselt. Diese Zeitspanne ist kundenindividuell konfigurierbar (standardmäßig ist sie auf 4.000 Millisekunden gestellt). Das automatische Weiterblättern des Swipers wird gestoppt, sobald der oder die Benutzer:in mit der Maus über Slide oder Vorschaubild schwebt (siehe auch oben “Weiterblättern der Vorschaubilder-Leiste).
Ein manueller Übergang zum nächsten Slide ist über eine “Wischgeste” direkt am Slide möglich (Mobil mit dem Finger, am Desktop via Mausbewegung – ähnlich “Drag & Drop”).
Bei aktivierter Vorschaubilder-Leiste kann mit Klick auf das jeweilige Vorschaubild zu dem Slide mit dem entsprechenden Bild gewechselt werden.
Wurde als Paginierung bulletpoints
gewählt, besteht die Möglichkeit, neben der “Wischgeste” auch über Klick auf die Paginierung die Slides weiter- bzw. zurückzublättern.
Übergangseffekt
Für den Übergang zwischen den einzelnen Slides stehen die Effekte slide
, fade
und coverflow
zur Verfügung.
Standardmäßig ist der Effekt fade
hinterlegt.
Randomisierter Ausspielmodus
Als Layout im Teasermangement steht der Swiper jeweils für Beiträge, Schnappschüsse und Veranstaltungen zweimal zur Verfügung: “Swiper” bzw. “Swiper - zufällige Reihenfolge”.
Damit können Inhalte einerseits wie gewohnt in einer bestimmten Reihenfolge kuratiert werden. Andererseits können Inhalte auch in zufälliger Reihenfolge ausgespielt werden. Dies ist insbesondere für den Swiper relevant, da hier immer nur ein Inhalt sichtbar ist.
Analyse & Benchmark
Bei der Funktion “Tracking Teaser-Impressionen kuratierte Teaser” in den wird für alle im Swiper kuratierten Inhalte eine Impression getrackt, sobald der Swiper einmal ausgespielt wird – unabhängig davon, ob der oder die Benutzer:in auch alle kuratierten Inhalte gesehen hat.
Die Funktion “Herkunft der Leser” in den wird über die Inhaltsdetailseite getrackt, d. h. es wird erst gezählt, wenn der bzw. die Benutzer:in auf der Detailseite ist und basierend auf der URL gewertet, woher der oder die Leser:in kommt. D. h. hier wird nur gezählt, wenn der Inhalt aufgerufen wurde, daher kommt es zu keinen Interdependenzen zwischen den kuratierten Inhalten beim Tracking.
Verwandte Seiten