Entwickler
Sie wissen bereits, dass wir an einer Reihe von Tutorials arbeiten, die Ihnen zeigen, wie Entwickler Schritt für Schritt Transaktions-E-Mails erstellen, indem Sie MJML, unser Open-Source-E-Mail-Framework und die Vorlagensprache von Mailjet verwenden.
Jedes Tutorial behandelt einen sehr gebräuchlichen Anwendungsfall und bietet eine große Auswahl an Beispielen, Codeausschnitten und schönen Grafiken. In diesem Artikel zeigen wir, wie Sie als Entwickler eine effiziente Begrüßungs-E-Mail erstellen.
Flexibilität und Personalisierung sind in der E-Mail Branche ein Muss. Transaktionale E-Mails implizieren eine immer komplexere Geschäftslogik, und man kann oft Schwierigkeiten haben, mit vielen verschiedenen Vorlagen zu jonglieren, wenn sie nur eine personalisierte E-Mail haben könnten, die sich an mehrere Anwendungsfälle anpasst.
Eine separate E-Mail Vorlage für Männer und eine weitere für Frauen zu haben, oder spezifische Kampagnen zu erstellen, um verschiedene Dinge auf der Grundlage der früheren Einkäufe Ihres Kunden zu empfehlen, ist nicht sinnvoll.
In solchen Situationen ist eine Templating-Sprache nützlich.
Selbst wenn Sie möglicherweise selbst schreiben könnten, um einen Tokenizer und eine Grammatik implementieren zu können, müssten Sie über gute Kenntnisse in diesem Bereich verfügen und das Rad neu erfinden, wenn Sie sich stattdessen auf Ihr Kerngeschäft hätten konzentrieren können…..
Sie könnten stattdessen nette Bibliotheken wie Lenker, Jinja oder Twig verwenden, aber dann müssen Sie immer noch einen speziellen Dienst schreiben oder hosten, um die Template-Verarbeitung zu erledigen.
Bei Mailjet kennen wir den Wert einer vollständig integrierten Vorlagensprache, weshalb wir unsere eigene Vorlagensprache mit Blick auf unsere Transactional Send API entwickelt haben. Unsere Idee: eine E-Mail Vorlage, um sie alle zu regeln, nur mit einem einzigen API-Aufruf.
Also, lassen Sie uns zusammenfassen: MJML zur mühelosen Erstellung reaktionsschneller HTML-E-Mails sowie eine Templatingsprache, um diese mit bedingten Blöcken und Variablen zum Leben zu erwecken.
Diese Kombination kann dein Leben als Entwickler verändern. Aber genug der Worte, du wirst definitiv etwas Action wollen. Deshalb haben wir uns entschieden, Ihnen zu zeigen, wie Sie Schritt für Schritt tolle Transaktions-E-Mails erstellen und versenden können.
Lassen wir nun die Theorie hinter uns und wenden wir das eben Gelernte in der Praxis an. Im Folgenden erstellen wir eine beispielhafte Willkommens-E-Mail für einen Onlineshop mit MJML. In diesem Tutorial zeigen wir Ihnen, wie Sie eine individuelle Begrüßungs-E-Mail erstellen. Die wichtigsten Punkte:
Sofern Ihnen das Thema E-Mail Vorlagen erstellen mit MJML noch komplett neu ist, lesen Sie unseren Einsteigerleitfaden.
Der Männermoden-Shop bspshop-maennermode.com, den wir schon aus dem letzten Tutorial kennen, möchte eine E-Mail Vorlage für eine Willkommens-Mail. Die Anforderungen sind Folgende:
Hierzu steht uns wieder eine JSON-Datei mit Demodaten zur Verfügung. Das finale Design sieht folgendermaßen aus:
Beginnen wir mit der Kopfzeile. Diese setzt sich aus dem Firmenlogo und einem Menü zusammen, welches direkt zu den einzelnen Kategorien des Onlineshops verlinkt.
Der Hauptcontainer ist in diesem Fall keine
Die hier eingesetzte
Dies ist viel übersichtlicher als die klassische HTML-Programmierung mit Tabellen und Linktags. Die MJML Link-Element können Sie natürlich mit CSS-Attributen anpassen.
Die Kunden sollen sich beim Öffnen der Mail persönlich angesprochen fühlen. In unserem Beispiel binden wir ein ansprechendes Bild abhängig vom Geschlecht des Kunden in Verbindung mit einer namentlichen Begrüßung ein.
Unsere Template Sprache ermöglicht es Ihnen, eigene Variablen zu definieren und einzusetzen.
In diesem Fall benötigen Sie Name und Geschlecht des Kunden, diese sind user.name sowie user.gender und lauten in unserem Beispielfall “Matthew” und “männlich”.
Nun richten wir eine neue Variable background-url ein, welche das entsprechende Bild ausgibt. Als Standardoption setzen wir diese auf hero-girl.png. Sobald die die user.gender Variable jedoch “männlich” ausgibt, wird dieser Wert auf hero.png geändert.
Im untenstehenden Code benutzen wir die eben definierte background-url Variable. Wenn unsere Vorlage gerendert wurde, wird sie basierend auf den JSON-Daten das korrekte Bild ausgeben.
Hierzu verwenden wir das neue interaktive Element
In der JSON-Datei mit den Beispieldaten befindet sich eine Liste mit diesen Kategorien, welche speziell für Matthew generiert wurden:
„categories“: { „top_left“: { „title“: „Shoes“, „link“: „/shoes“, „image_URL“: „https://bit.ly/mj-tpl-tuto-shoes“ }, „top_right“: { „title“: „Jumper“, „link“: „/t-shirt“, „image_URL“: „https://bit.ly/mj-tpl-lang-tuto-tshirt“ }, „bottom_left“: { „title“: „Shirt“, „link“: „/shirt“, „image_URL“: „https://bit.ly/mj-tpl-lang-tuto-shirt“ }, „bottom_right“: { „title“: „Accessories“, „link“: „/accessories“, „image_URL“: „https://bit.ly/mj-tpl-lang-tuto-accessories“ } }
Erstellen Sie nun mit dem
Unser Beispiel-Onlineshop ist in den sozialen Netzwerken aktiv und möchte mit seinen Kunden interagieren.
Die Einbindung von Social Media Links ist heute Standard in transaktionalen Mails und Newsletters. Hierfür gibt es den
Mit diesem wählen Sie voreingestellte soziale Netzwerke aus oder definieren bei Bedarf eigene. In diesem Beispiel möchten wir individuelle braune Icons für jedes Netzwerk. Dafür erstellen wir mit Hilfe von my-social_network_name.* Attributen die passende Konfiguration.
Die vorgestellten Variablen und Funktionen können Sie nun nutzen, um eigene Vorlagen für Willkommens-Mails zu erstellen. Lassen Sie Ihrer Kreativität freien Lauf. Loggen Sie sich jetzt ein oder erstellen Sie ein Konto und probieren Sie es aus!