Headless CMS

Die Ansprüche der Kunden an die digitalen Touchpoints von Unternehmen sind hoch und steigen stetig. Neben einheitlichen Informationen an der Website, Apps oder Online-Shops erwarten die Kunden zunehmend auch personalisierte Inhalte an den unterschiedlichen Touchpoints.

Das stellt wiederum enorme Anforderungen an den Aufbau und den Einsatz von Content Management Systemen, kurz CMS. Dabei spielt die CMS-Architektur eine entscheidende Rolle. Besonders die Gestaltung als Headless CMS bietet dabei enorme Möglichkeiten, den neuen und auch zukünftigen Anforderungen gerecht zu werden.

Worum es sich dabei handelt und wie ein Headless CMS dabei helfen kann, die Contentpflege zu vereinfachen, Kosten zu sparen und Kunden personalisierte Inhalte anzubieten, erklärt dieser Artikel.

Das klassische CMS

Früher war vieles einfacher. Das gilt auch für die digitalen Auftritte von Unternehmen. Unternehmen hatten eine Website, auf des sie ihre Inhalte veröffentlichten. Um Content-Kreatoren dabei die Arbeit zu erleichtern, speicherte man die Inhalte in einem Content Management System.

Das CMS wird dabei mit allen Inhalten, von Texten bis Bildern, gefüttert und stellt diese als Website im Browser für die Nutzer:innen dar. Das System verwaltet sowohl die Inhalte als auch ihre Darstellung. Das Design der Website wird fest im CMS umgesetzt, beispielsweise durch spezifische Templates.  

Der Content ist fest mit seiner Auslieferung verbunden. Sollen auch Inhalte aus anderen Systemen, wie z.B. Produktdaten aus dem Product-Information-Management-System auf der Website angezeigt werden, muss dieses System in das CMS integriert werden.

Die Anforderungen an ein CMS im Jahr 2022

Mittlerweile haben sich die Anforderungen an den digitalen Auftritt von Unternehmen und somit auch an ihre Content Management Systeme verändert.

Anbindung externer Systeme

Beispielsweise werden heute an den digitalen Touchpoints Informationen aus zahlreichen Systemen dargestellt – redaktionelle Inhalte wie Blogposts oder Unternehmensbeschreibungen, aber auch Produktdaten und -bilder. Darüber hinaus greifen viele Prozesse des digitalen Handels auf die Daten externer Systeme zurück, wie Digital-Asset-Management-Systeme oder Customer-Relationship-Management-Systeme.

Im Zuge der automatisierten Ausspielung personalisierter Inhalte auf den Touchpoints gewinnt die Nutzung externer Datenbestände und Inhaltssammlungen zusätzlich an Bedeutung. Für die Architektur der digitalen Touchpoints bedeutet das, dass externe 3rd-Party-Systeme möglichst einfach in das CMS eingebunden werden müssen – und zwar aus zwei Gründen.

Zum einen möchte man die Daten und Prozesse externer Systeme für Kaufprozesse oder Personalisierung nutzen. Zum anderen möchte man sich bei der Darstellung von Inhalten keine Gedanken über redundante Content-Haltung und -Pflege machen. Redaktionelle Inhalte sollen im CMS, Produktdaten ausschließlich im PIM-System gepflegt werden.

Einheitliche Inhalte an allen Touchpoints

Darüber hinaus müssen Unternehmen heutzutage zahlreiche digitale Touchpoints bedienen. Neben der Website gehören dazu Mobile Apps, Online-Shops und auch soziale Medien. Kunden erwarten an all diesen Touchpoints aufbereitete Inhalte für den passenden Kanal.

Redundante Datenhaltung

Auch hier spielt wieder die redundante Haltung von Content eine Rolle – denn das gleiche Kampagnen-Bild kann beispielsweise in einem Blogpost, auf einer Landing Page und auf einer Produktseite erscheinen.

Da bei der klassischen CMS-Architektur die Auslieferung von Inhalten aus dem CMS an diese anderen Touchpoints meist nicht über eine Schnittstelle möglich ist, ist eine redundante Datenhaltung die Folge. Hier werden beispielsweise Bilder, die sowohl auf der Website als auch in einer Mobile App oder einem Online-Shop verwendet in den jeweiligen Systemen abgelegt. Mit der doppelten Datenhaltung erhöht sich natürlich die Gefahr von Fehlern.

CMS als Content Provider

