6 Beispiele für interaktive Inhalte in E-Mails

Interaktive E-Mails sind der Designtrend Nummer 1  im E-Mail-Marketing für 2019.

Nun, da Google AMP 4 E-Mails weit verbreitet sind, haben wir alle fast vergessen, dass dies nicht der einzige Weg ist, interaktive E-Mails zu erstellen.

In diesem Leitfaden zeigen wir Ihnen, wie Sie mit Stripo die beliebtesten interaktiven Elemente in E-Mails einbetten können.

Arten und Verwendung von Interaktivität in E-Mails

Die interaktiven Elemente, die wir hier vorstellen, eignen sich hervorragend für alle E-Mail-Clients - wenn die Interaktivität nicht von einem E-Mail-Client unterstützt wird, wird sie durch einen völlig websicheren Fallback ersetzt.

• CSS-animierte Schaltfläche für Werbe-E-Mails;
• Umfrageformulare für ereignisgesteuerte E-Mails und Fragebögen;
• Bildkarussell, um einige Produkte auf einem Bildschirm in Werbe-E-Mails anzuzeigen;
• Rollover-Effekt, um Produkte aus verschiedenen Blickwinkeln und deren Funktionen in Werbe-E-Mails darzustellen;
• Akkordeon für alle Arten von Kampagnen, um interaktive E-Mail-Newsletter kompakter zu gestalten;
• Videos, um unser neues Produkt besser zu präsentieren, um Kunden an Feiertagen zu gratulieren und Neulingen zu erklären, wie man unser Tool benutzt.

Nicht erwähnt wurden Countdown-Timer, Personalisierung und andere Elemente, die unseren Abonnenten helfen, die neuesten Nachrichten von Instagram und integrierte Grafiken zu erhalten, da sie Kontextelemente in E-Mails sind. Der Inhalt ist dynamisch, aber die Änderungen werden automatisch vorgenommen - keine Interaktion erforderlich.

Wir zeigen, wie man eine interaktive E-Mail erstellt und testen dann jede Einzelne von ihnen.

Wichtig zu beachten:

Es ist allgemeinhin bekannt, dass Email on Acid und Litmus die besten Tools zum Testen von E-Mails sind. Aber sie werden uns jetzt nicht helfen, da sie nur Screenshots zur Verfügung stellen. Es ist jedoch immer noch sinnvoll, sie zu verwenden, da sie zeigen, ob die Blöcke entfernt wurden oder nicht.

Die einzige Lösung, um zu sehen, ob ein, sagen wir, Slider funktioniert oder die Empfänger nur ein statisches Bild sehen, ist, Ihre interaktive E-Mail zu testen, indem Sie sie an alle E-Mail-Clients senden, bei denen Sie und Ihre Freunde/Kollegen Konten haben, an alle möglichen Desktops und Mobilgeräte. Je mehr, desto besser.

Hier ist die Liste der am häufigsten verwendeten E-Mail-Clients im März 2019, laut Litmus.

Hinweis: Sie sollten auch die Kombination von Geräten und E-Mail-Clients berücksichtigen.

1. CSS-animierter Button

CSS-animierte Buttons. Wir alle verwenden CTA-Buttons in E-Mails, warum nicht einen animieren, wenn die Empfänger mit der Maus drüberfahren oder draufklicken? Es weckt ihre Aufmerksamkeit, fügt einen Hauch von Gamification hinzu und hilft Ihnen, Ihr Markendesign einzuhalten, wenn die Buttons auf Ihrer Website CSS-animiert sind.

Bisher mussten unsere Benutzer ein Element des CSS-Codes über den HTML-Code-Editor hinzufügen, um Schaltflächen zu animieren. Das war nicht einfach.

Am 15. April haben wir ein neues Feature veröffentlicht - die interaktive Schaltfläche, die ihre Farben ändert, sobald Sie mit dem Mauszeiger drüberfahren.

So geht es:

• Ziehen Sie einen grundlegenden Buttonblock in die HTML-E-Mail-Vorlage mit der Sie arbeiten

• Tippen Sie auf den Buttonblock in Ihrer Vorlage, um die Seitenleiste zu aktivieren;
• Legen Sie den Textstil fest, z.B. Schrift, Schriftart und -größe;
• Button-Farbe einstellen, Schriftfarbe;

