Page Comparison

Funktionalitäten des SwiperSwipers

• Im Mobilen 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 zwei Mal 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:

^{Ansicht des Swipers ohne Bild}

Bildseitenverhältnisse

Standardmäßig sind folgende – an den Teasercards der jeweiligen Inhaltsform orientierte –Bildseitenverhältnisse hinterlegt:

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.

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.

^{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 drüberschwebtschwebt, 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 4000 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 drüberschwebt 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 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 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 Cockpits 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 Cockpits 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

^{Nur für PEIQ-Mitarbeiter:innen}
https://peiq.atlassian.net/wiki/x/EoGtBg