How to Build AMP Carousel with Stripo_Cover Image
13 Oktober 2022

Wie man ein AMP-Karussell für seine E-Mails mit Stripo erstellt

Hanna Kuznietsova
Inhaltsverzeichnis
  1. Warum AMP-E-Mails mit Stripo erstellen?
  2. Anleitung, wie man ein AMP-Karussell mit Stripo erstellt:
  3. Aufbau eines AMP-Karussells mit einer Beschreibung und "Buttons" über Bildern
  4. Ein Ratschlag
  5. Die besten E-Mail-Karussell-Beispiele für Ihre Inspiration
  6. Abschließend
1.
Warum AMP-E-Mails mit Stripo erstellen?

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.

So fügen Sie mit Stripo ein Drag-and-Drop-AMP-Karussell zu E-Mails hinzu

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?

  1. Sie müssen keine AMPHTML-Code-Elemente in den E-Mail-Header einfügen.  
  2. Es sind keine Programmierkenntnisse erforderlich - Sie können von gebrauchsfertigen Elementen profitieren.    
  3. Zeitsparend - Sie fügen die Links zu Ihren Bildern einfach in ein Inhaltsmodul ein. 
  4. 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;

AMP-Karussell-Block

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.

AMPHTML-Modul in Ihrer E-Mail

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

Umschalten der Vorschautaste und Einstellen der Vorschaubreite

  • Geben Sie ALT-Text ein;        
  • fügen Sie einen Link zu dem jeweiligen Produkt ein;

Hinzufügen von Bildern zu Folien _ AMP-Karussell mit Stripo

  • klicken Sie auf die Schaltfläche "Folie hinzufügen";

Slide Button hinzufügen _ AMP-Karussell mit Stripo bauen

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

Einrichten Ihres AMP-Karussells in Stripo

  • Suchen Sie den Bereich "Folienvorschau" und wählen Sie aus, wo er angezeigt werden soll;

Dia-Vorschaubereich _ Stripo

  • Schalten Sie die Schaltfläche "Benutzerdefinierte Vorschau" um, um die Art der Vorschau (Bild oder Farbe) zu wählen;

Benutzerdefinierte Vorschau in Stripo einstellen

  • Schalten Sie die Schaltfläche "Allgemeiner Link" ein, um dem gesamten AMP-Karussell einen einzelnen Link hinzuzufügen;
  • fertig!

Jetzt AMP-Karussell mit Stripo erstellen
Los geht’s

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;

Schließen Sie die Code-Editor-Schaltfläche _ Erstellen von AMP-E-Mails mit Stripo

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

In HTML-Schaltfläche einbinden _ AMP-E-Mails erstellen

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.

Produktinhaltsmodule _ Erstellung von AMP-E-Mails

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;

Erstellen von AMP-E-Mails mit Stripo _ Bearbeiten von Bildern

  • Wählen Sie in den Einstellungen des Fotoeditors die Option "Text", um Texte über Ihre Bilder zu legen. Der Editor bietet etwa 1000 Schriftarten;

Eingebetteter Foto-Editor

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

Hinzufügen einer CTA-Schaltfläche als Bild

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

Hinzufügen einer CTA-Schaltfläche zu Ihrer Folie

  • Klicken Sie auf die Schaltfläche "Speichern", um die an der Folie vorgenommenen Änderungen zu speichern.

Die Schaltfläche "Speichern" _ Arbeiten mit dem Editor

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.

E-Mail-Karussell Beispiel von Breguet

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

Fangen Sie noch heute an, mit Stripo schöne AMP-E-Mails zu erstellen
War dieser Artikel hilfreich?
Tell us your thoughts
Vielen Dank für Ihr Feedback!
Teilen mit
Gamification für Emails
Gamification für Emails

Erstellen Sie den ansprechendsten Newsletter, den es gibt. Keine Code-bezogenen Umstände.

Spiele-Generator ausprobieren
2 Kommentare
Elly Peers vor 5 Jahren
How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks
Hanna Kuznietsova vor 5 Jahren
Hello, Elly. Thank you for your question. If your ESP or a recipient's email client is not on the list, he or she will see just the traditional HTML version of your email. And AMP element will be just cut off. List of ESPs that currently support AMP: 1. eSputnik — via the API method only. The SMTP method will be added soon; 2. Amazon SES and PinPoint — via the API method only; 3. SparkPost — via the SMTP and API methods; 4. SendGrid — via the API method only; As for email clients, only two do support AMP today: Gmail; Mail.ru. Outlook says they are about to release AMP support this summer. In this blog post, we show how to build and add a fallback in your email to make sure all recipients see your promo emails. Thank you. Hope this helps.
Typ
Branche
Jahreszeiten
Integration
Stripo-Editor
Vereinfachen Sie den Prozess der E-Mail-Produktion.
Stripo-Plugin
Integrieren Sie den Stripo-Drag-n-Drop-Editor in Ihre Webanwendung.
Bestellen Sie eine individuelle Vorlage
Unser Team kann es für Sie entwerfen und programmieren. Füllen Sie einfach den Fragebogen aus und wir werden uns in Kürze bei Ihnen melden.

Stripo-Editor

Für E-Mail-Marketing-Teams und Einzelersteller von E-Mails.

Stripo-Plugin

Für Produkte, die von einem integrierten White-Label-E-Mail-Builder profitieren könnten.