AMP für E-Mail

Mit AMP für E-Mail können Sie interaktive Elemente zu Ihren E-Mails hinzufügen und die Kommunikation mit Ihren Kund:innen verbessern, indem Sie ein vollständiges Erlebnis direkt in den Posteingang Ihrer Nutzer:innen liefern. AMP macht dies durch die Verwendung verschiedener Komponenten möglich, die beim Erstellen ansprechender E-Mail-Angebote wie Umfragen, Feedback-Fragebögen, Abstimmungskampagnen, Bewertungen, Abo-Center und mehr helfen können. Tools wie diese bieten Möglichkeiten, Engagement und Bindung zu steigern.

Anforderungen

Braze ist nicht dafür verantwortlich, dass sich Nutzer:innen bei Google registrieren oder die erforderlichen Sicherheitsanforderungen erfüllen. AMP für E-Mail ist nur für SparkPost und SendGrid verfügbar.

Unterstützte E-Mail-Clients

Bevor Sie AMP-E-Mails an Nutzer:innen senden können, müssen Sie sich bei unseren E-Mail-Clients registrieren. Der Registrierungsprozess umfasst das Senden einer Test-AMP-HTML-E-Mail zur Genehmigung. Die Genehmigungszeiten variieren je nach Client. Folgen Sie den Registrierungslinks für weitere Informationen.

Eine vollständige Liste der unterstützten E-Mail-Clients finden Sie in der AMP-Dokumentation.

Gmail-Konto aktivieren

Gehen Sie zu Ihren Gmail-Einstellungen und wählen Sie unter Allgemein die Option Dynamische E-Mails aktivieren aus.

API-Nutzung

Sie können AMP für E-Mail auch mit unserer API verwenden. Wenn Sie einen der Braze Messaging-Endpunkte zum Senden einer E-Mail verwenden, fügen Sie amp_body als Objektspezifikation hinzu, wie unten gezeigt.

E-Mail-Objektspezifikation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "app_id": (required, string) see app identifier above,
  "subject": (optional, string),
  "from": (required, valid email address in the format "Display Name <[email protected]>"),
  "reply_to": (optional, valid email address in the format "[email protected]" - defaults to your workspace's default reply to if not set),
  "plaintext_body": (optional, valid plaintext, defaults to autogenerating plaintext from "body" when this is not set),
  "amp_body": (optional, updates the text-amp-html MIME type) the email body in AMP HTML. The MIME (Multipurpose Internet Mail Extensions) type to be referenced is "text/x-amp-html",
  "body": (required unless email_template_id is given, valid HTML),
  "preheader": (optional*, string) Recommended length 50-100 characters,
  "email_template_id": (optional, string) If provided, we will use the subject/body/should_inline_css values from the given email template UNLESS they are specified here, in which case we will override the provided template,
  "message_variation_id": (optional, string) used when providing a campaign_id to specify which message variation this message should be tracked under,
  "extras": (optional, valid key-value hash), extra hash - for SendGrid customers, this will be passed to SendGrid as Unique Arguments,
  "headers": (optional, valid key-value hash), hash of custom extensions headers. Currently, only supported for SendGrid customers,
  "should_inline_css": (optional, boolean), whether to inline CSS on the body. If not provided, falls back to the default CSS inlining value for the workspace,
  "attachments": (optional, array), array of JSON objects like [{"file_name","url"}] that define the files you need attached. Your file name's extension will be detected automatically from the URL, which should return the appropriate `Content-Type` as a response header,
}

Ihre AMP-E-Mail erstellen

Erstellen Sie zunächst Ihre AMP-E-Mail mit Komponenten. Verwenden Sie dann die Braze-API, um Ihre Nachricht zu senden, und stellen Sie sicher, dass amp_body für Ihr AMP-HTML enthalten ist.

