E-Mail-Inhalte mit dem HTML-Code-Editor erstellen

Youtube-Video: Erstellen Sie Ihre E-Mail-Inhalte von Grund auf mit HTML

Wenn Sie sich mit HTML auskennen und es vorziehen, Ihren eigenen Code zu schreiben, können Sie E-Mails mit dem HTML-Code-Editor von Pushwoosh erstellen.

Hinweis

Sie haben keine Programmierkenntnisse? Verwenden Sie den Drag & Drop-Editor, um mühelos E-Mail-Inhalte zu erstellen. Keine Programmierkenntnisse erforderlich. Erfahren Sie mehr

Wichtig

Bevor Sie mit der Erstellung von E-Mail-Inhalten beginnen, ist es wichtig, Ihre E-Mail im gewählten E-Mail-Editor richtig einzurichten. Dazu gehören die Konfiguration der Sprachen, die Angabe der Betreffzeile, die Bereitstellung von Absenderinformationen und mehr. Erfahren Sie, wie es geht

E-Mail-Inhalte erstellen

Um mit der Erstellung von E-Mail-Inhalten zu beginnen, fügen Sie Ihren HTML-Code in den HTML-Tab ein. Der Editor bietet Echtzeit-Vorschauen der E-Mail, während Sie daran arbeiten.

Alternativ können Sie eine HTML-Datei hochladen, indem Sie auf HTML-Datei hochladen im unteren Bereich klicken.

Um Ihren E-Mails eine persönliche Note zu verleihen, verwenden Sie benutzerdefinierte Tags. Dazu:

1. Klicken Sie auf das Tag-Symbol unten im Editor.
2. Wählen Sie das gewünschte Tag und seinen Modifikator aus und geben Sie bei Bedarf einen Standardwert an.
3. Klicken Sie auf Einfügen, um das benutzerdefinierte Tag in Ihren E-Mail-Inhalt aufzunehmen.

Um ein Emoji in Ihre E-Mail einzufügen, klicken Sie auf das Emoji-Symbol unten im Editor.

Bilder hinzufügen

Um ein Bild zu Ihrer E-Mail hinzuzufügen, fügen Sie ein <img>-Tag in Ihr HTML ein und setzen Sie das src-Attribut auf die Bild-URL.

Um ein Bild aus Ihrem Medienspeicher wiederzuverwenden, kopieren Sie dessen URL und fügen Sie sie in das src-Attribut ein. Die Schritte finden Sie unter Bild-URL kopieren.

<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

Ersetzen Sie YOUR-MEDIA-STORE-URL durch die URL, die Sie aus dem Medienspeicher kopiert haben.

Lokalisierung verwenden

Mit der Lokalisierung können Sie Benutzern personalisierte Erlebnisse in verschiedenen Sprachen bieten.

Im HTML-Code-Editor können Sie die Lokalisierung verwenden, indem Sie eine Standardsprache definieren und mehrere Sprachoptionen hinzufügen. Sie können beispielsweise eine Standardnachricht auf Englisch festlegen und dann Übersetzungen auf Deutsch und Spanisch hinzufügen. Dadurch wird sichergestellt, dass sich Ihr E-Mail-Inhalt an die Spracheinstellungen jedes Benutzers anpasst.

Unten sehen Sie ein Beispiel, wie Sie Ihre Lokalisierungsdaten strukturieren können. Hier wird Englisch als Standardsprache und deutsche und spanische Übersetzungen verwendet.

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

Sobald Ihre Lokalisierungsdaten strukturiert und im Lokalisierungs-Tab des Editors hinzugefügt wurden, integrieren Sie sie mithilfe von Platzhaltern in Ihren HTML-Inhalt. Die Platzhalter fügen dynamisch lokalisierten Text in Ihren Inhalt ein, basierend auf der Spracheinstellung des Benutzers. So implementieren Sie es in Ihrem HTML:

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

Stellen Sie sich folgendes Szenario vor: Sie bewerben einen zeitlich begrenzten Rabatt auf Kaffeemischungen. Durch die Verwendung der oben genannten Lokalisierungsstruktur können Sie Ihre Werbebotschaft effektiv an Benutzer kommunizieren, die verschiedene Sprachen sprechen. Ihr HTML-Code für die Aktion könnte so aussehen:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>

  </div>
</body>
</html>

