Personalisierung – Anwendungsfall: E-Mail bei Warenkorbabbruch personalization-use-case-helper-functions

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:

Schritt 1: Anfangsereignis und die zugehörige Journey erstellen create-context

Der Warenkorbinhalt ist kontextuelle 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 configure-email

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

  2. Ziehen Sie drei Strukturkomponenten aus der linken Palette der Startseite von E-Mail-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 uppercase-function

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

  2. Klicken Sie in der kontextuellen 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:

      code language-handlebars
      {%= 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:

      code language-handlebars
      {%= upperCase(profile.person.name.firstName) %}
      

      Weitere Informationen zum Datentyp des Personennamens finden sich 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 each-helper

  1. Öffnen Sie den Nachrichteninhalt erneut.

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

  3. Klicken Sie in der kontextuellen 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:

      code language-handlebars
      {{#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 Kontextuelle Attribute.

      Kontextuelle Attribute 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:

      code language-handlebars
      {{#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:

      code language-handlebars
      {{#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:

    code language-html
    <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:

    code language-handlebars
    {{#each context.journey.events.event_ID.productListItems as |product|}}
       <table>
          <tbody>
             <tr>
             <td><b>{{product.name}}</b></td>
             <td><b>{{product.quantity}}</b></td>
             <td><b>${{product.priceTotal}}</b></td>
             </tr>
          </tbody>
       </table>
    {{/each}}
    
  8. Klicken Sie auf Validieren und dann auf Speichern.

Schritt 5: Eine produktspezifische Anmerkung einfügen if-helper

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

  2. Klicken Sie in der kontextuellen 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:

      code language-handlebars
      {%#if condition1%} render_1
         {%else if condition2%} render_2
         {%else%} default_render
      {%/if%}
      

  4. Entfernen Sie diese Bedingung aus dem Ausdruck:

    code language-handlebars
    {%else if condition2%} render_2
    

    Dieses Beispiel zeigt den geänderten Ausdruck:

    code language-handlebars
    {%#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 Kontextuelle Attribute.

    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:

      code language-handlebars
      {%#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:

      code language-javascript
      = "product_name"
      

      In diesem Beispiel lautet der Produktname „Juno Jacket“:

      code language-handlebars
      {%#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:

      code language-handlebars
      {%#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 test-and-publish

  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 handlebars

Anwendungsfälle use-case

Anleitungsvideo video

Erfahren Sie, wie Sie Hilfsfunktionen verwenden.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76