Um hier nicht in unterschiedlichen Systemen dieselben Inhalte speichern zu müssen, kann man die Haltung der Inhalte von ihrer Darstellung an den einzelnen Touchpoints trennen. Das bedeutet, das CMS dient lediglich als Content Provider, der den Touchpoints die Inhalte anbietet. Anders als zuvor wird Content nicht mehr ausschließlich durch das CMS dargestellt, sondern durch die jeweiligen Touchpoints selbst.

Notwendig ist dafür jedoch eine neue Website-Architektur: das sogenannte Headless CMS. Im Zusammenspiel mit einem sog. Static Site Generator löst es die oben genannten Probleme. Doch wie funktioniert das genau?

Die Architektur eines Headless CMS

Um die oben genannten Probleme zu beheben, trennt man beim Headless CMS die Haltung des Contents von seiner Darstellung in zwei unabhängige Instanzen.

Das CMS dient ausschließlich als Content-Repository. Die Darstellung wird durch eine unabhängige Instanz, den sogenannten Static Site Generator, übernommen, die den Content über eine Schnittstelle aus dem CMS erhält.

Weitere externe Systeme, wie PIM- oder CRM-Systeme, können sowohl in das CMS als auch in die Darstellungsschicht eingebunden werden. In beiden Fällen befinden sich die spezifischen Inhalte, wie beispielsweise Werbetexte im CMS und Produktbeschreibungen im PIM-System, nur an jeweils einer Stelle. Von dort werden sie über Schnittstellen an die jeweiligen Touchpoints verteilt, wo sie vom Static Site Generator für den jeweils spezifischen Nutzungszweck zusammengestellt werden.

Vorteile eines Headless CMS

Ein Headless CMS hat zahlreiche Vorteile sowohl für Unternehmen als auch ihre Nutzer:innen.

Ein System – Single Point of Truth

Dadurch, dass die Inhalte jeweils nur einmal im jeweiligen System hinterlegt werden, gibt es für alle Inhalte – egal ob Website, App, Kundenportal oder Online-Shop – nun einen Single Point of Truth. Am jeweiligen Touchpoint werden dann zum Beispiel Produktdaten aus dem PIM-System einfach durch Marketing-Daten (Texte, Bilder usw.) aus dem CMS angereichert – und zwar ohne, dass diese an einer Stelle gemeinsam gespeichert werden. Die Kombination erfolgt unabhängig von der Datenhaltung erst im Frontend. Das reduziert zum einen den Aufwand und damit die Kosten für die Content-Pflege und zum anderen die Gefahr, dass sich bei der doppelten Content-Haltung Fehler einschleichen.

Erhöhte Flexibilität

Ein weiterer Vorteil eines Headless CMS ist die erhöhte Flexibilität. Durch die Trennung von Content-Haltung und -Darstellung in zwei unabhängige Schichten, sind auch Änderungen der Frontendgestaltung unabhängig vom CMS. So lassen sich neue Frontend-Technologien, Frameworks oder Templates nutzen, ohne dass die Inhalte aufwendig migriert werden müssten. Das erhöht die Flexibilität der Touchpoint-Gestaltung enorm.

Personalisierte Inhalte dank unterschiedlicher Systeme

Für Ausspielen personalisierter Inhalte an den Touchpoints ist ein Headless CMS sogar eine Voraussetzung. Denn um personalisierte Inhalte an den Touchpoints ausspielen zu können, muss man zum einen auf Datenbanken zugreifen, die die notwendigen Kunden- und Kontextdaten enthalten und zum anderen die unterschiedlichen Inhalte vorrätig haben, die man ausspielen möchte. Durch den Anschluss von CRM-, Händler- und PIM-Datenbanken auf der einen und Bilddatenbanken und Digital-Asset-Management-Systemen auf der anderen Seite lassen sich Personalisierungsprozesse automatisieren. Durch die Trennung von Inhalten und ihrer Darstellung können personalisierte Inhalte durch Datenlayer und Datenprozesse getriggert werden. Das verbessert die Customer Experience.

Zu guter Letzt hält man sich mit einem Headless CMS viele Möglichkeiten offen, weitere externe Systeme und Informationsquellen einfach zu integrieren und zu nutzen. Ein Headless CMS ist somit auch eine lohnende Investition in die Zukunft.

Beispiele unserer Headless-CMS-Projekte

SATA Corporate Platform

SATA ist der weltweite Qualitätsführer, wenn es um Lackierpistolen und Zubehör geht.

Vor dem Website Relaunch mussten sämtliche Daten und Inhalte sowohl im CMS als auch im PIM-System gepflegt werden. Diese manuellen Prozesse führten zu einem hohen Aktualisierungsaufwand und einer hohen Fehleranfälligkeit, was beispielsweise abweichende Produktbeschreibungen an unterschiedlichen digitalen Touchpoints zur Folge hatte.

