Personalisierung – Anwendungsfall: E-Mail bei Warenkorbabbruch

In diesem Beispiel personalisieren Sie den Textkörper einer E-Mail-Nachricht. Diese Nachricht richtet sich an Kunden, die zwar Artikel in ihren Einkaufswagen abgelegt, aber ihren Einkauf nicht abgeschlossen haben.

Sie werden die folgenden Arten von Hilfsfunktionen verwenden:

  • Die Zeichenfolgen-Funktion upperCase, mit der der Vorname des Kunden in Großbuchstaben eingefügt wird. Weitere Informationen.
  • Der Helper each, um die Artikel im Warenkorb aufzulisten. Weitere Informationen.
  • Der Helper if, um eine produktspezifische Anmerkung einzufügen, wenn sich das zugehörige Produkt im Warenkorb befindet. Weitere Informationen.

➡️ Im Video erfahren Sie, wie Sie Helper-Funktionen verwenden

Bevor Sie beginnen, sollten Sie wissen, wie Sie diese Elemente konfigurieren:

Führen Sie folgende Schritte aus:

  1. Erstellen Sie das Anfangsereignis und die Journey.
  2. Erstellen Sie eine E-Mail-Nachricht.
  3. Geben Sie den Vornamen des Kunden in Großbuchstaben ein.
  4. Fügen Sie den Inhalt des Warenkorbs zur E-Mail hinzu.
  5. Fügen Sie eine produktspezifische Anmerkung ein.
  6. Testen und Veröffentlichen der Journey.

Schritt 1: Anfangsereignis und die zugehörige Journey erstellen

Der Warenkorbinhalt ist kontextbezogene Information aus der Journey. Daher müssen Sie einer Journey ein Anfangsereignis und die E-Mail hinzufügen, bevor Sie der E-Mail Warenkorb-spezifische Informationen hinzufügen können.

  1. Erstellen Sie ein Ereignis, dessen Schema das Array productListItems enthält.

  2. Definieren Sie alle Felder aus diesem Array als Payload-Felder für dieses Ereignis.

    Weitere Informationen zum Datentyp des Produktlistenelements finden Sie in der Dokumentation zu Adobe Experience Platform.

  3. Erstellen Sie eine Journey, die mit diesem Ereignis beginnt.

  4. Fügen Sie die Aktivität E-Mail zur Journey hinzu.

Schritt 2: E-Mail erstellen

  1. Klicken sie in der Aktivität E-Mail auf Inhalt bearbeiten und anschließend auf Email Designer.

  2. Ziehen Sie drei Strukturkomponenten aus der linken Palette der Startseite von Email Designer in den Textkörper der Nachricht.

  3. Ziehen Sie eine HTML-Inhaltskomponente per Drag-and-Drop auf jede neue Strukturkomponente.

Schritt 3: Vornamen des Kunden bzw. der Kundin in Großbuchstaben einfügen

  1. Klicken Sie auf der Startseite von Email Designer auf die HTML-Komponente, der Sie den Vornamen des Kunden hinzufügen möchten.

  2. Klicken Sie in der kontextbezogenen Symbolleiste auf Quellcode anzeigen.

  3. Fügen Sie im Fenster HTML bearbeiten die Zeichenfolgen-Funktionen upperCase hinzu:

    1. Wählen Sie im linken Menü die Option Hilfsfunktionen.

    2. Verwenden Sie das Suchfeld, um „Großbuchstaben“ zu finden.

    3. Fügen Sie die Funktion upperCase aus den Suchergebnissen hinzu. Klicken Sie dazu auf das Pluszeichen (+) neben {%= upperCase(string) %}: string.

      Der Ausdruckseditor zeigt diesen Ausdruck:

      {%= upperCase(string) %}

  4. Entfernen Sie den Platzhalter „string“ (Zeichenfolge) aus dem Ausdruck.

  5. Fügen Sie das Vorname-Token hinzu:

    1. Wählen Sie im linken Menü die Option Profilattribute.

    2. Wählen Sie Person > Vollständiger Name.

    3. Fügen Sie dem Ausdruck das Token Vorname hinzu.

      Der Ausdruckseditor zeigt diesen Ausdruck:

      {%= upperCase(profile.person.name.firstName) %}

      Weitere Informationen zum Datentyp des Personennamens finden Sie in der Dokumentation zu Adobe Experience Platform.

  6. Klicken Sie auf Validieren und dann auf Speichern.

  7. Speichern Sie die Nachricht.