Mit dieser Einrichtung sehen Benutzer, deren Sprache Deutsch ist, die E-Mail auf Deutsch. Benutzer, die sich für den Empfang von E-Mails auf Englisch entschieden haben, sehen sie auf Englisch. Diejenigen, die sich für den Empfang auf Spanisch entschieden haben, erhalten sie auf Spanisch. Dadurch wird sichergestellt, dass alle Empfänger Ihre Nachricht in ihrer bevorzugten Sprache erhalten.

E-Mail-Inhaltsblöcke einfügen und kombinieren

Pushwoosh ermöglicht es Ihnen, E-Mail-Inhalte zu kombinieren, indem Sie einen E-Mail-Inhalt in einen anderen einfügen. Dies erleichtert die Wiederverwendung von Elementen wie Kopfzeilen, Fußzeilen oder bestimmten Inhaltsblöcken in verschiedenen E-Mails.

Wenn Sie beispielsweise E-Mail-Inhalt A (eine Kopfzeile) und E-Mail-Inhalt B (einen Newsletter) haben, können Sie E-Mail-Inhalt A in E-Mail-Inhalt B einfügen, ohne den Inhalt jedes Mal manuell kopieren zu müssen.

Syntax

Um einen Inhalt in einen anderen einzufügen, verwenden Sie die folgende Syntax:

{% email_content "AAAAA-BBBBB" %}

Wobei “AAAAA-BBBBB” die ID des E-Mail-Inhalts ist, den Sie einfügen möchten. Sie finden die ID unter dem Inhaltsnamen in Ihrer Liste der E-Mail-Inhalte.

Wichtig

• Sie können Inhalte rekursiv einfügen, d. h. ein Inhaltsblock kann einen anderen enthalten, bis zu einer maximalen Tiefe von 3 Ebenen. Zum Beispiel:
  • Inhalt A kann Inhalt B einfügen.
  • Inhalt B kann Inhalt C einfügen.
  • Inhalt C kann jedoch keinen weiteren Block einfügen.
• Zyklische Einfügungen (z. B. wenn Inhalt A Inhalt B einfügt und Inhalt B versucht, Inhalt A einzufügen) sind nicht erlaubt und führen zu einem Fehler.

Beispiel

Angenommen, Sie haben zwei Inhalte:

• Kopfzeileninhalt (ID: “AAAAA-BBBBB”) mit einem vordefinierten Kopfzeilendesign.
• Newsletter-Inhalt, in den Sie die Kopfzeile einfügen möchten.

Um die Kopfzeile in den Newsletter einzufügen, verwenden Sie Folgendes:

{% email_content "AAAAA-BBBBB" %}

Dies ermöglicht es Ihnen, eine vordefinierte Kopfzeile einfach in mehreren E-Mail-Kampagnen wiederzuverwenden. Das spart Zeit und sorgt für Konsistenz in Ihren E-Mails.

Einen Abmeldelink hinzufügen

Fügen Sie einen Abmeldelink in Ihre E-Mail ein, damit Empfänger sich gemäß den Vorschriften und ihren Präferenzen abmelden können. Pushwoosh stellt drei Variablen zur Verfügung, die Sie in Ihrem HTML verwenden können.

Abmeldelink

Fügen Sie diesen Link hinzu, damit Benutzer sich von der erhaltenen Nachricht abmelden können:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

Die Variable wird durch die Pushwoosh-Abmelde-URL ersetzt, wenn Sie die E-Mail senden.

• Wenn das Abonnement-Präferenzcenter aktiviert ist, werden Empfänger nur von der Kategorie abgemeldet, die dieser E-Mail zugewiesen ist (z. B. Newsletter). Es erscheint ein Bestätigungsbildschirm, auf dem sie diese Kategorie erneut abonnieren oder die Präferenzen verwalten können, um alle E-Mail-Kategorien anzupassen. Erfahren Sie mehr

• Wenn das Abonnement-Präferenzcenter nicht aktiviert ist, melden sich Empfänger von allen Marketing-E-Mails ab.

Klicks werden in der Abmelderate für diese Nachricht in der Nachrichten-Historie gezählt.

Von allen Kategorien abmelden

Fügen Sie einen Link hinzu, der den Benutzer von allen E-Mail-Kategorien auf einmal abmeldet:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Unsubscribe from all emails </a>

Hinweis

