Content-Produktion mit Adobe Experience Manager als Headless-CMS beschleunigen.

Die Art und Weise, wie Menschen Content konsumieren, hat sich in den letzten acht Jahren stark verändert. Unternehmen müssen sich anpassen und neue Wege bei der Verwaltung und Bereitstellung ihrer Inhalte gehen. Hier beschreibe ich meinen Headless-Weg, auf dem ich mit Adobe Experience Manager und ähnlichen Produkten von Adobe gearbeitet habe, um den optimalen Workflow für die Content-Produktion zu finden. In diesem Artikel zeige ich euch Experience Manager und Best Practices bei der Content-Produktion mit sowohl Headless- als auch Hybrid-Ansätzen.

Menschen interagieren heute über zahlreiche digitale Kanäle mit einer Marke und erwarten hochgradig personalisierte Erlebnisse. Da Mobilgeräte beim Konsum von Webcontent zu einem wichtigen Faktor – und für einige Gruppen zu einer Selbstverständlichkeit – geworden sind, wurden Websites so weiterentwickelt, dass sie mit demselben Content mehrere Formate unterstützen, von Smartphones über Tablets bis zu Desktops. Bei diesem Übergang wurden vor allem Änderungen an Layout und Design der Websites vorgenommen, der eigentliche Content musste jedoch nicht verändert werden. Derselbe Content konnte einfach auf diesen Geräten bereitgestellt werden, da sie alle nach wie vor einen Webbrowser für den Zugriff auf die Inhalte nutzten.

Mit einem Headless-Content-Management-System (CMS) können Unternehmen ihr Frontend mit einem Framework ihrer Wahl entwickeln und Content-Blöcke erstellen, die auf beliebigen Kanälen bereitgestellt und überall wiederverwendet werden können. Dies gibt Unternehmen die Möglichkeit, schneller und effizienter herausragende Erlebnisse zu realisieren.

Was bedeutet „Headless“ und welche Vorteile bringt es euch?

In einem Headless-CMS ist das Backend vollständig vom Frontend entkoppelt. Somit wirtd das Content-Management von der Präsentation des Contents für die Endbenutzerinnen und -benutzer getrennt. Das CMS legt die Daten über ein oder mehrere APIs offen und die Frontend-Systeme rufen die Daten bei Bedarf von den APIs ab.

Implementierungsansatz.

Auf der Implementierungsseite ermöglicht euch ein Headless-System einen „Frontend first“-Ansatz, bei dem ihr Pseudodaten im selben Format verwenden könnt, wie es am Ende in den Backend-Systemen produziert wird. Dadurch werden der Code und die Programme im Frontend sowie der Backend-Content auf verschiedenen Kanälen wiederverwendbar. Beide Seiten des Programms können unabhängig voneinander und parallel entwickelt werden.

Content-Effizienz.

Durch die Trennung von Daten und Präsentation hat das Frontend die Kontrolle darüber, wie der Content interpretiert und in die Form konvertiert wird, in der er den Endbenutzerinnen und -benutzern angezeigt wird. Dadurch wird der Content wiederverwendbar, da verschiedene Frontends, zum Beispiel eine Website und eine Mobile App, dieselben Daten lesen und sie mit eigenen Methoden in die Form bringen können, in der sie den Benutzerinnen und Benutzern zur Anzeige und Interaktion bereitgestellt werden.

Da die Quelldaten für alle Frontends identisch sind, werden alle Änderungen an den Daten überall übernommen. Jede Änderung muss also nur einmal vorgenommen werden und der Content bleibt einheitlich. So können Marketing-Fachleute und Content-Autorinnen und -Autoren sich auf die Erstellung der besten Inhalte für ihre Endbenutzerinnen und -benutzer konzentrieren und sich darauf verlassen, dass der Content konsistent präsentiert wird. Dies wird umso wichtiger, je stärker Erlebnisse personalisiert werden, da das Content-Volumen immer weiter wächst.

Technologieunabhängig.

Durch die Beseitigung der starren Verknüpfung zwischen Backend und Frontend können Teams neue UIs entwickeln, ohne die Backend-Systeme antasten zu müssen. Dies vereinfacht den Umstieg auf neue Technologien und die Implementierung neuer Funktionen.

Frontend-Teams können je nach Situation, Zielgerät oder Use Case die passende Technologie auswählen. Sofern das Backend-System ein konsistentes API bereitstellt, spielt es keine Rolle, wie oder wo das Frontend verwaltet wird.

Wiederverwendbarer Code.

Wenn Bibliotheken bestehender Frontend-Komponenten vorhanden sind, können diese auf verschiedenen Plattformen verwendet werden, die mit verschiedenen Backend-Systemen verknüpft sein können. Indem Teams für alle Use Cases dieselben Frontend-Komponenten verwenden, können sie für ein konsistentes Look-and-Feel sorgen, ohne dass Endbenutzerinnen und -benutzer bemerken, dass beim Management der verschiedenen Plattformen auch verschiedene Systeme zum Einsatz kommen.