In diesem Screenshot steht die „Button-Farbe“ für die Grundfarbe, die hervorgehobene Button-Farbe für die Farbe, die Ihre Benutzer sehen, wenn Sie mit der Maus drüberfahren, und die Textfarbe für die Schriftfarbe. Wenn Sie den Hover-Effekt in Ihren E-Mails nicht wünschen, geben Sie einfach dem hervorgehobenen Button die gleiche Farbe, die Sie als primäre Farbe eingestellt haben;

• Fertig.

2. Befragungsformulare und Fragebögen

In unserem Blog haben wir bereits erwähnt, dass dem Kauf durch einen Kunden eine Umfrageeinladung folgen sollte.

Arten der Umfrageeinladung:

a) Eine Umfrage mit einer einzigen Frage - nicht interaktiv, aber völlig websicher

Trotz der Tatsache, dass es sich nicht um ein interaktives E-Mail-Design handelt, habe ich es hier eingefügt, da es immer noch einige Aktionen von Empfängern erfordert.

Für eine Umfrage mit nur einer Frage in Newslettern ist die beste Lösung, das Quiz direkt in den Text der E-Mail zu integrieren.

So geht es:

• Das Unternehmen hat 5 Bilder horizontal eingefügt;
• 5 individuelle Links zu jedem Bild hinzugefügt.

Die Kunden klickten auf das Bild, das Ihrer Meinung entsprach.

Ein gutes ESP muss Ihnen einen detaillierten Bericht darüber liefern, wie oft jedes Bild angeklickt wurde.

So geht es:

• Das Unternehmen hat 4 Bilder vertikal eingefügt;
• 4 URL-Links zu jedem Bild hinzugefügt.

Wieder einmal klickten die Kunden auf das Bild, das ihrer Meinung entsprach.

b) eine Umfrage mit mehreren Fragen - eingebettet in eine interaktive E-Mail-Vorlage

Wenn Sie eine Reihe von Fragen stellen müssen, sollten Sie ein Quiz-Formular erstellen und in Ihren interaktiven E-Mail-Newsletter einbetten, damit Ihre Kunden keine überflüssigen Aktionen durchführen müssen - sie können direkt in E-Mails abstimmen.

So geht es:

• Sie müssen ein Quiz-Formular erstellen
  Ich bevorzuge Google-Formulare;
• Senden Sie sie an Ihre E-Mail-Adresse

Wenn Sie das Google-Formular zu sich senden, stellen Sie sicher, dass Sie „per E-Mail senden“ wählen, dann geben Sie Ihre E-Mail-Adresse ein, ändern Sie den Betreff und die Nachricht bei Bedarf, da alle Empfänger sie sehen werden und kreuzen Sie „Formular in E-Mail einschließen“ an;

• Kopieren Sie den Einbettungscode

Öffnen Sie das Formular in Ihrem Posteingang, klicken Sie mit der rechten Maustaste auf das Formular und wählen Sie „inspizieren“. Suchen Sie nach der Tabelle align=“center“ cellpadding line. Sobald sie markiert ist, drücken Sie „STRG+C“ (nicht rechts klicken und dann kopieren);

• Fügen Sie einen neuen HTML-Block zu Ihrer interaktiven Newsletter-Vorlage hinzu;
• Fügen Sie den Einbettungscode in den Code-Editor ein;
• Sie werden „Ihren HTML-Code in den Editor einfügen“ sehen, klicken Sie darauf und der Code-Editor wird geöffnet. Anstelle von „Einfügen“, geben Sie zwischen den Tags <p> und </p> Ihren Einbettungscode ein;
• Fertig.

Bitte beachten Sie das GIF, um den gesamten Prozess der „Einbettung einer Umfrage“ zu sehen.

Hinweis: Die in unseren interaktiven Newsletter-Vorlagen integrierten Umfrageformulare werden auf allen Arten von Geräten korrekt angezeigt. Aber: Die Kontrollkästchen sind nur auf Desktops anklickbar, während sie auf mobilen Geräten nicht anklickbar sind.

Wenn Sie Umfrage-E-Mails auf mobilen Geräten und Tablets öffnen, haben Ihre Benutzer daher den Link zum Google-Formular selbst (erinnern Sie sich an den Betreff des von Ihnen angegebenen Formulars? Das ist der Name des Links. - Er wird automatisch hinzugefügt. Die Empfänger können ohne Angst auf den Link klicken, um ihre Antworten zu übermitteln).

