Think

Asset-Management mit Optimizely (Episerver) CMS 11 Multisite 

Im neuen Mazda Presseportal für 15 europäische Märkte

Autor

Marc Zollingkoffer
Director Software Engineering
SYZYGY Techsolutions

Lesedauer
8 Minuten

Publiziert
05.01.2022

Das Mazda Presseportal bietet Auto- und Motor-Journalisten eine zentrale Anlaufstelle um Pressmitteilungen, Wissenswertes zu Mazda und den Modellen sowie vor allem Bild- und Videomaterial (Media-Assets) einfach zugänglich zu machen. Dabei werden Inhalte aus der Europazentrale in Leverkusen, wie auch aus den einzelnen europäischen Märkten beigesteuert.

Wenn eine Website in die Jahre kommt, dann steht meist ein Relaunch an. Oft wird dann die Site an das neue CI angepasst und optisch ein wenig aufgehübscht, bleibt aber unter der Haube großen Teils unverändert. Als für das Mazda Presseportal ein solcher Relaunch anstand, hatten wir zunächst genau mehr oder weniger das im Sinn.

Allerdings stellte sich heraus, dass nicht nur die optische Anmutung und das Tooling für die Journalisten nicht mehr zeitgemäß, sondern auch die Umsetzung der internen Redaktionsworkflows überarbeitungswürdig waren. Worin lag das Problem der alten Anwendung?

Das alte Portal bestand aus zwei Bausteinen mit getrennter Datenhaltung. Zum einen ein sehr betagtes Optimizely (Episerver) CMS 6 zur allgemeinen Pflege der Website und auf der anderen Seite eine MongoDB zur Speicherung und Verwaltung der Media-Assets, welche in unterschiedlichen Qualitäten den Journalisten zum Download zur Verfügung gestellt wurden, damit diese dann in Digital- und Printprodukten Verwendung finden konnten. Das Ganze wurde im UI zusammengeführt, wobei der Editor dann zur Pflege der Inhalte in 2 unterschiedlichen Frontends arbeiten musste. Hieraus ergab sich eine Situation mit Prozessbrüchen, erschwertem Rechte-Management, einer allgemein optimierungsbedürftigen Editor-Experience sowie inkonsistenten Daten und Dubletten.

Zwei wesentliche Projektziele sollten also erreicht werden:

  1. Ein frisches, modernes und benutzerfreundliches UI, welches dem aktuellen Mazda CI folgt, um die Experience der Journalisten zu verbessern.
  2. Eine integrierte Lösung in einem Tool, um die Arbeit der Mazda-Redakteure und Admins zu erleichtern.

 

Zentrales Element zur Unterstützung der Journalisten sind die Asset-Galleries, mit welchem die Journalisten Bilder, Videos und Pressemitteilungen auffinden und auswählen können. Asset-Galleries können als eigenständige Content-Blocks nahtlos in dem Content einer Story oder Pressemitteilung eingebunden werden, so dass kontextabhängig die passenden Assets angeboten werden können. Aber auch eine Komplett-Gallery mit allen 30.000 Assets an zentraler Stelle ist möglich. Über Tags können die Medien gefiltert und dann einzeln direkt heruntergeladen oder in einem Warenkorb für einen Sammeldownload gepackt werden.

Asset Gallery mit Dokumententyp- (Tabs) und Tag-Filter.

Welche Assets sichtbar sind richtet sich in Teilen nach der generellen Berechtigungsstrategie des Marktes sowie nach individuellen Zugriffsrechten des Assets selbst.

Daher kann diese Entscheidung nicht über einen klassischen Suchindex gefällt werden, sondern muss im Episerver unter Einbezug des User-Kontextes für jeden Request einzeln erfolgen. Damit dies dennoch performant möglich ist setzen wir auf eine dreistufige Caching-Strategie.

  • Cache-Stufe 1: Alle Assets einer Gallery
  • Cache-Stufe 2: Anwendung der Tag-Filter auf Stufe-1-Results
  • Cache-Stufe 3: Anwendung der individuellen Rechte des Users auf Stufe-2-Results

 

