Juliane Heise

// Country Marketing Manager D/A/CH

Wissen Sie als Onlineshop-Betreiber, wie viele Nutzer Artikel in den Wagen lassen, ohne sie auch tatsächlich zu kaufen?

Wenn ein Kunde Produkte in seinem Warenkorb liegen lässt, muss das nicht zwangsläufig bedeuten, dass der Kauf gar nicht mehr zustande kommt.

Tatsächlich ist das Versenden einer E-Mail eine effektive Taktik, um dennoch Verkäufe und damit Umsätze zu generieren.

50% dieser Remarketing E-Mails werden geöffnet, und über ein Drittel klickt auf den CTA und gelangt wieder zum zuvor verlassenen Warenkorb.

In diesem Entwickler Tutorial werden Sie lernen, wie Sie eine benutzerdefinierte, verlassene Warenkorb-Abbrecher E-Mail mit Mailjet’s Open Source Sprache MJML erstellen.

 

Der Nutzen von Remarketing E-Mails an Warenkorb-Abbrecher

Warum Kunden den Warenkorb verlassen ohne den Kauf abzuschließen kann aus dreierlei Gründen her resultieren:,

  1. Technische Probleme (Webseite-Crashes oder Time-Out)
  2. brauchen noch etwas Zeit zum Nachdenken
  3. Haben sich doch gegen das Produkt entschieden

 

In zwei von drei Fällen ist der potenzielle Kunde also nicht verloren.

Aus diesem Grund kann eine Warenkorb-Abbrech-E-Mail ein erfolgreicher Weg sein, um Nutzer wieder zu gewinnen, zum letzten Schritt in Ihrem Kaufprozess zu führen und damit das Produkt zu kaufen.

Damit dies gelingt, gilt es bei Remarkting E-Mails an Warenkorb-Abbrecher zu beachten:

Die Nutzer müssen das Einkaufserlebnis an genau der Stelle wieder aufzunehmen, wo sie es hinterlassen haben. Dies bedeutet, dass Ihre E-Mail den exakten Inhalt des Warenkorb anzeigen sollte, den er auch verlassen hat und zwar mit all den zurückgelassenen Artikeln.

Eine erfolgreiche Warenkorb-Abbrecher E-Mail sollte demnach Folgendes enthalten:

  1. Zeigt alle Artikel an, die im Warenkorb zurückgelassen wurden.
  2. Bietet einen Anreiz, wie z.B. ein Rabatt oder ein Sonderangebot, der auf Ihren Benutzer zugeschnitten ist.
  3. Einige neue Artikel, die Ihr Benutzer vielleicht bevorzugt.

 

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

Mailjet Newsletter abonnieren

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

 

Warenkorb-Abbrecher E-Mail erstellen: Schritt-für-Schritt Anleitung

Heute erstellen wir eine effiziente Remarketing E-Mail, die Nutzer mit einem Warenkorb-Abbruch erhalten und zwar mit: MJML, unserem Open-Source E-Mail Framework.

Hier ist eine kurze Vorschau:

 

1. Schritt: Mailjet-Konto erstellen

Zunächst benötigen Sie ein Mailjet-Konto. Wenn Sie noch kein Kunde sind, können Sie hier ein kostenloses Konto erstellen.

Anmelde Banner Blo Mailjet

 

Einige Grundkenntnisse in MJML sind von Vorteil, aber nicht zwingend erforderlich. MJML ist eine Open-Source-Markup-Sprache, die reaktionsfähige E-Mails einfach macht:

Sie können Ihre selbsterklärende Syntax basierend auf Zeilen () und Spalten () in einer Minute abfangen.

Wenn Sie es vorziehen, Ihre E-Mail in HTML zu kodieren, stellen wir Ihnen eine gebrauchsfertige index.html-Datei zur Verfügung, die Sie im Stammverzeichnis dieses Repositorys finden können.

Wenn Sie ein MJML-API-Benutzer sind (derzeit in der Open Beta-Phase), können Sie auch unser E-Mail Absender-Tool verwenden, das wir speziell für dieses Tutorial entwickelt haben. Weitere Informationen finden Sie in der README des Tools.

 

2. Schritt: Header programmieren

Lassen Sie uns zunächst den Header der Warenkorb-Abbrecher E-Mail “programmieren”.

Der Header besteht aus dem Firmenlogo und einer Navigationsleiste mit Links, die zu den Kategorien der Webseite führen.

Wie Sie vielleicht im folgenden Code bemerken, ist der Hauptcontainer kein Komma sondern ein Punkt. Selbst wenn das Schreiben einer E-Mail Vorlage mit MJML ein Kinderspiel ist, können wir diesen Prozess durch vorgefertigte interaktive Komponenten vereinfachen.

Darüber hinaus wurde diese Komponente als mobil eingestuft und verhält sich wie ein Burger-Menü auf kompatiblen E-Mail Clients.

Die besteht aus zwei .

Das erste enthält ein Komma, welches das Logo zeigt.