In meinem Fall ist der Betreff „Weihnachtsverkauf“.

E-Mail-Clients, die den Test erfolgreich bestanden haben:

• Alle :)

Diese Art der Einbettung von Umfrageformularen ist völlig websicher.

Hinweis: Stripo.e-Mail ist derzeit der einzige E-Mail-Vorlagengenerator, der es ermöglicht, Google-Formulare auf diese Weise einzubetten.

Einige E-Mail-Vorlagengeneratoren erlauben es Ihnen nicht, mit offenem HTML-Code zu arbeiten, andere erlauben es Ihnen, dies zu tun, aber der Einbettungscode ändert sich in ihrem Editor und die Umfrageformulare sehen auf Desktop-Geräten sogar beschädigt aus.

Die Art und Weise wie manche ESPs eingebettete Google-Formulare übertragen:

1. eSputnik — Kontrollkästchen sind auf den Desktop-Geräten anklickbar, auf Handys haben die Empfänger den Link;
2. MailChimp — zeigt die Kontrollkästchen überhaupt nicht an;
3. Campaign Monitor bietet einen eigenen Basis-Block „Umfrage“.

Die Alternative

Wenn aus irgendeinem Grund das Umfrageformular, das in einen interaktiven E-Mail-Newsletter eingebettet ist, in Ihrem ESP nicht funktioniert oder Ihr E-Mail-Generator das Einfügen von Google-Formularen nicht erlaubt, dann können Sie diese Methode ausprobieren:

Fügen Sie eine CTA-Taste mit dem Link ein, der Ihre Kunden auf die Zielseite Ihrer Website führt, wo Sie zuvor ein Umfrageformular platziert haben.

So geht es:

• Erstellen Sie eine Quiz-Seite oder betten Sie ein Google-Formular in Ihre Website ein;
• Fügen Sie einen CTA-Button in Ihre E-Mail ein;
• Integrieren Sie den Link in den Button.

Hinweis: Sie können nur dann testen, ob die Links korrekt funktionieren, wenn Sie eine Test-E-Mail an sich selbst senden. Links funktionieren in Vorlagengeneratoren nie.

3. Rollover-Effekt in E-Mails

Durch die Verwendung des Rollover-Effekts können Sie den Empfängern eine Nahaufnahme einiger Produkte bieten, sie aus verschiedenen Blickwinkeln präsentieren, Details des Produkts hinter dem Ausschnitt verstecken und einige Spiele mit den Empfängern spielen, wenn es Sinn macht.

Stripo.e-Mail bietet einen völlig websicheren Rollover-Effekt, der in den meisten E-Mail-Clients korrekt angezeigt wird, und unser einzigartiger Code wird von allen ESPs unterstützt, einschließlich MailChimp.

Wichtig zu beachten:

Der Rollover-Effekt ist nur für Desktop-Geräte gedacht. Auf mobilen Geräten sehen die Empfänger nur das erste Bild.

So geht es:

• Fügen Sie Ihrer Vorlage ein Bild hinzu;
• Aktivieren Sie in der Seitenleiste die Umschalttaste „Rollover-Effekt“;

• Fügen Sie das zweite Bild hinzu;
• Fertig!

E-Mail-Clients, die den Test erfolgreich bestanden haben:

• Yahoo! Mail;
• AOL;
• Thunderbird;
• Mail.ru;
• Gmail;
• Apple Mail;
• Outlook 2003;
• Outlook Web;
• Outlook für Mac.
• In diesem Blogbeitrag finden Sie neue Ideen, Empfehlungen und Anforderungen an die Bilder.

4. Bildkarussell in E-Mails

Das Bildkarussell ist eine sehr interessante Möglichkeit, um einige Produktfotos auf einem Bildschirm anzuzeigen.

Sie möchten die Artikel mit Preisen und Beschreibungen bewerben? Bereiten Sie sie dann vorher mit einem beliebigen Bildbearbeitungsprogramm vor (Stripo bietet sein eigenes Integriertes) - platzieren Sie diese Informationen direkt auf den Bildern. So sind alle Ihre Produktausschnitte im Karussell/Slider/Rollover informativ und einzigartig. Auf diese Weise können Sie definitiv inaktive Benutzer ansprechen und sie zumindest davon überzeugen, auf die Schaltflächen zu klicken, wenn nicht sogar, sie in Kunden zu verwandeln.