Zusätzlich zum AMP-HTML benötigen wir eine reguläre HTML-body-Version und empfehlen eine plaintext_body-Version Ihrer AMP-E-Mail. Alle AMP-E-Mails werden als Multipart gesendet, d. h. Braze sendet eine E-Mail, die HTML, Klartext und AMP-HTML unterstützt. Dies ist nützlich, falls Ihre E-Mail über einen Anbieter gesendet wird, der AMP für E-Mail noch nicht unterstützt, da die E-Mail automatisch auf die entsprechende Version basierend auf den Nutzer:innen und ihrem Gerät zurückfällt.

Hinweis

Wenn Sie eine AMP-E-Mail erstellen, stellen Sie sicher, dass Sie sich im AMP-Editor befinden, da AMP-Code nicht zum HTML-Editor hinzugefügt werden sollte.

Weitere Ressourcen:

• AMP-Tutorial
• Beispielcode, um zu sehen, wie das Endergebnis aussehen sollte.
• AMP-E-Mail-Komponentenbibliothek

Komponenten

Beim Erstellen der AMP-Elemente empfehlen wir, sich mit Ihrem Entwicklerteam abzustimmen und Design-Ressourcen und -Elemente für eine zusätzliche Verfeinerung einzubeziehen.

• grundlagen
• dynamisch
• kreativ
• sonstiges

Jedes dieser Elemente ist im Body Ihrer AMP-E-Mail erforderlich.

Komponente	Beschreibung	Beispiel
Identifikation ⚡4email oder amp4email	Identifiziert Ihre E-Mail als AMP-HTML-E-Mail.	<!doctype html> <html ⚡4email> <head>
AMP-Runtime laden <script>	Ermöglicht die Ausführung von AMP in Ihrer E-Mail mithilfe von JavaScript.	<script async src="https://cdn.ampproject.org/v0.js"></script>
CSS-Boilerplate	Blendet Inhalte aus, bis AMP geladen ist. E-Mail-Anbieter, die AMP-E-Mails unterstützen, erzwingen Sicherheitsprüfungen, die nur geprüfte AMP-Skripte in ihren Clients ausführen lassen.	<style amp4email-boilerplate>body{visibility:hidden}</style>

Verwenden Sie diese Komponenten, um dynamische Layouts und Verhaltensweisen in Ihren E-Mails zu erstellen.

Komponente	Beschreibung	Erforderliches Skript
Akkordeon amp-accordion	Ermöglicht es Nutzer:innen, die Inhaltsübersicht anzuzeigen und zu einem beliebigen Abschnitt zu springen.	<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Formulare amp-form	Erstellen Sie Formulare zum Absenden von Eingabefeldern in einem AMP-Dokument.	<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Hinweis

Jede Komponente, die eine Authentifizierung der Nutzer:innen erfordert, muss Google-Zugriffstoken oder Proxy-Assertion-Token verwenden.

Werden Sie kreativ mit AMP-Komponenten, die Ihnen helfen können, Ihre E-Mail auf Ihre Zielgruppe zuzuschneiden.

Komponente	Beschreibung	Erforderliches Skript
Animiertes Bild amp-anim	Zeigt ein animiertes Bild (normalerweise ein GIF) an, das über die Runtime verwaltet wird.	<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
Karussell amp-carousel	Zeigt mehrere ähnliche Inhalte entlang einer horizontalen Achse an.	<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Bild	Ein von der Runtime verwalteter Ersatz für das HTML-img-Tag. Sie können auch eine Lightbox für Ihr Bild erstellen.	<amp-img alt="A view of the sea" src="images/sea.jpg" width="900" height="675" layout="responsive"> </amp-img>

Hinweis

Jede Komponente, die eine Authentifizierung der Nutzer:innen erfordert, muss Google-Zugriffstoken oder Proxy-Assertion-Token verwenden.

Komponente	Beschreibung
Datenbindung und Ausdrücke amp-bind	Fügt Ihren AMP-Seiten angepasste zustandsabhängige Interaktivität über Datenbindung und JavaScript-ähnliche Ausdrücke hinzu.

Hinweis

Jede Komponente, die eine Authentifizierung der Nutzer:innen erfordert, muss Google-Zugriffstoken oder Proxy-Assertion-Token verwenden.

