Im März 2019 hat Google AMP für E-Mails veröffentlicht. Seit Juli 2019 ist es für G-Suite-Benutzer verfügbar und standardmäßig für alle Gmail-Benutzer "eingeschaltet".
AMP ermöglicht es den Empfängern, notwendige Artikel in den Warenkorb zu legen, an Umfragen teilzunehmen, usw. Und natürlich können all diese Aktionen jetzt direkt in E-Mails durchgeführt werden.
Das Hauptziel von Stripo war es schon immer, den Zeitaufwand für die E-Mail-Produktion durch die Automatisierung der meisten Prozesse zu verringern.
Aus diesem Grund haben wir unseren AMP-E-mail-Builder und den Drag-and-Drop-Block "AMP-Karussell" entwickelt, um den Designprozess zu beschleunigen.
Bevor ich zum Leitfaden komme, möchte ich die Vorteile der Erstellung von AMP-E-Mails mit Stripo hervorheben.
Warum AMP-E-Mails mit Stripo erstellen?
- Sie müssen keine AMPHTML-Code-Elemente in den E-Mail-Header einfügen.
- Es sind keine Programmierkenntnisse erforderlich - Sie können von gebrauchsfertigen Elementen profitieren.
- Zeitsparend - Sie fügen die Links zu Ihren Bildern einfach in ein Inhaltsmodul ein.
- Sie können für jedes einzelne Bild in Ihrem AMP-Karussell, das Sie mit Stripo erstellen, Links setzen. Diese Links führen die Empfänger zu den entsprechenden Seiten auf Ihrer Website.
Anleitung, wie man ein AMP-Karussell mit Stripo erstellt:
Es sind zwei Schritte nötig, um ein AMP-Karussell mit Stripo zu erstellen:
Schritt 1. Aufbau des AMP-Karussells an sich
- Ziehen Sie den AMP-Karussellblock in die HTML-E-Mail-Vorlage, mit der Sie arbeiten;
Sie werden sehen, dass dieses Element das Symbol "⚡HTML" neben sich hat. Dies bedeutet, dass dieses Element nur in AMP-E-Mails angezeigt wird und in E-Mail-Clients, die AMP nicht unterstützen, ausgeblendet wird. Wir müssen einen Fallback für andere Empfänger erstellen. Wir werden später darüber sprechen.
- Klicken Sie auf das Symbol "⚡ HTML", um das Einstellungsfeld zu aktivieren;
- Uploaden Sie Bild 1 für Ihre Folie;
- im Einstellungsbereich müssen Sie nun die Schaltfläche "Vorschau anzeigen" aktivieren, wenn Sie kleine Vorschaubilder anzeigen möchten;
- legen Sie die Breite für diese Vorschaubilder fest;
- Geben Sie ALT-Text ein;
- fügen Sie einen Link zu dem jeweiligen Produkt ein;
- klicken Sie auf die Schaltfläche "Folie hinzufügen";
- machen Sie dasselbe mit anderen Bildern;
- prüfen Sie, ob die Größen aller Bilder übereinstimmen. Wenn das nicht der Fall ist, schneiden Sie sie mit unserem Bildbearbeitungsprogramm zu;
- schalten Sie die Schaltfläche "Autoplay" um, wenn Sie möchten, dass Ihre Dias automatisch wechseln;
- schalten Sie die Schaltfläche "Schleife" ein, damit Ihre Dias von Anfang an angezeigt werden, wenn ein Benutzer auf das letzte Bild klickt;
- Suchen Sie den Bereich "Folienvorschau" und wählen Sie aus, wo er angezeigt werden soll;
- Schalten Sie die Schaltfläche "Benutzerdefinierte Vorschau" um, um die Art der Vorschau (Bild oder Farbe) zu wählen;
- Schalten Sie die Schaltfläche "Allgemeiner Link" ein, um dem gesamten AMP-Karussell einen einzelnen Link hinzuzufügen;
- fertig!
Wichtig zu beachten:
Ich habe 16 Folien hinzugefügt, und sie funktionierten in Google Mail auf mehreren Geräten recht gut.
Schritt 2. Aufbau einer Ausweichlösung für andere Empfänger
Da nun alle Empfänger, die Gmail verwenden, dieses Karussell sehen werden, müssen wir an diejenigen denken, die andere E-Mail-Clients bevorzugen.
Das AMP-Karussell, das wir gerade erstellt haben, funktioniert auf Desktops in Google Mail standardmäßig gut.
Jetzt ist es an der Zeit, ein Fallback für andere zu bauen.
In diesem Fall gibt es zwei Arten von Fallback:
Typ 1: Interaktives Karussell
Ein solches Karussell wird nur von Apple-Geräten und von Yahoo! Mail unterstützt.
- erstellen Sie ein regelmäßiges Inhaltskarussell mit FreshInbox;
- kopieren Sie den Einbettungscode;
- ziehen Sie den HTML-Block in Ihre E-Mail-Vorlage;
- doppelklicken Sie ihn, um den Code-Editor zu aktivieren;
- fügen Sie den Code in den Code-Editor ein;
- schließen Sie den Code-Editor;
- Klicken Sie auf dieses Modul rechts in der Vorlage, um das Einstellungsfeld zu aktivieren;
- Suchen Sie in den Einstellungen die Zeile "Einschließen in" und wählen Sie die Option "HTML". Auf diese Weise stellen Sie sicher, dass dieses Inhaltsmodul nur in den E-Mail-Clients angezeigt wird, die AMP für E-Mails nicht unterstützen.
Das bedeutet, dass jeder E-Mail-Client entscheidet, welche Version Ihres Karussells angezeigt werden soll!
Wichtig zu beachten:
Wenn der E-Mail-Client des Empfängers diese Art von Interaktivität nicht unterstützt, wird ihm nur das erste Bild angezeigt.
Weitere Informationen über die Erstellung eines interaktiven Bildkarussells finden Sie in diesem Blogbeitrag.
Typ 2. Statische Produktinhaltsmodule
- Ziehen Sie eine 2-Spalten-Struktur in Ihre E-Mail-Vorlage;
- legen Sie den Bildblock in der 1. Spalte ab;
- laden Sie ein erforderliches Bild hoch;
- ziehen Sie den Textblock in die 2. Spalte;
- umbrechen Sie diesen Text in einer passenden Schriftart;
- in der Einstellungsleiste finden Sie den Abschnitt "Einschließen in" und wählen die Option "HTML". Wie gesagt, damit stellen Sie sicher, dass dieser Inhaltsbaustein nur in den E-Mail-Clients angezeigt wird, die AMP für E-Mails nicht unterstützen.
Sie können so viele Produktmodule zu Ihrer E-Mail hinzufügen, wie Sie benötigen. Weitere Informationen darüber, wie Sie beim Erstellen ähnlicher E-Mail-Elemente Zeit sparen können, finden Sie in diesem Blogbeitrag im Abschnitt "Kopieren und Verschieben von Elementen".
Wichtig zu beachten:
Wenn Sie die Option "In HTML einschließen" wählen, wird das gewählte Element in allen E-Mail-Clients angezeigt, die nur den traditionellen HTML-Mimetyp unterstützen.
Wenn Sie die Option "In AMPHTML einschließen" (⚡HTML) wählen, wird das ausgewählte Element in allen E-Mail-Clients angezeigt, die den MIME-Typ AMPHTML (text-x-amphtml) unterstützen.
Wenn für ein bestimmtes E-Mail-Element "none" eingestellt ist, wird dieses Element auf allen Geräten und in allen E-Mail-Clients angezeigt.
Mit diesen einfachen Schritten haben wir ein einfaches AMP-Karussell erstellt - wir haben Bilder ohne Beschreibungen verwendet. Das funktioniert am besten, wenn Sie ein paar Artikel einer Art oder das gleiche Produkt aus verschiedenen Blickwinkeln zeigen.
Was aber, wenn Sie ein komplexes Karussell mit informativeren Bildern und "falschen" Schaltflächen darüber benötigen? Mit Stripo ist das möglich, denn unser Editor erlaubt es, Text über Bilder zu legen und mehrere Filter anzuwenden ;).
Aufbau eines AMP-Karussells mit einer Beschreibung und "Buttons" über Bildern
Zunächst einmal müssen Sie also ein reguläres AMP-Karussell erstellen, wie im obigen Absatz beschrieben. Lassen Sie uns nun mit der Gestaltung der Folien fortfahren:
a) Texte über Bilder schreiben
- Wenn Sie ein Bild hochgeladen haben, öffnen Sie den Fotoeditor;
- Wählen Sie in den Einstellungen des Fotoeditors die Option "Text", um Texte über Ihre Bilder zu legen. Der Editor bietet etwa 1000 Schriftarten;
- Wählen Sie die Schriftart und die Farbe;
- klicken Sie in der rechten oberen Ecke des Editors auf die Schaltfläche "Übernehmen", um diese Parameter zu speichern.
b) Platzierung einer CTA-Schaltfläche" über Ihren Bildern
- Zunächst müssen Sie diese Schaltfläche vorbereiten - das Bildformat sollte SVG oder ein anderes mit einem transparenten Hintergrund sein;
- klicken Sie in der linken oberen Ecke des Einstellungsfeldes auf die Schaltfläche "Öffnen";
- wählen Sie die Option "Bild überlagern";
- Laden Sie Ihr Schaltflächenbild hoch;
- platzieren Sie es genau dort, wo Sie es in Ihrer Folie sehen wollen;
- stellen Sie die Größe ein;
- Klicken Sie auf die Schaltfläche "Speichern", um die an der Folie vorgenommenen Änderungen zu speichern.
Hier ist also, was wir gerade zusammen gebaut haben:
Ein Ratschlag
Hier nur eine freundliche Erinnerung. Um AMP-Inhalte senden zu können, müssen Sie:
- lassen sich bei Google auf die Whitelist setzen;
- beheben Sie alle Bugs, falls welche auftreten. Sie werden sie im Vorschaumodus sehen (andernfalls werden die Nutzer eine HTML-E-Mail sehen);
- fügen Sie dieser E-Mail die Fallback-Version - HTML - hinzu;
- stellen Sie sicher, dass Ihr ESP/CRM in der Lage ist, AMP-E-Mails zu versenden;
- beachten Sie, dass derzeit nur Gmail (sowohl Web- als auch mobile Apps auf allen Betriebssystemen) und Yahoo! Mail in der Lage sind, AMP-E-Mails darzustellen;
- AMP-E-Mails verlieren ihre AMP-Komponenten, wenn Sie sie weiterleiten.
Die besten E-Mail-Karussell-Beispiele für Ihre Inspiration
Da Sie nun wissen, wie Sie innerhalb weniger Minuten AMP-gestützte Karussells erstellen können, werfen wir einen Blick darauf, wie beliebte Unternehmen von dieser Funktion profitieren.
Hier sind die 5 besten Karussell-Beispiele, um Ihre kreativen Ideen anzuregen:
1. Stripo
Wir fügen oft Karussells in unsere wöchentliche Zusammenfassung ein, um sie funktioneller und aufmerksamkeitsstärker zu machen. In diesem Beispiel haben wir es den Abonnenten ermöglicht, durch neue E-Mail-Vorlagen zu blättern, um die am besten geeignete zu finden.
(Quelle: E-Mail von Stripo)
2. Breguet
In diesem Beispiel nutzte das Unternehmen ein Karussell, um den Abonnenten seine Produkte vorzustellen und ihnen die Möglichkeit zu geben, einen Termin zu buchen, ohne ihren Posteingang verlassen zu müssen.
(Quelle: E-Mail von Breguet)
3. MamaGourmand
MamaGourmand nutzte das AWeber-Bilderkarussell, um Rezeptideen mit Abonnenten zu teilen. Es ist eine hervorragende Möglichkeit, die Empfänger anzusprechen und eine Vielzahl Ihrer Produkte oder Dienstleistungen zu zeigen.
(Quelle: E-Mail von MamaGourmand)
4. Offset
Sie können Abonnenten nicht nur zum Kauf Ihrer Produkte auffordern, sondern Karussells auch für unterhaltsame Inhalte nutzen. Im folgenden Beispiel können Sie sehen, wie eine beliebte Bildquelle die E-Mail mit einem Karussell gestaltet hat, um ihren Abonnenten eine Sammlung schöner Fotos zu zeigen.
(Quelle: E-Mail von Offset)
5. HP
HP hat ein Karussell in seine E-Mail eingefügt, um einen neuen Computer aus verschiedenen Blickwinkeln zu präsentieren. Es ist eine fantastische Möglichkeit, Kunden mehr Details zu zeigen, aber es ist wichtig, dass die Produktfotos klar und gut beleuchtet sind.
In diesem Beispiel wurde das Karussell mit HTML5 erstellt, aber Sie können es auch mit AMP erstellen.
(Quelle: E-Mail von HP)
Abschließend
Wir haben gerade 2 AMP-Karussells erstellt, die es Ihnen ermöglichen, Ihre Waren aus verschiedenen Blickwinkeln zu präsentieren oder neue Produkte aus Ihrer Kollektion vorzustellen. Jedes Dia führt die Empfänger zu den entsprechenden Seiten Ihrer Website. Dies ist ein guter Weg, um Ihre E-Mails zu beleben, die Zielgruppe anzusprechen und die Nachrichten funktionaler zu gestalten.
Um herauszufinden, wie Sie Ihre AMP-E-Mails in der Vorschau anzeigen und exportieren können, lesen Sie bitte die entsprechenden Abschnitte in unserem Blogbeitrag.
Die Erstellung von AMP-E-Mails kann ein Kinderspiel sein, wenn Sie den Stripo AMP-E-Mail-Builder verwenden ;).
2 Kommentare