Interaktive E-Mails sind seit Jahren unter den TOP Designtrends im E-Mail- Marketing.
Aber jetzt, wo Google AMP 4 Emails breit diskutiert wird, haben wir alle fast vergessen, dass dies nicht die einzige Möglichkeit ist, interaktive E-Mails zu erstellen.
In dieser Anleitung zeigen wir Ihnen, wie Sie mit Stripo die beliebtesten interaktiven Elemente in E-Mails einbetten können.
Das Gute daran ist, dass Sie all diese E-Mails mit Stripo erstellen können oder einfach unsere vorgefertigten interaktiven E-Mail-Vorlagen anpassen 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;
-
In E-Mails eingebettete Videos;
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.
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.
(Quelle: E-Mail von Stipo)
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;
- Fertig.
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.
2. Sterne-Bewertung
Es ist kein Geheimnis, dass einem Kundenkauf eine Umfrageeinladungs-E-Mail folgen sollte.
Es gibt einige Arten von Umfragen. Aber die Sterne-Bewertung ist die einfachste für die Benutzer, da sie nirgendwo hingehen müssen - sie bewerten Ihre Dienstleistungen direkt in einer E-Mail.
Kunden bewerten unsere Produkte/ Tools/ Dienstleistungen. Natürlich müssen Sie und Ihr ESP die Danke-Landingpages vorbereiten. Sie können wirklich kurz sein. Das Hauptziel dieser Seiten ist es, den Kunden lediglich zu bestätigen, dass Sie ihre Antworten erhalten haben.
Sie können auch zwei „Danke“-Seiten erstellen. Eine ist für diejenigen, die Ihnen 4 bis 5 Sterne gegeben haben — hier danken Sie Benutzern nur. Und die andere ist für diejenigen, die Ihnen 1-3 Sterne gegeben haben — hier können Sie einen Link zu einem Google Formular hinzufügen, in dem Sie die Benutzer fragen, warum genau sie Ihr Tool nicht mochten, oder Sie können sich auch entschuldigen, dass sie so unzufrieden damit sind. Stellen Sie sicher, dass Sie sie kurz kontaktieren und den Grund herausfinden.
Ein gutes ESP muss Ihnen einen detaillierten Bericht darüber liefern, wie oft jedes Bild angeklickt wurde.
So geht es:
Dieser Prozess erfordert drei einfache Schritte:
Schritt 1. Einbetten des Codes
-
Ziehen Sie eine 1-spaltige Struktur in Ihre Vorlage;
-
Ziehen Sie dann einen „HTML“-Block in Ihre Struktur;
-
Klicken Sie mit der linken Maustaste auf diesen Block in der Vorlage, um ihn zu öffnen;
-
Entfernen Sie den Inhalt des Blocks und fügen Sie den folgenden Embed-Code ein
<style>
.rating {
display: inline-block;
}
.rating td {
background: #DDDDDD;
}
.rating td:hover,
.rating td:hover~td {
background: #FFE173 !important;
}
.rating td a:active,
.rating td a:focus,
.rating td a:visited {
background: #FDB140;
display: inline-block;
}
.rating td:active~td {
background: #FFCF20;
}
</style>
<table class="rating es-table-not-adapt" dir="rtl">
<tbody>
<tr>
<td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
<td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
<td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
<td><a href="https://esputnik.com" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt="https://secure.esputnik.com/7nqE9Vq2mes" title="https://secure.esputnik.com/7nqE9Vq2mes"></a></td>
<td><a href="https://esputnik.com" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt="https://secure.esputnik.com/7nqE9Vq2mes" title="https://secure.esputnik.com/7nqE9Vq2mes"></a></td>
</tr>
</tbody>
</table>
Der Code wurde von unserem Produktentwickler Roman Burdyga geschrieben.
Schritt 2. Verknüpfung mit einer „Danke“-Seite
Erinnern Sie sich, dass wir zuvor gesagt haben, dass Sie die „Danke“-Seite erstellen müssen? Wir müssen nun in unserem Code Links zu ihr hinzufügen.
Ersetzen Sie die unterstrichenen Links im Code mit dem Link zu Ihrer „Danke“-Seite.
Die Zeilen 1-2 stehen für 4 und 5 Sterne. Sie sollten also hier den Link zur Seite einfügen, auf der Sie Ihren Kunden nur danken, dass sie eine Bewertung hinterlassen haben.
Die Zeilen 3-5 stehen für 1, 2, und 3 Sterne. Hier sollten Sie den Link zur Seite einfügen, auf der Sie sich entschuldigen und die Benutzer wissen lassen, dass Sie jemand vom Kundensupport-Team in Kürze kontaktieren wird.
Schritt 3. Zentrieren der Bewertung
Um die Bewertung zu zentrieren, müssen Sie:
-
Den Code-Editor für die Struktur mit der Bewertung öffnen. Dazu klicken Sie mit der linken Maustaste auf das „Struktur“-Zeichen in der E-Mail und dann auf das „Code-Editor“-Symbol über der Vorlage;
-
Fügen Sie den untenstehenden Code in die Zeile „td class="esd-block-html“ direkt über dem Code, den Sie im vorherigen Schritt eingebettet haben, ein.
align="center"
Ihre E-Mail ist nun einsatzbereit.
E-Mail-Clients, die den Test erfolgreich bestanden haben:
Diese Bewertung hat alle gängigen E-Mail-Clients, einschließlich Gmail, AOL, Yahoo, Samsung Mail und sogar Outlook, sowohl auf Desktop- und mobilen Geräten erfolgreich bestanden.
Alternative
Auch wenn die interaktive Sterne-Bewertung in allen E-Mail-Clients, die ich zum Testen finden konnte, einwandfrei funktioniert hat, gibt es immer noch die Möglichkeit, dass Sie eine andere Option verwenden möchten, um es Ihren Benutzern zu ermöglichen, Sie in E-Mails zu bewerten.
(Quelle: Really Good Emails)
So geht es:
-
Sie fügen 5 Bilder waagerecht ein;
-
Zu jedem Bild fügen Sie die entsprechenden Links zu den „Danke“-Seiten ein.
3. Eingebettete Umfragen mit mehreren Fragen
Wenn Sie eine Reihe von Fragen stellen müssen, sollten Sie ein Quiz-Formular erstellen und es in Ihren interaktiven E-Mail-Newsletter einbetten, so dass Ihre Kunden keine überflüssigen Aktionen durchführen müssen - sie können direkt in E-Mails ihre Meinung abgeben.
So geht es:
-
Sie müssen ein Google-Formular erstellen;
-
Senden Sie es an Ihre E-Mail-Adresse;
Hinweis: wenn Sie das Google-Formular an sich selbst schicken, achten Sie darauf, „per E-Mail senden” auszuwählen, geben Sie dann Ihre E-Mail-Adresse ein, bearbeiten Sie den Betreff und die Nachricht, falls nötig, da alle Empfänger sie sehen werden und aktivieren Sie das Kontrollkästchen „Formular in E-Mail einschließen“.
-
Kopieren Sie den Embed-Code;
Öffnen Sie das Formular in Ihrem Posteingang, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Inspizieren“. Suchen Sie nach der Zeile table align=”center” cellpadding. Sobald sie markiert ist, drücken Sie "CTRL+C" (nicht mit der rechten Maustaste klicken und dann kopieren);
-
Fügen Sie einen neuen HTML-Block zu Ihrer interaktiven Newsletter-Vorlage hinzu;
-
Öffnen Sie ihn und löschen Sie das ”Fügen Sie Ihren HTML-Code in den Editor ein“, das sich im Block befindet;
-
Fügen Sie den Embed-Code in diesen Block ein;
-
Fertig!
Schauen Sie sich bitte das GIF an, um den kompletten „Einbindungsprozess für die Umfrage“ anzusehen.
Hinweis: Die Umfrageformulare, die in unsere interaktiven Newsletter-Vorlagen eingebunden sind, werden auf allen Arten von Geräten korrekt dargestellt. ABER! Die Kontrollkästchen sind nur auf Desktop klickbar, auf mobilen Geräten sind sie es nicht.
Beim Öffnen von Umfrage-E-Mails auf mobilen Geräten und Tablets haben Ihre Nutzer also den Link zum Google-Formular selbst (sie erinnern sich, der Betreff des Formulars, den Sie angegeben haben? Das ist der Name des Links. — Er wird automatisch hinzugefügt. Empfänger können gefahrlos auf den Link klicken, um ihre Antworten abzusenden).
In meinem Fall heißt er „Weihnachtsverkauf“.
E-Mail-Clients, die den Test erfolgreich bestanden haben:
- Gmail;
- AOL;
- Yahoo! Mail.
Es funktioniert nur auf Desktops.
Mobile Benutzer und Empfänger, die andere E-Mail-Clients verwenden, sehen den Link. Sie werden möglicherweise auch zum Google-Formular umgeleitet, sobald Sie auf den „Absenden“-Button klicken (in Apple Mail).
Für die Benutzer, die andere E-Mail-Clients bevorzugen, können Sie als Fallback auch einen Link zum Google-Formular in Ihrer E-Mail hinzufügen und angeben, dass die Benutzer auf den Link klicken müssen, um an der Umfrage teilzunehmen.
Bitte beachten Sie: Derzeit ist Stripo der einzige E-Mail-Vorlagengenerator, der das Einbetten von Google-Formularen auf diese Weise ermöglicht.
Einige E-Mail-Vorlagengeneratoren erlauben es nicht, mit offenem HTML-Code zu arbeiten, andere erlauben es zwar, aber ihr Editor verändert den Einbettungscode und die Umfrageformulare sehen selbst auf Desktop-Geräten fehlerhaft aus.
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.
(Quelle: E-Mail von Maybelline New York)
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.
4. 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;
-
Gmail;
-
Apple Mail;
-
Outlook 2003;
-
Outlook Web;
-
Outlook für Mac.
In diesem Blogbeitrag finden Sie neue Ideen, Empfehlungen und Anforderungen an die Bilder.
5. 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.
(Quelle: Really Good Emails)
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.
6. 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.
7. 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?
8. Ankerlinks
Im Gegensatz zu allen anderen interaktiven Newsletter-Beispielen, ist dieses interaktive Element nicht dazu gedacht, Ihre Kunden zu unterhalten. Es ist dazu gedacht, sie schnell zu dem Teil der E-Mail zu führen, der sie am meisten interessiert.
(Quelle: E-Mail von Mercedes-Benz)
So geht es:
-
Erstellen Sie das Menü für Ihre E-Mail;
-
Ziehen Sie nun den grundlegenden „HTML“-Block in Ihre interaktive E-Mail, direkt über dem E-Mail-Abschnitt, zu dem ein entsprechender Menüreiter die Benutzer führen soll. Keine Sorge. Das beeinflusst das Design Ihrer Vorlage nicht;
-
Klicken Sie mit der linken Maustaste auf den HTML-Block in der Vorlage, um den Code-Editor zu öffnen;
-
Entfernen Sie dessen Inhalt und fügen Sie das unten angegebene Codebeispiel ein, wobei "yourlabel" für den Namen des erforderlichen E-Mail-Elements steht. In meinem Beispiel ist es "yourlabel". Egal, wie viele Wörter der Name des E-Mail-Elements hat, hier sind keine Leerzeichen erlaubt;
<a name="yourlabel"></a>
- Gehen Sie nun zurück zum Menü;
-
Öffnen sie seinen Code;
-
Für einen erforderlichen Menüreiter geben Sie anstelle eines Hyperlinks den Namen des E-Mail-Elements ein, mit dem Sie den Menüreiter verbinden, vorangestellt ein Hashtag-Symbol. In meinem Beispiel ist es "#yourlabel";
-
Machen Sie das Gleiche mit anderen Menüreitern, um sie mit den entsprechenden E-Mail-Elementen zu verbinden.
E-Mail-Clients, die den Test erfolgreich bestanden haben:
-
Gmail (Web);
-
Gmail auf Android;
-
Apple Mail;
-
Yahoo! Mail;
-
Outlook.com;
-
AOL.com;
-
Samsung E-Mail auf Android;
-
Windows Mail.
Schlusswort
Interaktive E-Mail-Kampagnen sind eine gute Möglichkeit, Ihre Newsletter zu beleben. Deshalb glauben wir, dass Sie sie ausprobieren sollten. Wir wissen jedoch, dass die Erstellung interaktiver E-Mails in der Regel mehr Zeit in Anspruch nimmt als die Erstellung normaler E-Mails. Deshalb haben wir bei Stripo interaktive Vorlagen erstellt und unser Bestes getan, um Ihnen die notwendigen Codebeispiele und sogar getestete E-Mails zur Verfügung zu stellen, damit Sie schneller ansprechende E-Mails erstellen können.
Wir möchten Sie daran erinnern:
-
Das interaktive E-Mail-Design einfach zu halten, da der Fokus auf Interaktivität liegt;
-
Immer! eine Test-E-Mail an alle Ihre E-Mail-Adressen und Geräte zu senden, da dies der einzige Weg ist, zu prüfen, ob die interaktiven Elemente wirklich funktionieren oder nur statische Bilder sind.
3 Kommentare