Eine vollständige Liste der AMP-Komponenten finden Sie in der AMP-Dokumentation.

Anwendungsfälle

• interaktive umfragen
• einklappbare inhalte
• bildlastige e-mails
• textbasierte e-mails

amp-mustache verwenden

Ähnlich wie Liquid unterstützt AMP eine Skriptsprache für fortgeschrittenere Anwendungsfälle. Diese Komponente heißt amp-mustache. Wenn Sie Mustache-Markup-Sprache einbinden, müssen Sie sie mit dem raw-Tag von Liquid umschließen. Beachten Sie, dass Liquid und Mustache eine ähnliche Syntax verwenden.

Indem Sie Ihren Inhalt mit dem raw-Tag umschließen, ignoriert die Braze-Verarbeitungs-Engine alle Inhalte zwischen den raw-Tags und sendet die Mustache-Variable, die Ihr Team benötigt.

Metriken und Analytics

Testen und Fehlerbehebung

Bevor Sie Ihre AMP-E-Mail senden, empfehlen wir:

• Testen Sie gemäß diesen Gmail-Richtlinien.
• Verwenden Sie den Gmail AMP for Email Playground, um AMP-Markup zu validieren.
  • Wenn Ihre AMP-E-Mail Liquid-Tags verwendet, ersetzen Sie diese durch statische Platzhalterwerte, bevor Sie sie in den Gmail AMP for Email Playground einfügen. Nicht gerenderte Liquid-Tags verursachen Validierungsfehler.

Damit Ihre AMP-E-Mail an ein beliebiges Gmail-Konto zugestellt werden kann, muss die E-Mail die folgenden Bedingungen erfüllen:

• Die Sicherheitsanforderungen für AMP für E-Mail müssen erfüllt sein.
• Der AMP-MIME-Teil muss ein gültiges AMP-Dokument enthalten.
• Die E-Mail sollte den AMP-MIME-Teil vor dem HTML-MIME-Teil enthalten.
• Der AMP-MIME-Teil muss kleiner als 100 KB sein.

Beachten Sie, dass Gesamtklicks und eindeutige Klicks keine Klicks berücksichtigen, die aus einer AMP-Nachricht stammen (nur HTML und Klartext). AMP-spezifische Klicks werden der Metrik amp_click zugeordnet.

Wenn keine dieser Bedingungen den Fehler verursacht, kontaktieren Sie den Support.

Gmail-Posteingang für die Darstellung von AMP-E-Mails konfigurieren

Sie können Ihren Gmail-Posteingang zu Testzwecken für die Darstellung von AMP-E-Mails konfigurieren, indem Sie Folgendes tun:

1. Wählen Sie in Gmail Einstellungen in der oberen rechten Ecke Ihres Posteingangs aus.
2. Wählen Sie Alle Einstellungen anzeigen aus.
3. Gehen Sie im Tab Allgemein zum Abschnitt Dynamische E-Mails und bestätigen Sie, dass das Kontrollkästchen Dynamische E-Mails aktivieren aktiviert ist.
4. Wählen Sie als Nächstes Entwicklereinstellungen und aktivieren Sie das Kontrollkästchen Dynamische E-Mails von diesem Absender immer zulassen:.
5. Geben Sie dieselbe Domain ein, die in der Absenderadresse Ihrer Testnachricht verwendet wird.
6. Speichern Sie Ihre Änderungen.

Jetzt können Sie die Test-E-Mail an Ihr Gmail-Konto senden, und AMP-E-Mails sollten in Gmail dargestellt werden.

Häufig gestellte Fragen

Sollte ich bei AMP-E-Mails segmentieren?

Wir empfehlen, nicht zu segmentieren, um an alle verschiedenen Nutzer:innentypen zu senden. Das liegt daran, dass wir AMP-Nachrichten als Multipart senden, wobei verschiedene Versionen in der ursprünglichen E-Mail enthalten sind. Wenn Nutzer:innen die AMP-Version nicht sehen können, wird automatisch auf HTML zurückgefallen.