Die zweite Spalte enthält eine – Komponente, die Ihre Links basierend auf einer Liste von erstellt.

<mj-attributes>
  <mj-class name="nav-link" color="#763b26" font-size="20px" font-family="Roboto, Helvetica, Arial, sans-serif" />
</mj-attributes>

[...]

<!-- Navigation bar-->
<mj-navbar background-color="#ffffff">
  <mj-column width="80px" vertical-align="middle">
    <mj-image width="40px" src="https://s27.postimg.org/u09gkrbcz/logo_small.png" padding="10px"></mj-image>
  </mj-column>
  <mj-column width="520px" vertical-align="middle">
    <mj-inline-links
      hamburger="hamburger"
      base-url="#"
      align="center"
      ico-left="30px"
      ico-align="center"
      ico-font-size="40px"
      ico-color="#763b26"
      ico-padding-bottom="20px">
        <mj-link href="/jackets" mj-class="nav-link">JACKETS</mj-link>
        <mj-link href="/pants" mj-class="nav-link">PANTS</mj-link>
        <mj-link href="/jumper" mj-class="nav-link">JUMPER</mj-link>
        <mj-link href="/shirts" mj-class="nav-link">SHIRTS</mj-link>
        <mj-link href="/shoes" mj-class="nav-link">SHOES</mj-link>
    </mj-inline-links>
  </mj-column>
</mj-navbar>

 

Wenn die Nutzer die Warenkorb-Abbrecher E-Mails öffnen, ist das Ziel, dass die Kunden Ihr Einkaufserlebnis dort fortsetzen, wo sie es verlassen haben.

Dies machen Sie am Besten mit einem Design, das dem ursprünglichen Warenkorb sehr nahe kommt.

Dazu reproduzieren wir den Shop-Warenkorb in unserer E-Mail mit leicht zu identifizierenden CTAs, die zur Webseite, in unserem Fall clothes-men.mailjet.com, zurückführen.

Da dieses Design für eine E-Mail etwas anspruchsvoll ist, müssen wir einige MJML-Tricks anwenden, um es optimal zu implementieren.

Verwenden Sie ein ansprechendes Header-Bild und legen Sie ein Text darüber. Wenn MJML uns für diese Aufgabe eine interaktive Komponente zur Verfügung stellt, zwingt uns das spezifische Design, hier unsere Phantasie zu nutzen.

Wie Sie sehen können, verwenden wir zwei verschachtelte . Dies liegt daran, dass die MJML-API, die wir für dieses Tutorial verwenden, die Komponente noch nicht unterstützt.

Wenn Sie Ihren MJML-Code selbst parsen, können Sie gerne damit spielen!

Wir verwenden unser Bild als Hintergrundbild und füllen das Attribut background-url. Dann, in unserem ersten , verwenden wir zwei , um unsere einprägsamen Sätze anzuzeigen.

<!-- Hero + Cart -->
<mj-section
  padding-top="100px"
  background-url="https://s23.postimg.org/vwq5ctlln/hero.png"
  background-size="100%"
  background-repeat="no-repeat"
  background-color="#ffffff">
  <!-- Hero texts -->
  <mj-section vertical-align="middle">
    <mj-column>
      <mj-text
        padding="20px"
        color="#ffffff"
        font-family="Impact, Tahoma, Helvetica, Arial, sans-serif"
        align="center"
        font-size="30px"
        line-height="30px">
        YOU LEFT SOMETHING BEHIND
      </mj-text>
      <mj-text
        padding-bottom="30px"
        align="center"
        font-size="18px">
        <a href="#" style="color:#ffffff">return to your shopping bag</a>
      </mj-text>
    </mj-column>
  </mj-section>
  <!-- Cart -->
  <mj-section background-color="transparent">
    ...

 

3. Schritt: Verlassenen Warenkorb abbilden

Beim eigentlichen Inhalt handelt sich um eine weiße Karte, die den Warenkorb selbst, sowie die Summe und zwei Buttons enthält.

Der Warenkorb ist eine Liste von Elementen, deren Daten sich in der Datei variables.json befinden:

{
"items": [
  {
    "title": "Brown shoes",
    "image_URL": "https://s13.postimg.org/r3otqmynn/shoes.png",
    "price": {
      "currency": "$",
      "separator": ".",
      "amount": 79.99
    },
    "size": "9.5",
    "color": "Brown"
  },
  {
    "title": "Blue T-shirt",
    "image_URL": "https://s13.postimg.org/onn0csgkz/t_shirt.png",
    "price": {
      "currency": "$",
      "separator": ".",
      "amount": 29.99
    },
    "size": "S",
    "color": "Blue"
  },
  {
    "title": "Pale blue shirt",
    "image_URL": "https://s13.postimg.org/shgglxxwz/shirt.png",
    "price": {
      "currency": "$",
      "amount": 24.99
    },
    "size": "S",
    "color": "Blue"
  }]
}

 

