How to Build AMP Carousel with Stripo_Cover Image
timer ~ 8 min gelesen
76637 Aufrufe
bewerten Sie es
13 Oktober 2022

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

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

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.

Drag-n-Drop AMP-Karussell zu E-Mail hinzufügen

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

Elly Peers vor 3 Jahren

How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks

Hanna Kuznietsova kommentiert Elly Peers vor 3 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.

Sie könnten interessiert sein an

vorherige nächste
banner9
06 Juni 2022 · 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 2022 · 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