timer ~ 21 min gelesen
212190 Aufrufe
bewerten Sie es
30 August

8 Beispiele für interaktive Inhalte in E-Mails

Stripo / Blog / 8 Beispiele für interaktive Inhalte in E-Mails

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.

Wir haben bereits 15 interaktive E-Mail-Vorlagen für Sie vorbereitet
Durchsuchen

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.

  1. CSS-animierte Schaltfläche für Werbe-E-Mails;

  2. Umfrageformulare für ereignisgesteuerte E-Mails und Fragebögen;

  3. Bildkarussell, um einige Produkte auf einem Bildschirm in Werbe-E-Mails anzuzeigen;

  4. Rollover-Effekt, um Produkte aus verschiedenen Blickwinkeln und deren Funktionen in Werbe-E-Mails darzustellen;

  5. Akkordeon für alle Arten von Kampagnen, um interaktive E-Mail-Newsletter kompakter zu gestalten;

  6. 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;

  7. In E-Mails eingebettete Videos;

  8. Ankerlinks.

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.

CSS-animierte Schaltfläche _ Stripo-Webinar-Einladung _ Interaktive E-Mail-Elemente

(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

CSS-animierte Schaltfläche _ Interaktive Funktionen

  • 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;

So erstellen Sie eine E-Mail mit Stripo _ Festlegen von Farben für die Schaltfläche

  • 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.

Es ist an der Zeit, einen Hover-Effekt auf Ihre Schaltflächen anzuwenden und Ihren E-Mails etwas Spaß zu verleihen
Bei Stripo anmelden

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.

Interaktive Newsletter-Ideen _ Sternbewertung in E-Mails

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;

Klicken Sie auf den HTML-Block in der Vorlage, um ihn zu öffnen _ Interaktive HTML-E-Mail

  • 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.

Ersetzen von Links im Code _ Interaktive Inhalte in E-Mails

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;

Arbeiten am Code der interaktiven HTML-E-Mail _ Stripo

  • 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"

Interaktive Newsletter _ Center Alignment RatingsIhre 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.

Nutzen Sie Sterne-Bewertungen, um herauszufinden, ob die Kunden mit Ihren Dienstleistungen zufrieden sind

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.

Alternativen zu interaktiven Newslettern _ Bewertungen

(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.

Eingebettete Fragebögen _ Interaktive HTML-E-Mail

So geht es:

  • 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“.

Stripo Interactive E-Mails _ Google-Formular senden

  • 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);

Stripo Interactive Elements _ Suche nach Einbettungscode

  • 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.

Stripo Interactive Emails _ Umfragecode GIF

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).

Stripo Interactive Emails _ Eingebetteter Fragebogen auf Mobilgeräten

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.

Beispiele für interaktive Newsletter _ Eingebettete Google-Formulare

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.

Einbetten von Formularen in E-Mails, um mehr Feedback von Kunden zu erhalten

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.

Stripo _ So erstellen Sie eine interaktive E-Mail-Alternative zum eingebetteten Fragebogen

