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:
- Ein unitäres Ereignis. Weitere Informationen.
- Eine Journey, die mit einem Ereignis beginnt. Weitere Informationen.
- Eine E-Mail-Nachricht in Ihrer Journey. Weitere Informationen
- Der Textkörper einer E-Mail. Weitere Informationen.
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.
-
Erstellen Sie ein Ereignis, dessen Schema das Array
productListItems
enthält. -
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.
-
Erstellen Sie eine Journey, die mit diesem Ereignis beginnt.
-
Fügen Sie die Aktivität E-Mail zur Journey hinzu.
Schritt 2: E-Mail erstellen configure-email
-
Klicken sie in der Aktivität E-Mail auf Inhalt bearbeiten und anschließend auf E-Mail-Designer.
-
Ziehen Sie drei Strukturkomponenten aus der linken Palette der Startseite von E-Mail-Designer in den Textkörper der Nachricht.
-
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
-
Klicken Sie auf der Startseite von E-Mail-Designer auf die HTML-Komponente, der Sie den Vornamen des Kunden hinzufügen möchten.
-
Klicken Sie in der kontextuellen Symbolleiste auf Quellcode anzeigen.
-
Fügen Sie im Fenster HTML bearbeiten die Zeichenfolgen-Funktionen
upperCase
hinzu:-
Wählen Sie im linken Menü die Option Hilfsfunktionen.
-
Verwenden Sie das Suchfeld, um „Großbuchstaben“ zu finden.
-
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) %}
-
-
Entfernen Sie den Platzhalter „string“ (Zeichenfolge) aus dem Ausdruck.
-
Fügen Sie das Vorname-Token hinzu:
-
Wählen Sie im linken Menü die Option Profilattribute.
-
Wählen Sie Person > Vollständiger Name.
-
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.
-
-
Klicken Sie auf Validieren und dann auf Speichern.
-
Speichern Sie die Nachricht.
Schritt 4: Liste der Artikel aus dem Warenkorb einfügen each-helper
-
Öffnen Sie den Nachrichteninhalt erneut.
-
Klicken Sie auf der Startseite von E-Mail-Designer auf die HTML-Komponente, in der Sie den Inhalt des Warenkorbs auflisten möchten.
-
Klicken Sie in der kontextuellen Symbolleiste auf Quellcode anzeigen.
-
Fügen Sie im Fenster HTML bearbeiten den Helper
each
hinzu:-
Wählen Sie im linken Menü die Option Hilfsfunktionen.
-
Verwenden Sie das Suchfeld, um „each“ zu finden.
-
Fügen Sie von den Suchergebnissen den Helper
each
hinzu.Der Ausdruckseditor zeigt diesen Ausdruck:
code language-handlebars {{#each someArray as |variable|}} {{/each}}
-
-
Fügen Sie dem Ausdruck das Array
productListItems
hinzu:-
Entfernen Sie den Platzhalter „someArray“ aus dem Ausdruck.
-
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.
-
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.
-
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.
-
Ändern Sie den Ausdruck:
- Entfernen Sie die Zeichenfolge „product“.
- 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|}}
-
-
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>
-
Fügen Sie die Personalisierungs-Token für den Artikelnamen, die Menge und den Preis hinzu:
- Entfernen Sie den Platzhalter „#name“ aus der HTML-Tabelle.
- 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}}
-
Klicken Sie auf Validieren und dann auf Speichern.
Schritt 5: Eine produktspezifische Anmerkung einfügen if-helper
-
Klicken Sie auf der Startseite von E-Mail-Designer auf die HTML-Komponente, in der Sie die Anmerkung einfügen möchten.
-
Klicken Sie in der kontextuellen Symbolleiste auf Quellcode anzeigen.
-
Fügen Sie im Fenster HTML bearbeiten den Helper
if
hinzu:-
Wählen Sie im linken Menü die Option Hilfsfunktionen.
-
Verwenden Sie das Suchfeld, um „if“ zu finden.
-
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%}
-
-
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%}
-
Fügen Sie der Bedingung das Produktname-Token hinzu:
-
Entfernen Sie den Platzhalter „condition1“ aus dem Ausdruck.
-
Wählen Sie im linken Menü die Option Kontextuelle Attribute.
-
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.
-
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%}
-
-
Ändern Sie den Ausdruck:
-
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%}
-
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%}
-
Entfernen Sie den Platzhalter „default_render“ aus dem Ausdruck.
-
-
Klicken Sie auf Validieren und dann auf Speichern.
-
Speichern Sie die Nachricht.
Schritt 6: Journey testen und veröffentlichen test-and-publish
-
Aktivieren Sie den Umschalter Test und klicken Sie dann auf Ereignis auslösen.
-
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:
-
Vergewissern Sie sich, dass kein Fehler vorliegt, und veröffentlichen Sie die Journey.
Verwandte Themen related-topics
Handlebars-Funktionen handlebars
Anwendungsfälle use-case
Anleitungsvideo video
Erfahren Sie, wie Sie Hilfsfunktionen verwenden.