Schritt 4: Liste der Artikel aus dem Warenkorb einfügen

  1. Öffnen Sie den Nachrichteninhalt erneut.

  2. Klicken Sie auf der Startseite von Email Designer auf die HTML-Komponente, in der Sie den Inhalt des Warenkorbs auflisten möchten.

  3. Klicken Sie in der kontextbezogenen Symbolleiste auf Quellcode anzeigen.

  4. Fügen Sie im Fenster HTML bearbeiten den Helper each hinzu:

    1. Wählen Sie im linken Menü die Option Hilfsfunktionen.

    2. Verwenden Sie das Suchfeld, um „each“ zu finden.

    3. Fügen Sie von den Suchergebnissen den Helper each hinzu.

      Der Ausdruckseditor zeigt diesen Ausdruck:

      {{#each someArray as |variable|}} {{/each}}

  5. Fügen Sie dem Ausdruck das Array productListItems hinzu:

    1. Entfernen Sie den Platzhalter „someArray“ aus dem Ausdruck.

    2. Wählen Sie im linken Menü die Option Kontextattribute.

      Kontextattribute sind erst verfügbar, nachdem der Journey-Kontext an die Nachricht übergeben wurde.

    3. Wählen Sie Journey Optimizer > Ereignisse > event_name aus und erweitern Sie dann den Knoten productListItems.

      In diesem Beispiel steht event_name für den Namen Ihres Ereignisses.

    4. Fügen Sie dem Ausdruck das Token Produkt hinzu.

      Der Ausdruckseditor zeigt diesen Ausdruck:

      {{#each context.journey.events.event_ID.productListItems.product as |variable|}} {{/each}}

      In diesem Beispiel steht event_ID für die Kennung Ihres Ereignisses.

    5. Ändern Sie den Ausdruck:

      1. Entfernen Sie die Zeichenfolge „product“.
      2. Ersetzen Sie den Platzhalter „variable“ durch „product“.

      Dieses Beispiel zeigt den geänderten Ausdruck:

      {{#each context.journey.events.event_ID.productListItems as |product|}}

  6. Fügen Sie diesen Code zwischen dem öffnenden {{#each}}-Tag und dem schließenden {/each}}-Tag ein:

    <table>
   <tbody>
      <tr>
         <td><b>#name</b></td>
         <td><b>#quantity</b></td>
         <td><b>$#priceTotal</b></td>
      </tr>
   </tbody>
</table>

  7. Fügen Sie die Personalisierungs-Token für den Artikelnamen, die Menge und den Preis hinzu:

    1. Entfernen Sie den Platzhalter „#name“ aus der HTML-Tabelle.
    2. Fügen Sie dem Ausdruck das Token Name aus den vorherigen Suchergebnissen hinzu.

    Wiederholen Sie diese Schritte zweimal:

    • Ersetzen Sie den Platzhalter „#quantity“ durch das Token Menge .
    • Ersetzen Sie den Platzhalter „#priceTotal“ durch das Token Gesamtpreis .

    Dieses Beispiel zeigt den geänderten Ausdruck:

    {{#each context.journey.events.event_ID.productListItems as |product|}}
   <table>
      <tbody>
         <tr>
            <td><b>{{context.journey.events.event_ID.productListItems.name}}</b></td>
            <td><b>{{context.journey.events.event_ID.productListItems.quantity}}</b></td>
            <td><b>${{context.journey.events.event_ID.productListItems.priceTotal}}</b></td>
         </tr>
      </tbody>
   </table>
{{/each}}

  8. Klicken Sie auf Validieren und dann auf Speichern.

Schritt 5: Eine produktspezifische Anmerkung einfügen

  1. Klicken Sie auf der Startseite von Email Designer auf die HTML-Komponente, in der Sie die Anmerkung einfügen möchten.

  2. Klicken Sie in der kontextbezogenen Symbolleiste auf Quellcode anzeigen.

  3. Fügen Sie im Fenster HTML bearbeiten den Helper if hinzu:

    1. Wählen Sie im linken Menü die Option Hilfsfunktionen.

    2. Verwenden Sie das Suchfeld, um „if“ zu finden.

    3. Fügen Sie von den Suchergebnissen den Helper if hinzu.

      Der Ausdruckseditor zeigt diesen Ausdruck:

      {%#if condition1%} render_1
   {%else if condition2%} render_2
   {%else%} default_render
{%/if%}

  4. Entfernen Sie diese Bedingung aus dem Ausdruck:

    {%else if condition2%} render_2

    Dieses Beispiel zeigt den geänderten Ausdruck:

    {%#if condition1%} render_1
   {%else%} default_render
{%/if%}

  5. Fügen Sie der Bedingung das Produktname-Token hinzu:

    1. Entfernen Sie den Platzhalter „condition1“ aus dem Ausdruck.

    2. Wählen Sie im linken Menü die Option Kontextattribute.

    3. Wählen Sie Journey Orchestration > Ereignisse > event_name aus und erweitern Sie dann den Knoten productListItems.

      In diesem Beispiel steht event_name für den Namen Ihres Ereignisses.

    4. Fügen Sie dem Ausdruck das Token Name hinzu.

      Der Ausdruckseditor zeigt diesen Ausdruck:

      {%#if context.journey.events.`event_ID`.productListItems.name%}
   render_1
   {%else%} default_render
{%/if%}

  6. Ändern Sie den Ausdruck:

    1. Geben Sie im Ausdruckseditor den Produktnamen nach dem Token name an.

      Verwenden Sie diese Syntax, wobei product_name den Namen Ihres Produkts darstellt:

      = "product_name"

      In diesem Beispiel lautet der Produktname „Juno Jacket“:

      {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %}
   render_1
   {%else%} default_render
{%/if%}

    2. Ersetzen Sie den Platzhalter „render_1“ durch den Text der Anmerkung.

      Beispiel:

      {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %}
   Due to longer than usual lead times on the Juno Jacket, please expect item to ship two weeks after purchase.
   {%else%} default_render
{%/if%}

    3. Entfernen Sie den Platzhalter „default_render“ aus dem Ausdruck.

  7. Klicken Sie auf Validieren und dann auf Speichern.

  8. Speichern Sie die Nachricht.

Schritt 6: Journey testen und veröffentlichen

  1. Aktivieren Sie den Umschalter Test und klicken Sie dann auf Ereignis auslösen.

  2. Geben Sie im Fenster Ereigniskonfiguration die Eingabewerte ein und klicken Sie dann auf Senden.

    Der Testmodus funktioniert nur mit Testprofilen.

    Die E-Mail wird an die Adresse des Testprofils gesendet.

    In diesem Beispiel enthält die E-Mail die Anmerkung zur Jacke Juno (Juno Jacket), da sich dieses Produkt im Warenkorb befindet:

  3. Vergewissern Sie sich, dass kein Fehler vorliegt, und veröffentlichen Sie die Journey.

Handlebars-Funktionen

Anwendungsbeispiele

Anleitungsvideo

Erfahren Sie, wie Sie Hilfsfunktionen verwenden.

Auf dieser Seite