Kontakt

Ein WYSIWYG Editor für MJML

E-Mail Kampagnen mit aufwendigem Design, die auch in Outlook eine gute Figur machen

Swisscom Event & Media Solutions

Ob Sportveranstaltung, Generalversammlung oder Kundenevent, die Swisscom Event & Media Solutions unterstützt ihre Kunden mit der Zoon-Plattform bei der Organisation Ihrer virtuellen, physischen und hybriden Events.

Ein wichtiger Bestandteil von Zoon ist die Kommunikation mit der Zielgruppe entlang der gesamten Eventerlebniskette. Zu diesem Zweck werden E-Mail Kampagnen versendet.

 

Herausforderung

Die ursprüngliche Erstellung von E-Mail Kampagnen wurde mit Hilfe einer separaten Neos Instanz realisiert. Vorteil dieser Lösung war die sehr gute User-Experience für die Redakteur:innen und die Möglichkeit sehr einfach einen Baukasten mit Inhaltselementen bereitzustellen. Nachteil war die fehlende Integration in die Adminoberfläche von Zoon. Der Wechsel zwischen beiden Oberflächen bedeutete jedes Mal einen "Medienbruch" für die Redakteur:innen. 

Zusätzlich zu dieser Integration sollte eine neues E-Mail Template mit neuem Design umgesetzt werden. 

Die Herausforderung bestand in der korrekten Darstellung der E-Mails in vielen Mailprogrammen bei einer gleichzeitig hohen Flexibilität bei der Erstellung der Inhalte. 

Uns ist es wichtig, nachhaltige Lösungen anzubieten, die sich langfristig erweitern lassen und eine hohe Entwicklungsgeschwindigkeit erlauben.

 

Lösung

Als Kerntechnologie wurde MJML eingesetzt. MJML ist eine Auszeichnungssprache (ähnlich wie HTML), die bereits Inhaltselemente für E-Mails zur Verfügung stellt. Aus MJML lässt sich in einem weiteren Schritt das Markup für eine E-Mail erzeugen. Dieses ist für die etablierten Mailprogramme optimiert, sodass eine E-Mail korrekt dargestellt wird.

Neos wurde als Editor abgelöst und durch eine React-Komponente ersetzt, die nahtlose in die Adminoberfläche von Zoon integriert ist. Der Inhalt einer Kampagne wird nun durch Drag & Drop von z.B. Bildern und Texten erstellt. Die resultierende Inhaltsstruktur wird serverseitig zuerst in MJML und dann in HTML übersetzt. 

Bei der Umsetzung war es uns extrem wichtig, dass die Inhaltselemente im Editor mit dem tatsächlichen Funktionsumfang von MJML abgebildet werden. Dabei mussten die Inhaltselemente im Editor nicht deckungsgleich mit den durch MJML bereitgestellten Komponenten sein. Sie sollten sich aber visuell durch die Kombination von MJML Komponenten darstellen lassen.

Durch dieses Vorgehen entstand deutlich weniger Aufwand bei der Optimierung für einzelne Mailprogramme (wie z.B. Outlook) und es stand mehr Zeit für die Implementierung von Funktionen für Redakteur:innen und Empfänger:innen zur Verfügung. 

Ein Inhaltselement wurde aufgrund der besonderen Anforderungen als eigene Komponente in MJML implementiert.

Der resultierende Technologiestack erlaubt es uns, den Editor zusammen mit dem Kunden langfristig weiterzuentwickeln.

Übersicht

  • Entwicklung eines interaktiven Editors für die neue Zoon Adminoberfläche
  • Umwandlung der Inhalte des Editors in MJML
  • Erweiterung von MJML mit eigenen Komponenten
  • Bereitstellung von Schnittstellen für das Theming der E-Mails
  • Mailclient-Optimierung und Tests des resultierenden Markups

Informationen