Design Marketing Vorlagen How-to AMP
~ 8 min gelesen
2 Kommentare
46139 Aufrufe
bewerten Sie es
23 Juni 2019

So erstellen Sie mit Stripo ein AMP-Karussell für Ihre E-Mails

Stripo / Blog / So erstellen Sie mit Stripo ein AMP-Karussell für Ihre E-Mails

Im März dieses Jahres veröffentlichte Google sein AMP für E-Mails. Und ab dem 2. Juli wird es auch für die G-Suite-Benutzer verfügbar sein und standardmäßig für alle Benutzer von Google Mail „eingeschaltet“ sein.

Wir wissen, dass es dadurch den Empfängern ermöglicht wird, notwendige Artikel in den Einkaufswagen zu legen, den Leuchtkasteneffekt auf Bilder anzuwenden und so weiter und so fort. Und natürlich können alle diese Aktionen jetzt direkt in E-Mails durchgeführt werden.

Dies ist die neue Ära im E-Mail-Marketing, die in der Tat zu großen Veränderungen führt: ESPs müssen jetzt ihre Protokolltypen ändern, Empfänger müssen lernen, dass E-Mails jetzt kleine Versionen von Websites sind und fast so funktional sind wie letztere, und wir als E-Mail-Marketingspezialisten müssen neue Programmierkenntnisse erwerben. Alle diese Änderungen sind so zeitaufwändig.

Die Zeit, die Sie für die E-Mail-Produktion aufwenden, durch die Automatisierung der meisten Bauprozesse zu reduzieren, war schon immer das Hauptziel von Stripo.

Deshalb sind wir bestrebt, die Erstellung von AMP-basierten E-Mails zu automatisieren. Am 18. Juni haben wir unseren Drag-n-Drop-Block „AMP- Karussell“ freigegeben.

Building-AMP-carousel-with-Stripo_Simple-Carousel

Bevor ich zum Leitfaden komme, möchte ich die Vorteile der Erstellung von AMP-E-Mails mit Stripo hervorheben.

Warum Sie AMP-E-Mails mit Stripo erstellen sollten:

  1. Sie müssen keine AMPHTML-Code-Elemente („zum E-Mail-Header“) hinzufügen;
  2. Keine Programmierkenntnisse erforderlich - Sie verwenden ein bereits vorbereitetes Element;
  3. Zeitsparend - Sie fügen einfach die Links zu Ihren Bildern in dieses Inhaltsmodul ein;
  4. Für jedes einzelne Bild in Ihrem AMP-Karussell, das Sie mit uns erstellen, können Sie Links setzen, die den Leser zu den entsprechenden Seiten auf Ihrer Website führen.

Anleitung zum Erstellen von AMP-Karussells mit dem Stripo-Editor:

Der Aufbau eines AMP-Bildkarussells mit Stripo erfolgt in zwei Schritten:

Schritt 1. Bau des AMP-Karussells selbst

  • Ziehen Sie den AMP-Karussellblock in die HTML-E-Mail-Vorlage, mit der Sie arbeiten;

Building AMP Carousel_AMP Block

Sie werden sehen, dass dieses Element das Zeichen „⚡HTML“ in der Nähe hat. Das 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 schaffen. Darüber reden wir später.

AMPHTML-module-in-Email

  • Doppelklicken Sie darauf, um es in der Seitenleiste zu aktivieren;
  • Jetzt müssen Sie in der Seitenleiste den „Display-Button“ umschalten, wenn Sie kleine Vorschaubilder anzeigen möchten;
  • Legen Sie die Breite für diese Vorschaubilder fest;

Building AMP Carousel_Preview Image Button_De

  • Laden Sie Bild 1 für Ihr Slide hoch;
  • Geben Sie ALT-Text ein;
  • Fügen Sie einen Link zum jeweiligen Produkt ein; 

Edit Image Button_De

  • Klicken Sie auf die Schaltfläche „Slide hinzufügen“;

Building AMP Carousel_Add Slide Button

  • Machen Sie dasselbe mit den anderen Bildern;
  • Überprüfen Sie, ob die Größen aller Bilder übereinstimmen. Wenn dies nicht der Fall ist, schneiden Sie sie mit unserem Bildbearbeitungsprogramm zu;
  • Fertig! 

Dragging-Image-AMP-carousel

Bauen Sie jetzt ein AMP-Karussell mit Stripo

Wichtig zu beachten:

Ich habe 16 Slides hinzugefügt und sie haben alle in Gmail über mehrere Geräte hinweg ziemlich gut funktioniert. 

Schritt 2. Einen Fallback für andere Empfänger schaffen