Mit den Mailjet Template Sprachvariablen können wir diese Daten verwenden und in unseren E-Mails nach folgendem Muster anzeigen: var:property_key:default_value }}}}.

Da diese Daten eine Array-Quelle sind, können wir sie durchsuchen, um auf jedes innere Objekt zuzugreifen, indem wir die Templating-Sprache für Schleifen verwenden.

Beginnen Sie Ihre for-Schleifen mit einer {% for single_element in der array_variable %}-Anweisung und beenden Sie sie mit einer {% endfor %}-Anweisung. Innerhalb der Schleife wird eine neue Variable single_element erstellt und für jede Iteration aktualisiert, die sofort verwendet werden kann.

Sehen Sie im folgenden Ausschnitt, wie wir die

Zeilen für jedes Element wiederholen und seine Daten in Variablen verwenden.

<!-- Cart -->
<mj-section background-color="transparent">
  <!-- Image -->
  <mj-column vertical-align="middle" width="295px" background-color="#ffffff" border="1px solid transparent">
    <!-- Item lists -->
    <mj-table padding="24px">
      {% for item in var:order.items %}
        <tr>
          <td width="120px" style="padding-bottom:10px">
            <img
              align="left"
              mj-class="img-bordered"
              src="{{ item.image_URL }}"
              width="100px"
              style="border: 2px solid #eeeeee"
            />
          </td>
          <td width="120px" style="padding-bottom:10px">
            <strong>{{ item.title }}</strong><br />
            Color: {{ item.color }}<br />
            Size: {{ item.size }}<br />
            <strong>Price: {{ item.price.currency }}{{ item.price.amount }}</strong>
          </td>
        </tr>
      {% endfor %}
    </mj-table>
    ...

 

Wie Sie vielleicht bemerkt haben, verwenden wir reine HTML-Tags anstelle von MJML-Tags. Das liegt daran, dass Sie <mj-column> nicht verschachteln können, da bestimmte E-Mail Clients diese nicht unterstützen. Wenn Sie ein komplexes Design erstellen müssen, ist der beste Weg, sich an die klassischen <table>-Tags (<tr>, <td>, <th>, <th>, etc.) zu halten, die in eine <mj-table> Komponente gehüllt sind.

Auch hier verwenden wir, um zwei Unterspalten anzuzeigen. Eine ist linksbündig und enthält das SUBTOTAL: title, die andere ist rechtsbündig und zeigt die Währung und den Betrag über zwei Templating-Sprachvariablen an.

<!-- Subtotal -->
<mj-table font-size="18px" padding="5px 24px 10px 24px">
  <tr><td>SUBTOTAL:</td><td style="text-align: right">{{ var:order.subtotal.currency }}{{ var:order.subtotal.amount }}</td></tr>
</mj-table>

 

4. Schritt: Call-to-Action hinzufügen

Zum Schluss zeigen wir unsere beiden CTAs mit zwei <mj-button> an.

<!-- CTAs -->
<mj-button href="checkout" background-color="#2c4961" padding="10px">
  continue checkout
</mj-button>
<mj-button href="edit" background-color="#ffffff" border="1px solid #2c4961" color="#2c4961" padding="10px 0px 30px 0px">
  edit cart
</mj-button>

 

Das war’s.

 

Warum MJML als Template Sprache für Ihre Transaktions-E-Mails verwenden?

Sind Sie es leid, eine separate Vorlage für alle Ihre Bedürfnisse zu erstellen? Die Template-Sprache ist hier, um Ihnen die beste Lösung zu bieten! Sie können mit unserer Vorlagensprache eine Vorlage für alle Ihre Zwecke erstellen.

Die Template-Sprache ist in verschiedenen Sprachen und mit mehreren Bibliotheken verfügbar, so dass Sie wahrscheinlich mit mindestens einer davon vertraut sind. Es wird ein Kinderspiel!

Bei Mailjet kennen wir den Wert einer vollständig integrierten Template Sprache, weshalb wir unsere eigene Template Sprache mit Blick auf unsere Transactional Send API entwickelt haben.

MJML zur mühelosen Erstellung reaktionsschneller HTML-E-Mails sowie eine Template Sprache, um diese mit bedingten Blöcken und Variablen zum Leben zu erwecken.

Diese Kombination kann dein Leben als Entwickler verändern.

 

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

Mailjet Newsletter abonnieren

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

 

Und jetzt?

Weiterführende Informationen finden Sie in unserem DEV-Benutzerhandbuch, die eine Übersicht über alle MJML-Attribute enthält.

Um jetzt Ihre eigene Warenkorb-Abbrecher E-Mail mit MJML zu erstellen, probieren Sie es live:

 

P.S. Wir haben bereits eine Reihe von Tutorials veröffentlicht, die alle einen sehr gebräuchlichen Anwendungsfall behandeln und zahlreiche Beispiele, Codeausschnitte und schöne Grafiken enthalten.

  1. Willkommens-E-Mail
  2. Rechnungs-E-Mail