Um diese Probleme zu beheben, entwickelten wir für die neue SATA-Plattform eine Headless-Architektur. Als Content Repository dient das performante Headless-CMS „Cockpit“. Dort wird der redaktionelle Content gepflegt und als statisches HTML über den Static Site Generator „Gatsby“ generiert.

Die Produktdaten und -assets, die auf Produktseiten und im Online-Shop verwendet werden sowie ihre Beziehungen zu anderen Produkten, wie bspw. Zubehör, Ersatzteile und Lacke, werden zentral im PIM-System gepflegt und durch Gatsby in die statischen Seiten integriert. Das PIM fungiert somit im Hinblick auf alle Produktdaten als Single Source of Truth für alle bestehenden und zukünftig angedachten digitalen Touchpoints.

Zusätzlich entwickelten und integrierten wir einen zentralen Service zur Verwaltung von Lackdaten. Die Datenhaltung ist mittels des Headless-CMS „Directus“ realisiert. In Abhängigkeit zur ausgewählten Lackierpistole  werden die Daten durch Gatsby in die statischen Seiten integriert.

Durch die Entkopplung von CMS, PIM und Website-Frontend können die zentral hinterlegten Inhalte für weitere Applikationen wie z.B. Shop oder Apps effizient und konsistent verwendet werden. Durch Auslieferung von statischen Webseiten wird eine ausgezeichnete Performance für den Nutzer gewährleistet.

So entspricht die neue SATA-Website allen Anforderungen an eine moderne, performante Corporate Platform und hat dabei auch die zukünftige Entwicklung des digitalen SATA-Ökosystems fest im Blick.

Projekt: https://www.mediaman.com/projekte/sata-corporate-platform

Website: https://www.sata.com/de-dat/

Mewa-Corporate-Website

Die Mewa AG ist der führende Dienstleister für Textil-Management in Europa.

Um die Website des Marktführers zukunftsfähig zu machen, entwickelten wir die Architektur in Form eines Headless CMS.

Der klassische Website-Content wird im CMS Strapi hinterlegt, während für die Darstellung der Produktdaten auf das PIM-System zurückgegriffen wird. Dafür wurde das PIM-System direkt an das CMS angebunden. Dadurch wird doppelte Haltung von Produktbeschreibungen vermieden und die Fehleranfälligkeit reduziert.

Der Static Site Generator Gatsby erstellt aus dem im CMS und PIM-System hinterlegten Content die finale Website – und zwar in je einer der 14 verfügbaren Länderversionen.

Gehostet wird die Website in der AWS-Infrastruktur von Mewa. Externe CRM-Systeme sind zudem über Microservices angebunden, die in AWS Lambda realisiert wurden.

Projekt: https://www.mediaman.com/projekte/mewa-website

Website: https://www.mewa.de/

Fazit: Wann ein Headless CMS sinnvoll ist

Ein Headless CMS bietet viele Vorteile für die effiziente und zukunftsfähige Gestaltung komplexer, digitaler Touchpoint-Landschaften.

Besonderen Wert hat die Headless-Architektur, wenn mehrere externe Systeme, wie z.B. ein PIM- oder CRM-System, an das CMS angebunden werden sollen.

Auch wenn automatisierte Prozesse an den digitalen Touchpoints ablaufen sollen, wie beispielsweise die Personalisierung der ausgespielten Inhalte, ist ein Headless CMS die richtige Lösung. Gerade in diesem Fall ist es ratsam, mit einem Content Repository zu arbeiten, um maximale Flexibilität an allen Touchpoints zu erreichen.

Des Weiteren bietet sich eine Headless-Architektur an, wenn die Darstellung der Inhalte systemunabhängig ist und je nach Touchpoint stark variiert. Dann ermöglicht die Trennung von Content-Haltung und -Darstellung, die Inhalte je nach Touchpoint oder sogar Touchpoint-Bereich modular auszuspielen, ohne sie an mehreren Stellen hinterlegen zu müssen.

Allerdings ist die Architektur von Headless Content Management Systemen technisch komplexer als die von klassischen CMS-Architekturen. Unternehmen, die ihre Touchpoint-Landschaft effizienter gestalten und für die Zukunft rüsten wollen, sollten sich von einem Dienstleister beraten und unterstützen lassen, der umfangreiche Erfahrung in der Entwicklung von Headless-CMS-Systemen vorweisen kann.