Für die Pressemitteilungen im News-Bereich bedienen wir uns einer klassischen Freitextsuche auf Basis von Elasticsearch. Auch hier können Ergebnisse mit Hilfe von Tags weiter gefiltert werden.

News-Liste mit Tag-Filter und Freitextsuche

Am Beispiel der Asset-Galleries und dem News-Filter-Tool kann man schön einen wichtigen Software-Design-Aspekt der Lösung für das UI sehen. Wir verwenden klassisches MVC wie mit Epi üblich, reichern aber die durch Razor erzeugten Views mit React-Apps an, wenn eine User-Experience mit verstärkter Interaktivität gefordert ist. Micro-Frontends, wenn man so will.

Die einzelnen Apps kommunizieren über Vanilla-JS-Events und nutzen den Local Storage des Browsers für ihren State. Während die Razor-Page selbst über MVC ausgespielt wird, verwenden die Apps API-Controller für Anfragen an das CMS.

Mit React lassen sich Serverseitig gerenderte Webseiten oder Legacy-Anwendungen leicht um die Möglichkeiten moderner Single Page Apps erweitern.

Felix Schaffernicht
Software Architect – SYZYGY Techsolutions

Um das zweite Ziel des Projekts der verbesserten Redaktionsprozesse zu erreichen waren umfangreiche Customizing-Arbeiten am Epi-Asset-Management notwendig. So soll der wesentliche Teil der Assets zentral von Mazda Europe verwaltet werden, indem spezielle Zugriffbeschränken, die über das Standard-Epi-Rechtemanagement hinausgehen, vergeben werden und der Zeitpunkt wann die Assets für die Verwendung durch die Märkte freigeschaltet werden, gesteuert wird. Dennoch sollen den Märkten gewisse Freiheitsgrade, wie eigene Tags, erlaubt sein und für Übersetzungen auf Mitarbeiter aus den Märkten zurückgriffen werden. Dies alles führt zu einem Setup von feingranularen Zugriffsrechten und Verwendungsregeln.

Medien sollen einzeln oder als Batch gepflegt werden können und aus einer Master-High-Res-Version sollen verschiedenste Formate für die Verwendung in Galerien und im normalen Seitencontent erzeugt werden.

Zur Realisierung haben wir keine Dojo-Widgets für das Epi-Backoffice implementiert, sondern die notwendige UI im Content selbst erzeugt. Prozesse wie Format-Generierung oder Video-Encoding werden dabei über das Epi-Eventing (OnPublishedContentActivities etc) angestoßen.

Mit „publish“ werden die entsprechend ausgewählten Werte des aktuellen Assets auf die „Siblings“ übertragen.

So lässt sich mit Episerver CMS 11 eine ansprechende Asset-Management-Lösung mit komplexer Geschäftslogik erstellen – auch wenn hier und da etwas tiefer in die Trickkiste gegriffen werden musste.

Das heißt natürlich nicht, dass Epi nun unsere Standardantwort zum Thema Asset-Management ist. Für andere Anwendungsfälle können cloudbasierte DAM-Dienste wie Cloudinary mit oder ohne Zusammenspiel mit einem CMS die richtige Wahl sein.

P.S.

Die wesentlichen technischen Herausforderungen des Projekts lagen in:

  • Der schieren Masse an Daten (>30K Assets mit > 500GB an binär Dateien)
  • Performance beim Abruf der Assets und der Erzeugung der abgeleiteten Formate
  • Individuelle Sichtbarkeitsregeln für Assets im Frontend wie im Backoffice
  • Multisite- und Multi-Culture-Setup
  • Microfrontends
Interessiert?
Wir freuen uns über Dein Feedback!
Michael Wolf
Head of Technology
On this page