So geht es:

• Bauen Sie ein Karussell mit einem geeigneten Werkzeug. Ich habe Freshinbox benutzt;
• Kopieren Sie den Einbettungscode;
• Ziehen Sie in Stripo die HTML-Basiskonstruktion per Drag & Drop in Ihre E-Mail-Vorlage;
• Doppelklicken Sie darauf, um die Seitenleiste zu aktivieren;
• Fügen Sie den Einbettungscode ein.
• Wenn Sie sich also für die Erstellung einer interaktiven E-Mail mit Bildkarussell entscheiden, benötigen Sie ein Fremdanbieter-Tool, um diese interaktiven Inhalte zu erstellen, oder verwenden Sie unsere vorbereiteten interaktiven Newsletter-Vorlagen mit bereits vorgefertigtem Bildkarussell - Sie müssen nur die Bilder ersetzen und Ihre URLs einfügen.
• Leider unterstützen nur einige ESPs diese Art der Interaktivität in E-Mails: So unterstützt MailChimp beispielsweise keine Interaktivität in E-Mails.

E-Mail-Clients, die den Test erfolgreich bestanden haben:

• Apple Mail;
• Apple iPhone;
• Apple iPad;
• Yahoo! Mail.

Andere Benutzer sehen das Bild, das Sie als Erstes festgelegt haben.

5. Akkordeon

Diese Art der Interaktivität in E-Mails wird gerade bei Marketingprofis immer beliebter. Warum lieben wir es schon jetzt? Weil es dazu gedacht ist, lange Texte hinter Aufzählungszeichen zu verstecken, d.h. wertvollen Platz in Ihren E-Mails auf dem Handy zu sparen. Sie können solche interaktiven E-Mail-Beispiele kaum finden, da nur wenige Unternehmen den Mut haben, Akkordeons in E-Mails zu verwenden (lesen Sie nach, ihr E-Mail-Editor ist technisch in der Lage dazu).

Ich habe den Einbettungscode, der gut in unseren Editor passen würde, online nicht gefunden, aber diese Stripo E-Mail-Vorlage hat bereits ein Akkordeon integriert. Alles, was Sie tun müssen, ist, die Links zu ersetzen, die Namen der Registerkarten zu ändern und an der Gestaltung der interaktiven E-Mail zu arbeiten.

So geht es:

• Öffnen Sie diese interaktive E-Mail-Vorlage im Editor;
• Doppelklicken Sie auf ein beliebiges Element im Akkordeon, das Sie bearbeiten möchten;
• Sie können alle Änderungen an Text, Schriftart, Schriftgröße usw. entweder in der Seitenleiste oder im Code vornehmen, wie unten gezeigt:

Für detailliertere Informationen zu beiden Alternativen lesen Sie bitte den Blogbeitrag.

6. In E-Mails eingebettete Videos

Videos in E-Mails können die CTR um bis zu 85% erhöhen. Und 65 % der Empfänger kaufen eher bei Ihnen, wenn sie einmal die Möglichkeit haben, ein Video über die Produkte zu sehen, die Sie in E-Mails bewerben.

Es gibt vier Möglichkeiten, Videos in E-Mails hinzuzufügen:

• Verwendung eines Videos von YouTube/Video

Der E-Mail-Client zeigt nur die Miniaturansicht - in Stripo können Sie sie durch ein beliebiges Bild ersetzen;

• Hochladen Ihres Videos im mp4-Format

Auf diese Weise erstellen Sie eine interaktive E-Mail, so dass das Video direkt in den Posteingangsfächern der Empfänger abgespielt wird;

• Verwendung unserer Codekombination

Wenn ein E-Mail-Client Interaktivität unterstützt, dann sehen sich die Benutzer das Video im Posteingang an. Wenn die Interaktivität nicht vom E-Mail-Client unterstützt wird, gelangen die Kunden zu YouTube, um das Video zu sehen;

• Verwendung eines Fremdanbieter-Tools

Tools wie Viwomail.com oder Liveclicker liefern Ihnen den Einbettungscode.

Sie ermöglichen sogar die Einbettung von Echtzeit-Videos.