Nun, da alle unsere Empfänger, die Gmail verwenden, dieses Karussell sehen werden, müssen wir an diejenigen denken, die andere E-Mail-Clients bevorzugen.

Das gerade erstellte AMP-Karussell funktioniert standardmäßig gut auf Desktops in Gmail. 

Für Andere müssen wir einen Fallback schaffen. 

In diesem Fall gibt es zwei Arten von Fallback:

Art 1: Interaktives Karussell

Wird nur von Apple-Geräten und Yahoo! Mail unterstützt.

  • Bauen Sie mit FreshInbox ein normales Inhaltskarussell auf;
  • Kopieren Sie den Einbettungscode;
  • Ziehen Sie den HTML-Block in Ihre E-Mail-Vorlage;
  • Doppelklicken Sie darauf, um den Code-Editor zu aktivieren;
  • Im Code-Editor, fügen Sie den Code ein;
  • Schließen Sie den Code-Editor;  

The-Close-the-Code-Editor-Button_Building-AMP-Emails-with-Stripo

  • Doppelklicken Sie auf dieses Modul direkt in der Vorlage, um die Seitenleiste zu aktivieren;
  • In der Seitenleiste, in der Zeile „Einschließen“, wählen Sie bitte die Option „HTML“. Dadurch stellen Sie sicher, dass dieses Inhaltsmodul nur in den E-Mail-Clients angezeigt wird, die AMP für E-Mails nicht unterstützen.

Include in HTML_De

Das bedeutet, dass jeder E-Mail-Client entscheidet, welche Version Ihres Karussells er zeigen möchte!

Wichtig zu beachten:

Wenn der E-Mail-Client eines Empfängers diese Art von Interaktivität nicht unterstützt, sieht er nur das erste Bild.

Für weitere Informationen zum Aufbau eines interaktiven Bildkarussells, lesen Sie bitte diesen Blogbeitrag.

Art 2. Statische Produktinhaltsmodule

  • Ziehen Sie eine 2-spaltige Struktur in Ihre E-Mail-Vorlage;
  • Platzieren Sie den Bildblock in die erste Spalte;
  • Laden Sie ein Bild hoch, das notwendig ist;
  • Platzieren Sie den Textblock in die zweite Spalte;
  • Bringen Sie diesen Text in eine passende Schriftart;
  • In der Seitenleiste, im Abschnitt „Einschließen“, wählen Sie bitte die Option „HTML“. Wie gesagt, indem Sie dies tun, stellen Sie sicher, dass dieses Inhaltsmodul nur in den E-Mail-Clients angezeigt wird, die AMP für E-Mails nicht unterstützen.  

Product-Content-Modules_Building-AMP-Emails

Sie können Ihrer E-Mail so viele Produktmodule hinzufügen, wie Sie benötigen. Für weitere Informationen darüber, wie Sie beim Erstellen ähnlicher E-Mail-Elemente Zeit sparen können, lesen Sie bitte diesen Blogbeitrag im Abschnitt „Kopieren und Verschieben von Elementen“.

Wichtig zu beachten:

Wenn Sie die Option „In HTML einbinden“ wählen, wird das ausgewählte Element in den E-Mail-Clients angezeigt, die nur den traditionellen HTML-Mime-Typ unterstützen.

Wenn Sie die Option „In AMPHTML einbinden“ (⚡HTML) wählen, wird das ausgewählte Element in den E-Mail-Clients angezeigt, die den MIME-Typ AMPHTML (text-x-amphtml) unterstützen.

Wenn keines von beiden für ein bestimmtes E-Mail-Element festgelegt ist, wird dieses Element über alle Geräte und alle E-Mail-Clients angezeigt.

Mit diesen einfachen Schritten haben wir ein einfaches AMP-Karussell gebaut - Sie haben Bilder ohne Beschreibung verwendet. Es funktioniert am besten, wenn Sie ein paar Artikel der gleichen Art oder das gleiche Produkt aus verschiedenen Blickwinkeln zeigen.

Aber was, wenn Sie ein komplexes Karussell mit informativeren Bildern und "Fake"-Buttons darüber brauchen? Sie können es immer noch mit Stripo erstellen, da unser Editor es erlaubt, Text zu Bildern hinzuzufügen und mehrere Filter anzuwenden ;)

Erstellung eines AMP-Karussells mit Beschreibung und „Buttons“ über Bildern

Also, zuerst einmal müssen Sie ein normales AMP-Karussell erstellen, wie im obigen Abschnitt beschrieben. Kommen wir nun zum Design der Slides:

a) Text auf Bilder schreiben

  • Sobald Sie das Bild hochgeladen haben, öffnen Sie die Bildbearbeitung;