Damit Sie wichtige E-Mails an Ihre Kunden zustellen können, löschen wir abgemeldete Benutzer nicht aus Ihrer Benutzerbasis. Für Benutzer, die sich vollständig abgemeldet haben (z. B. über den Standard-Abmeldelink, wenn das Präferenzcenter nicht aktiviert ist, oder über den Link „Von allen abmelden“), wird das Standard-Tag Unsubscribed Emails auf „true“ gesetzt.

Erwägen Sie die Erstellung eines Segments von Benutzern, die sich nicht abgemeldet haben (Tag-Wert „false“), um ihnen weiterhin Nachrichten zu senden. Um Beschwerden zu vermeiden, senden Sie keine E-Mails an Benutzer, die sich abgemeldet haben.

Link zum Präferenzcenter

Fügen Sie einen direkten Link zum Präferenzcenter hinzu, wo Benutzer verwalten, welche Kategorien sie erhalten:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>

Erfahren Sie, wie das Präferenzcenter funktioniert

Der Screenshot unten zeigt eine Fußzeile, die alle drei Link-Typen verwendet.

Vorsicht

Wenn Sie Ihren eigenen Abmeldelink anstelle der Pushwoosh-Variablen verwenden, werden Benutzer, die sich über Ihren Link abmelden, nicht in der Abmelderate in der Nachrichten-Historie berücksichtigt. Nur Benutzer, die dem Pushwoosh-Link gefolgt sind, werden in der Statistik für diese E-Mail gezählt.

E-Mail-Inhalt speichern

Nachdem Sie Ihre E-Mail fertig erstellt haben, klicken Sie auf die Schaltfläche Speichern oben im Editor.

Geben Sie Ihrer E-Mail in dem neuen Fenster, das erscheint, einen eindeutigen Namen, der mit Ihrer Betreffzeile identisch sein kann. Erstellen Sie auch ein Label, damit Sie sie in Ihrer E-Mail-Liste leicht finden können.

Wenn Sie noch keine Absenderdetails eingerichtet haben, stellen Sie sicher, dass Sie dies ebenfalls tun. Klicken Sie dann auf Speichern.

Jetzt, da Ihr E-Mail-Inhalt fertig ist, kann er in E-Mail-Kampagnen verwendet werden. Erfahren Sie mehr

Eine Test-E-Mail senden

Bevor Sie Ihre E-Mail-Kampagne versenden, können Sie eine Test-E-Mail senden, um eine Vorschau zu erhalten, wie der Inhalt in den Posteingängen der Empfänger aussehen wird. Dies ermöglicht es Ihnen, das Layout, den Inhalt und alle personalisierten Elemente zu überprüfen, um die Genauigkeit vor der Fertigstellung der Kampagne sicherzustellen. Passen Sie den Inhalt bei Bedarf basierend auf den Testergebnissen an.

Hinweis

Wenn KYC (Know Your Customer) nicht abgeschlossen ist, können Sie dennoch Test-E-Mails senden, indem Sie eine Test-E-Mail-Adresse verifizieren. Gehen Sie dazu zum Abschnitt Testgeräte, fügen Sie die E-Mail-Adresse hinzu, die Sie zum Testen verwenden möchten, und schließen Sie den Verifizierungsprozess ab.

Um eine Test-E-Mail zu senden, klicken Sie im E-Mail-Editor auf Test-E-Mail.

In dem sich öffnenden Fenster:

1. Geben Sie im Feld E-Mail-Adresse die E-Mail-Adresse ein, an die Sie die Test-E-Mail erhalten möchten.

Wenn KYC nicht abgeschlossen wurde, müssen Sie eine verifizierte E-Mail-Adresse aus der Liste der Testadressen auswählen, anstatt eine E-Mail einzugeben.

2. Wenn Ihre E-Mail dynamische Inhalte enthält (Platzhalter für personalisierte Daten), fügen Sie Beispielwerte zu Testzwecken hinzu.

Zum Beispiel:

• Age (integer): Geben Sie eine Zahl ein, um den Altersplatzhalter darzustellen (z. B. 21).
• FirstName (string): Geben Sie einen Beispiel-Vornamen ein (z. B. David).

Diese Werte ersetzen die tatsächlichen Empfängerdaten in der Test-E-Mail, sodass Sie überprüfen können, wie der dynamische Inhalt angezeigt wird.

3. Sobald Sie die erforderlichen Details ausgefüllt haben, klicken Sie auf Test-E-Mail senden, um die Testnachricht an die angegebene E-Mail-Adresse zu senden.