Hinweis: Um Urheberrechtsverletzungen zu vermeiden, empfehlen wir dringend, nur die Videos zu verwenden, für die Sie die Rechte zur Weitergabe haben.

Hochladen von mp4-Videos

Ich habe ein mp4-Video auf eine Website eines Drittanbieters hochgeladen und diesen Link dann in den HTML-Block eingefügt. Das hatte ich vor zu sehen:

Unser eigenes Video im mp4-Format wurde gezeigt und sogar in Outlook 2011 und 2016 abgespielt.

Gmail- und Apple-E-Mails zeigten es nicht. Buuuh!

Nicht die beste Lösung, um Ihre Kunden zu binden.

Verwendung unserer Codekombination

Unser Programmierer half mir und schrieb die folgende Codekombination:

<video poster="https://tlr.stripocdn.E-Mail/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" controls="controls" width="100%" height="176"><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><a href="https://www.youtube.com/watch?v=8gqqANVWdjU"><img src="https://tlr.stripocdn.E-Mail/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" width="320" height="176"></a></video>

Die ersten beiden Links sind die primären Links. Und die letzten beiden, sie beginnen mit <a href>, sind die alternativen Links. Hier haben wir zwei Videos verwendet - eines auf YouTube und das andere wurde auf eine andere Seite hochgeladen, weil wir einen zusätzlichen Link benötigten - und ein primäres und ein alternatives Bild.

Wenn die primären Links nicht funktionieren, werden unsere Kunden den Fallback sehen.

Für die Reinheit des Experiments haben wir absichtlich zwei verschiedene Bilder verwendet, um zu unterscheiden, welcher Link und welches Bild funktioniert haben.

E-Mail-Clients, die den Test erfolgreich bestanden haben:

• Das iPhone 7 spielte unsere Videos ab;
• Google Mail zeigte das Vorschaubild an. Erst als ich daraufklickte, zeigte der E-Mail-Client den Link, der mich zu YouTube führte;
• Outlook 2011 hat mein Video abgespielt.

Hinweis: Wenn Sie ein Fallback-Vorschaubild hinzufügen, stellen Sie sicher, dass Sie den Play-Button darüber platzieren. Wie sollen Ihre Leser sonst wissen, dass es ein eingebettetes Video gibt und dass sie auf das Bild klicken sollen?

Alternative

• Sie können diesen Sicherheitscode alternativ verwenden;
• Ändern Sie unsere Vorlage, die diesen Code bereits enthält. Sie müssen nur die Links ersetzen: 

• Oder fügen Sie den Videoblock in Ihre Vorlage und den Link darin ein. Das System fügt automatisch den Alt-Namen, die Wiedergabetaste und das Vorschaubild hinzu. In Stripo können Sie sogar die Miniaturansicht durch eine Benutzerdefinierte ersetzen - und wir finden immer noch den Play-Button darüber. Warum empfehlen wir dies, wenn der Link zu YouTube oder Vimeo führt? Weil alle E-Mail-Clients es richtig anzeigen, absolut keine Sperren und keine Überraschungen.

Zusammenfassung

Interaktive E-Mail-Newsletter hängen von den E-Mail-Clients ab. Die meisten Kunden sehen die interaktiven Elemente noch immer als statische Bilder oder sehen sie gar nicht. 

Wir bei Stripo tun unser Bestes, um unseren treuen Nutzern dank unserer einzigartigen Layoutmethode sichere Alternativen zu interaktiven Elementen im Web zu bieten - jetzt werden interaktive E-Mails in den Posteingangsfächern ihrer Empfänger angezeigt.

Kurze Tipps und Tricks

• Interaktives E-Mail-Design sollte einfach sein, da der Fokus auf dem interaktiven Element liegt;
• Senden Sie IMMER! eine Test-E-Mail an alle Ihre E-Mail-Adressen und Geräte, da nur so überprüft werden kann, ob die interaktiven Elemente wirklich funktionieren oder nur statische Bilder sind.
• Ich wünsche Ihnen aufrichtig, dass Sie mit unseren interaktiven E-Mail-Vorlagen nur verkaufsfördernde und effektive Newsletter erstellen.
• Wenn Sie Fragen haben, können Sie diese gerne über Facebook oder E-Mail stellen.

Registrieren Sie sich bei Stripo