Swiper (Layout im Teasermanagement)

Der Swiper ist ein im https://peiq.atlassian.net/wiki/spaces/PPSD/pages/74612901/Teasermanagement#Teaser-Layouts-f%C3%BCr-Beitr%C3%A4ge 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 Swiper

Im Mobilen wischbar
Optimiert für kleine Bildschirmbreiten und Teaserslots
Unterstützt Lazy-Loading

Inhaltsverzeichnis

Inhaltsverzeichnis anzeigen

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 zwei Mal 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:

^{Ansicht des Swipers ohne Bild}

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.

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.

Standarmäß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 Benutzer mit der Maus über ein Slide oder Vorschaubild drüberschwebt, um dem Benutzer 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 4000 Millisekunden gestellt). Das automatische Weiterblättern des Swipers wird gestoppt, sobald der Benutzer mit der Maus über Slide oder Vorschaubild drüberschwebt (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 and 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 zwei Mal 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.

^{Ansicht “Teaser bearbeiten” – Teaser Layout wählen}

Analyse & Benchmark

Bei der Funktion “Tracking Teaser-Impressionen kuratierte Teaser” in den Cockpits wird für alle im Swiper kuratierten Inhalte eine Impression getrackt, sobald der Swiper einmal ausgespielt wird – unabhängig davon, ob der Benutzer auch alle kuratierten Inhalte gesehen hat.

Die Funktion “Herkunft der Leser” in den Cockpits wird über die Inhaltsdetailseite getrackt, d.h. es wird erst gezählt, wenn der Benutzer auf der Detailseite ist und basierend auf der URL gewertet, woher der Leser 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.