(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 _ So erstellen Sie eine interaktive E-Mail

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“;

Stripo _ Interaktiver E-Mail-Design-Button für 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.

12 min read

53403 views 4.3

12 Ideas to Use Image Rollover Effect in Emails Weiterlesen

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:

Eingebettetes Video _ Stripo

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.

Stripo _ Code-Kombination

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;

HTML-Block zu E-Mail-Vorlagen hinzufügen _ Interaktive E-Mail-Kampagnen

  • 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";

Verbinden von Menüregisterkarten mit dem erforderlichen E-Mail-Element

  • 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.

Mathieu Jaulin vor 2 Monaten

Hi, i have a small audience for my new blog, do you know if its possible to get the star rating with Sendinblue ? Thanks

Francisca Pheng Soto vor 2 Jahren

Una consulta, recién estoy conociendo estos tipos de emails. ¿Es posible poner un video interactivo? Por ejemplo, donde el usuario pueda desplazarse por algún lugar como en los tour virtuales.

Hanna Kuznietsova kommentiert Francisca Pheng Soto vor 2 Jahren

Buen día. Lo siento por la respuesta tardía. Desafortunadamente, esto no es posible en esta etapa. Dado que la mayoría de las veces, estos videos se crean sobre la base de un iframe, y los clientes de correo electrónico no admiten este elemento en la actualidad. Pero puede proporcionar a los usuarios un enlace a la versión web de sus Tours virtuales (que se carga en su sitio web) en un correo electrónico. Puede obtener más información sobre cómo compartir un enlace a un video aquí: https://stripo.email/blog/add-video-email-stripo/#1-inserting-link-to-a-video-into-emails Le deseamos envíos exitosos y productivos.

Sie könnten interessiert sein an

vorherige nächste
banner9
06 Juni · 15 min gelesen
10 beste E-Mail-Vorlagenersteller für 2022

Scheinen alle E-Mail-Vorlagenersteller gleich zu sein? Sie sind jetzt verwirrt, welche Vorlage Sie für Ihre E-Mail-Kampagnen wählen sollen, nicht wahr? Kein Wunder, denn es gibt so viele von ihnen. Wir werden die beliebtesten Vorlagenersteller auf ihre besonderen Merkmale hin untersuchen, um Ihnen zu helfen, den besten HTML-E-Mail-Ersteller für Ihre aktuellen Bedürfnisse zu finden. Ich werde versuchen, eine Vorlage in all diesen Editoren mit denselben Mediendateien zu erstellen, um zu sehen, ob sich die Builder unterscheiden. Die besten E-Mail-Vorlagenersteller Für unsere...

Design Marketing Vorlagen
best-fonts-for-email-cover-image-stripo
24 Mai · 18 min gelesen
Beste Schriftarten für E-Mails: Tipps und Tricks zur Verwendung

Eines der größten Probleme bei der Erstellung von E-Mails ist die Wahl der richtigen Schriftart. Gewicht, Höhe, Breite, Farbe, Form, Abstände... Ist das alles wichtig? Ja, das tut es, aber eines der wichtigsten Dinge ist die Wahl einer lesbaren Schriftart. In diesem Beitrag zeigen wir Ihnen, wie Sie die beste professionelle Schriftart für E-Mails auswählen. Gestalten Sie elegante E-Mails mit Stripo im Handumdrehen mit unseren vorgefertigten Vorlagen Durchsuchen   HTML-Schriftarten für E-Mails: Zu beachtende allgemeine Regeln Es gibt drei Grundregeln,...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 Oktober 2021 · 10 min gelesen
16 großartige Beispiele für animierte GIFs in E-Mails

GIFs in E-Mails sind von großem Nutzen, wenn Sie Ihr Produkt präsentieren, die Aufmerksamkeit der Nutzer auf bestimmte Elemente lenken oder einfach nur Ihren Text etwas ausschmücken möchten. In diesem Artikel haben wir einige der besten Beispiele für E-Mail-GIF-Animationen zusammengestellt. Beispiele für animierte GIFs in E-Mails Hier ist eine Zusammenstellung der besten Beispiele mit GIFs in E-Mails. Jedes GIF erfüllt seine Aufgabe. 1. Adidas (Quelle: E-Mail von Adidas) Adidas verwendet E-Mail-Animationen, um zu zeigen, welche Farboptionen sie haben. Sieht ordentlich...

Design Marketing
08 April 2021 · 17 min gelesen
14 besten E-Mail-Signatur-Design-Beispiele

Gute E-Mail-Signaturen helfen uns, unser Unternehmen aufzubauen und einen guten Eindruck bei den Kunden zu hinterlassen. Da dies das letzte Element ist, das Menschen in E-Mails sehen, sollten wir unsere persönlichen Signaturen kreativ und einprägsam gestalten. Lassen Sie uns die besten Beispiele für E-Mail-Signaturen und ihre angemessene Verwendung in E-Mails und Newsletter-Vorlagen für E-Mails untersuchen. Es sollte erwähnt werden, dass alle Arten von Unternehmen professionelle E-Mail-Signaturen mit detaillierten Kontaktinformationen benötigen. Verwenden Sie diese Vorlage bei der Gestaltung einer E-Mail-Signatur Verwenden...

Design Marketing Vorlagen
Seien Sie immer auf dem Laufenden in Bezug auf aktuelle E-Mail-Marketing-Nachrichten, Leitfäden, Artikel und How-To's