Adventskalender in der E-Mail – Inhalte nachladen

Ausgangslage

Einen Adventskalender per E-Mail, das heisst jeden Tag eine E-Mail mit einem neuen Advents-Türchen versenden? Kommt nicht in Frage! Nach 24 Tagen wäre ein Grossteil der aufwändig gesammelten und gepflegten Empfänger wieder weg. Button und Landingpage? Macht jeder. Was nun? Packen wir doch den ganzen Adventskalender in die E-Mail. Unmöglich?

Lösung

Nur das Türchen des aktuellen Tages darf geöffnet – also angeklickt – werden. Dieses ist noch geschlossen, jedoch farblich markiert. Die Türchen der vergangenen Tage sind geöffnet, d.h. ein kleines Vorschau-Bild des Inhaltes ist sichtbar. Auch diese Türchen lassen sich anklicken und der Inhalt ist noch abrufbar.

AMEX_Adventskalender_tag-24

Durch Klick auf ein Türchen wird innerhalb der E-Mail ein Overlay geöffnet, welches das Angebot des aktuellen Tages enthält. Sowohl die Bilder der Fenster (Zahlen und Vorschau-Bilder) wie auch der Inhalt des Overlays werden tagesaktuell ausgeliefert. Somit verändert sich die E-Mail im Posteingang des Kunden täglich, ohne dass sie neu versendet werden muss.

Swiss-Bild

Auszug aus dem Türchen vom 15. Dezember

Erreicht wird dies durch serverseitige Logik für die Auslieferung der Bilder am jeweiligen Tag. Für alle vergangenen Tage werden die Vorschau-Bilder ausgeliefert, für den aktuellen und die zukünftigen Tage „nur“ die Zahl. Die Tages-Inhalte für das Overlay werden über dynamisches CSS ausgeliefert. Im Quellcode der E-Mail selbst ist nur die Struktur des Overlays enthalten, Texte (in vier Sprachen) sowie Bilder sind für jeden Tag in der CSS hinterlegt. Beim Öffnen des Fensters werden diese aufgrund des aktuellen Tages und der Sprache der E-Mail in die Struktur eingefügt.

An einigen Tagen ist ein Gewinnspiel enthalten. Die Teilnahme ist direkt aus der E-Mail heraus über ein bereits vorausgefülltes Formular möglich. Wie dieses in eine E-Mail integriert werden kann, haben wir in der dritten Adventsüberraschung vorgestellt.

Auf der Webseite von American Express Selects ist der Adventskalender ebenfalls integriert. Dabei werden Kalender-Raster und gesamte Logik aus einer nicht personalisierten Ansicht der E-Mail dynamisch in die Seite eingefügt.

Technologie und Innovation

Der Adventskalender wurde als HTML und CSS umgesetzt, als backend für die dynamische Auslieferung von Bildern und CSS kam MayorisFLEX zum Einsatz.

Die gesamte Logik und die Inhalte aller 24 Tage wurden in das Mail gepackt. Durch den sparsamen Versand, das tägliche Nachladen der Inhalte zum Zeitpunkt der Öffnung und den Verzicht auf eine Landingpage wurde der Adventskalender sehr effizient umgesetzt.

Allerdings unterstützen nicht alle E-Mail Clients die interaktiven Elemente in der E-Mail. In diesem Fall wird die Online-Ansicht der E-Mail als Fallback verwendet. Im Internet-Browser werden alle benötigten Funktionen unterstützt, da ausschliesslich HTML5 und CSS3 verwendet wird (jedoch kein JavaScript). Der Fallback ist so aufgebaut, dass die interaktive Funktion in der Online-Ansicht bereits aktiviert ist. Dadurch ist sichergestellt, dass der Ablauf für den Nutzer auf keinen Fall schlechter ist als beim herkömmlichen „Button-to-Landingpage“ Ansatz. Da in der Online-Ansicht der E-Mail aber sämtliche Personalisierungsfunktionen der E-Mail Marketing Applikation eingesetzt werden können, stehen weit mehr Möglichkeiten offen als auf einer Landingpage, wo die Personalisierungsdaten über eine API abgerufen und manuell integriert werden müssen.