Page Comparison

Funktionalitäten des Swiper

• 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 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 Thumbnails 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:

Image Removed

Image Added

^{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 aktivierten Thumbnails aktivierter Vorschaubilder-Leiste werden ab zwei kuratierten Inhalten Thumbnails Vorschaubilder angezeigt. Sollten nicht genügend Inhalte kuratiert sein, um die ThumbnailVorschaubilder-Plätze zu füllen, wiederholen sich die vorhandenen Inhalten Inhalte in der ThumbnailVorschaubilder-Leiste.

^{Beispiel für aktivierte ThumbnailVorschaubilder-Leiste}

Weiterblättern der

Vorschaubilder-Leiste

Die ThumbnailVorschaubilder-Leiste ist fest verknüpft mit dem Weiterblättern des Swipers, d.h. erst wenn ein Swipe Slide erreicht ist, der das nicht mehr in der ThumbnailVorschaubilder-Leiste sichtbar wäre (der fünfte), wird bei der Thumbnaildreht sich die Vorschaubilder-Leiste weitergeblättertweiter.

Das automatische Weiterblättern des Swipers und der Thumbnail-Leiste wird gestoppt, sobald der Benutzer mit der Maus über Swiper oder Thumbnail hovertein 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 Swiper Slide oder Thumbnail hovert Vorschaubild drüberschwebt (siehe auch oben “Weiterblättern der ThumbnailVorschaubilder-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 aktivierten Thumbnails aktivierter Vorschaubilder-Leiste kann mit Klick auf das jeweilige Thumbnail-Bild 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.

Image Removed

Image Added

^{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.

Verwandte Seiten