Habt ihr Fragen dazu, wie ihr Headless in eurer Organisation einsetzen könnt? Setzt euch mit unseren Beratenden in Verbindung, die sich auf die Headless-Implementierung spezialisiert haben. Ihr könnt Erfahrungen austauschen, Antworten erhalten und Best Practices kennenlernen. Startet hier einen Dialog.

Der Wert von Adobe Experience Manager als Headless-CMS.

Das Adobe Experience Manager Headless-CMS gibt euch alle Tools, die ihr benötigt, um euren Content zu verwalten und ihn über APIs auf beliebig vielen Frontends sowohl per JSON als auch GraphQL bereitzustellen. Die Plattform lässt sich auch erweitern, damit ihr später neue APIs hinzufügen und Content mit anderen Methoden bereitstellen könnt, ohne den eigentlichen Content anpassen zu müssen.

Experience Manager Headless bietet ein hohes Maß an Flexibilität und zählt zu den wenigen erhältlichen Lösungen, mit denen Organisationen den Headless-Ansatz ohne Beeinträchtigung des Erlebnisses für die Marketing-Fachleute umsetzen können. Auch bei Headless-Implementierungen haben Marketing-Fachleute Zugriff auf eine leistungsstarke WYSIWYG-Oberfläche für die Bearbeitung, sodass sie außergewöhnliche Erlebnisse ohne Unterstützung durch die Entwicklungs- und IT-Teams erstellen können.

Außerdem können Autorinnen und Autoren mit dem SPA-Editor in Experience Manager den Content nahtlos bearbeiten, während Entwicklungs-Teams von der einfacheren Entwicklung mit SPA-Frameworks (Single Page Application) profitieren. Da die erste Seite einer SPA Server-seitig gerendert wird, laden die Seiten viel schneller und der Content wird sofort nach Abruf der Informationen angezeigt.

Doch die Flexibilität geht noch weiter: Dank Experience Manager Headless bleiben Organisationen für die Zukunft gerüstet, da die Weiterentwicklung von Use Cases unterstützt wird. Dadurch können Teams jetzt den Headless-Ansatz umsetzen und sich gleichzeitig die Möglichkeit offenhalten, künftig auf hybride oder traditionelle Full-Stack-Erlebnisse zu expandieren, ohne die Plattform wechseln zu müssen.

Die in Experience Manager integrierten DAM-Funktionen ermöglichen die Speicherung von Bildern, Videos und anderen Assets im selben Content-Management-System, von wo aus sie direkt oder im Rahmen der Daten über APIs bereitgestellt werden können. Außerdem werden vorkonfigurierte Integrationen mit anderen Produkten von Adobe unterstützt, zum Beispiel Adobe Target für die Personalisierung, multivariate Tests und A/B-Tests sowie Adobe Dynamic Media für die erweiterte Bereitstellung von Bildern und Videos.

Reines Headless und hybrides Headless im Vergleich.

Sehen wir uns jetzt die Unterschiede zwischen einer reinen Headless-Implementierung und dem hybriden Ansatz an.

Reines Headless.

Reine Headless-Szenarien nutzen Content-Fragmente in Experience Manager zum Speichern strukturierter Daten. Dabei werden Content-Fragment-Modelle erstellt, in denen der Satz von Daten definiert wird, die im jeweiligen Fragmenttyp enthalten sind. Für einen Blog sind beispielsweise ein Titel, eine Beschreibung und ein Fließtext erforderlich.

Mit Verweisen auf Content-Fragmente können Daten aus anderen Fragmenten eingebunden werden, beispielsweise Bürostandorte oder Details zu Autorinnen und Autoren. Dies verhindert die Duplizierung solcher Daten und sorgt dafür, dass die Daten bei jedem Aufruf immer aktuell sind.

Das GraphQL-API ermöglicht es dem Frontend, die benötigten Daten per Abfrage des Content-Management-Systems abzurufen und zum Beispiel alle Blogs zu einem bestimmten Thema oder von einem bestimmten Autor zu laden. Sobald die Content-Autorinnen und -Autoren ein neues Content-Fragment veröffentlichen, das diesen Kriterien entspricht, ist dieses Element in den Ergebnissen aller nachfolgenden Abfragen enthalten.

Hybrides Headless.

Hybrides Headless-Content-Management nutzt für die Verwaltung von Inhalten sowohl Headful- als auch reine Headless-Methoden. Die Verwendung von Kernkomponenten in Experience Manager vereinfacht dies, da die Komponenten sowohl das traditionelle HTML-Rendern als auch das Headless-Rendern unterstützen. Dies wiederum ermöglicht die Nutzung derselben Experience Manager-Komponenten in jedem Kontext. Wo ohnehin Seiten-Authoring erfolgt, kann die Nutzung dieser Komponenten dann auf weitere entkoppelte Use Cases erweitert werden.