Edit Image Button_De

  • Wählen Sie in der Seitenleiste der Bildbearbeitung die Option „ATEXT“, um Text auf Ihren Bildern zu platzieren. Die Bildbearbeitung bietet über 1000 Schriften;  

Photo Editor_De

  • Wählen Sie die Schriftart und -farbe;
  • Klicken Sie in der rechten oberen Ecke der Bildbearbeitung den „Anwenden”-Button, um diese Parameter zu sichern.

b) Einen CTA- „Button“ auf Ihren Bildern platzieren

  • Zuerst müssen Sie diesen Button vorbereiten - das Bildformat sollte SVG oder ein anderes mit transparentem Hintergrund sein;
  • Klicken Sie in der linken oberen Ecke in der Seitenleiste den Button „Öffnen“;
  • Wählen Sie die Option „Overlay-Bild”;

Embedded Photo Editor_Adding Second Image_De

  • Laden Sie Ihr Button-Bild hoch;
  • Platzieren Sie es genau dort, wo Sie es auf Ihrem Slide sehen möchten;
  • Stellen Sie die Größen ein;
  • Klicken Sie auf den Button „Speichern“, um die Änderungen, die Sie am Slide vorgenommen haben, zu speichern.

Embedded Photo Editor Save Button_De

Hier ist nun also, was wir soeben gemeinsam erstellt haben:

Building-AMP-carousel-with-Stripo-Images-with-Button

Welche E-Mail-Clients unterstützen AMP heute?

  • Gmail Desktop — funktioniert bereits;
  • Mail.ru — funktioniert bereits.

Yahoo, AOL und Outlook werden es bald haben.

Schlussworte

Wir haben gerade 2 AMP-Karussells gebaut, ohne den HTML-Code Editor zu öffnen. Alle Slides jeder Art zeigen den Empfängern Ihre Produkte aus verschiedenen Blickwinkeln oder die neuesten Artikel aus Ihrer Kollektion. Und jedes Slide, führt die Empfänger zu den entsprechenden Seiten Ihrer Website, sobald es angeklickt wird. Dies ist eine gute Möglichkeit, Ihre E-Mails zu beleben, besser mit Ihrem Publikum zu interagieren und E-Mails funktionaler zu gestalten.

Um zu erfahren, wie Sie Ihre AMP-E-Mails vorab ansehen und exportieren können, lesen Sie bitte die entsprechenden Abschnitte in unserem Blogbeitrag.

Die Erstellung von AMP-basierten E-Mails kann ein Kinderspiel sein, wenn Sie den Stripo E-Mail-Vorlagengenerator verwenden ;)

Bitte beachten Sie, dass Sie bei Google auf die Whitelist gesetzt werden müssen, um AMP-E-Mails versenden zu können.

Probieren Sie Stripo aus

Elly Peers vor 1 Jahr

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

Hanna Kuznietsova kommentiert Elly Peers vor 1 Jahr

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 →
Stripo_Building AMP Emails with Stripo_Featured Image
11 März · 21 min gelesen
​​​​​​​Verschiedene Wege, AMP-E-Mails mit Stripo zu erstellen

Dynamische Updates, Echtzeit-Inhalte, Hyper-Personalisierung, eine neue Stufe der Gamification, das Hinterlassen von Feedback in offenen Formularen, das Buchen von Meetings usw. - all diese Aktionen sind mit der Einführung von AMP für E-Mails nun direkt im Posteingang der Nutzer möglich. Man muss sagen, dass diese E-Mails Ihre Newsletter beleben, frisch und neu in den Posteingängen der Nutzer aussehen und als Ergebnis die Conversions erhöhen, in einigen Fällen sogar um das 5-Fache! Aber wie erstellt man diese E-Mails? Gmail sagt in...

Design Marketing Vorlagen How-to AMP
Stripo Notification Emails
01 März · 14 min gelesen
​​​​​​​Beispiele und Best Practices für Benachrichtigungs-E-Mails

E-Mail-Benachrichtigungen sind der beste und einfachste Weg, um Abonnenten über Änderungen zu informieren, die bereits stattgefunden haben oder in Kürze stattfinden werden. Diese E-Mails weisen die höchste Öffnungsrate auf. Aber auch hier müssen wir uns bei der Gestaltung der E-Mails an bestimmte Best Practices halten, um das Vertrauen der Abonnenten nicht zu verlieren. Diese Benachrichtigungs-E-Mail-Vorlage ist gut strukturiert, enthält alle notwendigen Blöcke Verwenden Sie sie Wir haben die besten Beispiele und Best Practices für E-Mail-Benachrichtigungen zusammengetragen. Aber bevor wir in...

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