Beim hybriden Modell können Content-Autorinnen und -Autoren Struktur und Layout der Inhalte bei Bedarf weiter auf Seitenebene erstellen und so die Positionierung, Größe und andere Eigenschaften ihres Contents zum Zeitpunkt der Anzeige steuern und sich dies direkt im Content-Management-System als Vorschau anzeigen lassen.

In diesem Modus könnt ihr flexibel entscheiden, welche Bereiche des Contents vollständig headless bleiben und mit Content-Fragmenten verwaltet werden sollen und bei welchen Bereichen mehr Kontrolle durch das Content-Authoring möglich sein soll. So könnt ihr nach wie vor von wiederverwendbarem Content profitieren und gleichzeitig euren Content-Autorinnen und -Autoren im benötigten Umfang die Kontrolle überlassen.

Der hybride Ansatz beim Headless-Content-Management ist meiner Meinung nach am besten geeignet, sobald einer der Endpunkte eures Contents eine Website ist. Überdenkt sorgfältig die verschiedenen Arten von Content, die verwaltet werden sollen, damit ihr möglichst effizient bleibt und dennoch beim Authoring den gewünschten Grad an Kontrolle ermöglicht.

Meine Lehren aus der Headless-Implementierung.

Damit ihr weitere Erkenntnisse zur Headless-Implementierung erhaltet, zeige ich euch im Folgenden, wie dies bei einem unserer Einzelhandelskunden umgesetzt wurde. Dieses Setup ist auf die individuellen Anforderungen und den Technologie-Stack zugeschnitten und dient daher nicht als allgemeingültige Blaupause. Ihr erhaltet aber eine Vorstellung davon, wie die Implementierung in der Praxis aussieht.

Ursprünglich umfasste das Projekt lediglich das Web Content Management und den Wunsch, React-basierte Komponenten mit dem CMS zu verwenden und es von der Web-Anwendung zu entkoppeln, die den Benutzerinnen und Benutzern angezeigt wird. Eine weitere wichtige Anforderung war die Kontrolle der Content-Autorinnen und -Autoren über das Seiten-Layout, da viele verschiedene Arten von Seiten verwaltet wurden und Content sehr häufig geändert wird.

Wir entwickelten eine React-Web-Anwendung, die Server-seitiges Rendern unterstützt und die Inhalte aus einem Cache in den Frontend-Systemen des Kunden liest. Wenn Content vom CMS aus veröffentlicht wird, werden die Daten im Frontend-Cache aktualisiert und der Cache des Content Delivery Network wird geleert, damit der neue Content für die Endbenutzerinnen und -benutzer sofort sichtbar ist.

Content-Autorinnen und -Autoren nutzen in großem Umfang Experience Fragments in Experience Manager zur Erstellung von Content-Blöcken, die auf der ganzen Website wiederverwendet werden und in andere Web-Anwendungen eingebettet werden können, zum Beispiel beim Checkout-Prozess.

Content-Fragmente werden genutzt, um digitale Angebote sowie Inhalte von Kopf- und Fußzeilen zu verwalten, beispielsweise die Navigation und Social-Media-Links. In Kürze werden auch Inhalte für Mobile Apps über Content-Fragmente verwaltet, ebenso Daten im Zusammenhang mit Gesundheitsdienstleistungen, die dann über eine Komponente oder direkt mit der Mobile App auf Web-Seiten bereitgestellt werden können.

Der Beginn eures Wegs zur Headless-Implementierung.

Ob ihr derzeit Content für mehrere Endpunkte verwaltet oder nicht: Der Schritt zu einem Headless-Ansatz beim Content-Management ist in jedem Fall vernünftig. Er bietet den Entwicklungs-Teams die flexible Auswahl der gewünschten Technologien je nach Arbeitsweise und Zielumgebung, ohne dass das bestehende Content-Management-System angepasst werden muss. Wägt sorgfältig ab, ob ein reines Headless-Setup zu euren Methoden und Anforderungen passt oder ein hybrider Ansatz möglicherweise besser geeignet ist.

Wenn ihr eine sofort einsatzfähige Content-Management-Lösung haben möchtet, die sowohl Headless- als auch Headful- und Hybrid-Setups auf derselben Plattform unterstützt, bietet sich Adobe Experience Manager an. Mit den integrierten DAM-Funktionen könnt ihr auch alle eure Grafiken zentral hosten und anschließend entweder direkt oder über vorkonfigurierte Integrationen mit anderen Services wie Adobe Dynamic Media bereitstellen.

Wenn ihr detailliertere Informationen zur Verwendung von Experience Manager Headless erhalten möchtet, seht euch diese Headless-Tutorials an.

Testet Adobe Experience Manager als Headless-CMS noch heute und meldet euch heir für eine kostenlose Testversion an!