Wie baue ich einen dynamischen Block in einer Flow E-Mail

Du wirst lernen

Lerne, wie du mit der dynamischen Tabelle Block Produkt- und andere Ereignisinformationen zu deinem Metrik-getriggerten Flow hinzufügen kannst. In diesem Artikel erfährst du, wie du einen dynamischen Block am Beispiel einer Warenkorbabbruch-Erinnerung erstellst, die die zurückgelassenen Produkte anzeigt.

Wenn du eine der vorgefertigten E-Commerce-Integrationen von Klaviyoverwendest (z.B. Shopify, BigCommerce, Magento, oder WooCommerce), musst du diesen Block nicht manuell erstellen. Nutze stattdessen die Flow-Bibliothek, um vorgefertigte, voll funktionsfähige Flow-E-Mails zu finden, die du als Vorlage verwenden kannst. 

In einem durch Metrik ausgelösten Flow kannst du den Inhalt deiner E-Mail auf der Grundlage des Ereignisses, das den Flow auslöst, personalisieren. Wenn jemand zum Beispiel einen Bezahlvorgang startet, kannst du Produktbilder und Preise in eine Warenkorbabbruch E-Mail einfügen, um die Empfänger zu ermutigen, zu ihrem Warenkorb zurückzukehren und den Kauf abzuschließen. Die dynamische Tabelle Block wird automatisch mit den Informationen wiederholt, die für jeden Artikel im Warenkorb angegeben wurden.

Bevor du beginnst

Bevor du loslegst, solltest du sicherstellen, dass du Ereignisdaten hast, die du verwenden kannst. Navigiere zu Analytics > Metrik, um sicherzustellen, dass das Ereignis in Klaviyo existiert.

Wenn du mit der Verwendung von Ereignis- oder Profildaten in E-Mails noch nicht vertraut bist, schau dir als ersten Schritt unsere Referenz zur Nachrichtenpersonalisierung an. 

Es wird auch hilfreich sein, die Datentypen in Klaviyo zu verstehen, insbesondere Liste (d.h. Arrays). Ein Array ist eine Möglichkeit, mehrere Daten zu laden, die gleich strukturiert sind. Zum Beispiel werden die Artikel im Einkaufswagen eines Kunden als Array in einem Bezahlvorgang Started Event geladen. Das Array items enthält einen Eintrag pro bestelltem Artikel, und jeder Eintrag enthält die Details zu diesem Artikel (z. B. Artikelname, Bild-URL, Menge, Größe, Farbe usw.). 

Welche Arten von Flow können dynamische Tabellenblöcke verwenden? 

Dynamische Tabellenblöcke enthalten Informationen über ein oder mehrere Produkte, mit denen ein Kunde in irgendeiner Weise interagiert hat (z.B. gekauft oder im Warenkorb gelassen hat). Diese Tabellenblöcke sind nützlich für Ereignisse, die abhängig von einer Kundenaktion eine unterschiedliche Anzahl von Produkten enthalten können. Dynamische Tabellenblöcke sind nützlich für den durch diese Ereignisse ausgelösten Flow: 

• Bestellung aufgegeben ( Auftragsbestätigung Flow)
• Gestarteter Bezahlvorgang (Warenkorbabbruch Flow) 
• Erfüllte Bestellung (Versandbestätigung Flow) 
• Stornierte Bestellung (Stornierungsbestätigung) 
• Alle anderen Ereignisse, die eine Liste von einem oder mehreren Produkten enthalten

Dynamische Tabellenblöcke sind nicht sinnvoll, wenn Ihre Veranstaltung immer nur ein einziges Produkt enthält. Die folgenden Ereignisse erfordern stattdessen statische Tabellenblöcke. 

• In den Warenkorb gelegt (aufgegebener Bezahlvorgang Flow)
• Gesehenes Produkt (Browse-Abandonment-Flow) 

Erfahren Sie, wie Sie einen statischen Tabellenblock für Einzelprodukt-Ereignisse erstellen. 

Schritt 1: Erstelle deinen Flow

1. Navigiere zur Registerkarte " Flow" in Klaviyo.
2. Klicke auf Flow erstellen. 
3. Klicke auf Von Grund auf neu erstellen. 
4. Gib deinem Flow einen Namen und klicke auf Erstellen Flow. 
5. Klicke unter Trigger-Einstellung auf Metrik. 
6. Wähle das Ereignis, das deinen Flow auslösen soll. In diesem Beispiel verwenden wir das Ereignis "Bezahlvorgang gestartet". Dadurch wird sichergestellt, dass wir Zugang zu den Ereignisdaten haben, die für den Aufbau eines Warenkorbabbruch-Blocks notwendig sind.
7. Klicke auf Fertig. 
8. Ziehe eine E-Mail-Aktion per Drag & Drop in den Flow.

Schritt 2: Eine dynamische Tabelle hinzufügen

1. Klicke auf den E-Mail-Block, den du im letzten Abschnitt zu deinem Fluss hinzugefügt hast. 
2. Klicke auf Inhalt konfigurieren. 
3. Wähle Drag and Drop. 
4. Wähle eine Vorlage aus, die du als Basis verwendest.
5. Ziehe einen Tabellenblock in deine E-Mail.
6. Klicke auf Tabelleneinstellungen > Dynamisch, um die Tabelle in einen dynamischen Block umzuwandeln. Es werden 2 Felder angezeigt: Row Collection und Row alias; wir werden diese Felder in den nächsten Schritten ausfüllen.
7. Klicke zurück auf die Registerkarte Inhalt, um deine Spaltentypen anzupassen.
8. In der Regel zeigt eine Warenkorbabbruch-Nachricht links Bilder der verlassenen Artikel und rechts Details zu dem Artikel. Klicke auf den linken oder rechten Zeilenwähler und dann auf Text oder Bild, um den Zellentyp zu ändern.
   

Schritt 3: Identifiziere deine Reihensammlung

In diesem Schritt fügst du den Namen des Arrays, das du abonniert hast, um darüber zu iterieren, in das Feld Row collection ein. So findest du den Namen deines Arrays:

1. Klicke auf Vorschau und teste.
2. Klicke auf Ereignis. 
3. Wähle das Ereignis, das diesen Flow auslöst (z.B. Bezahlvorgang gestartet).
4. Scrolle durch die Vorschaudaten für deine Veranstaltung, bis du ein Feld findest, das die benötigten Informationen enthält. Du kannst die Pfeilsymbole auf der linken Seite der Daten verwenden, um nicht benötigte Abschnitte auszublenden und so die Navigation zu erleichtern.
   Wenn noch niemand die Auslöseaktion des Ablaufs abgeschlossen hat, sind keine Vorschaudaten für den Ablauf verfügbar. Du kannst zu deiner Website navigieren, um die Aktion auszuführen (z.B. Artikel in den Warenkorb legen und einen Bezahlvorgang starten), und dann wird dein Ereignis in den Vorschauoptionen von Klaviyoangezeigt.
   
   In diesem Beispiel gibt es 2 Arrays, die Artikelinformationen laden: 
   
   • Artikel
     Ein Array der obersten Ebene, das eine einfache Liste mit den Namen der einzelnen Artikel enthält.
   • line_items,
     Ein Array, das innerhalb des Extra-Arrays verschachtelt ist und mehr Details enthält, wie z.B. den Titel, den Preis, die SKU und die URL des Bildes.
     

   Du wirst das detailliertere Array line_items verwenden wollen, da es die detaillierten Informationen enthält, die für die Anzeige in der Wiederholungstabelle Block benötigt werden. Um die passende Variable für das Row-Sammelfeld zu finden, wähle zwei Variablen im ersten Abschnitt des Arrays aus und kopiere sie. In diesem Beispiel kopierst du den Tag für variant_price und title. Hier sind die beiden Tags aus diesem Beispiel: 

   {{ event.extra.line_items.0.variant_price }}

   {{ event.extra.line_items.0.title }}

5. Ignoriere die geschweiften Klammern und sieh dir die Variablen darin an. Beachte, dass der Anfang beider Variablen derselbe ist: event.extra.line_items.0. 

6. Verwende alles bis zum Punkt und die Zahl am Ende dieses Teils der Variablen als deine Zeilensammlung. In diesem Beispiel lautet die entsprechende Einstellung für das Feld Row collection event.extra.line_items.

Optional: Fallback-Inhalt festlegen

Fallback-Inhalte werden angezeigt, wenn in der von dir ausgewählten Zeilensammlung keine Daten vorhanden sind. Dies ist nur notwendig, wenn du eine Tabelle auf der Grundlage von Daten erstellst, die nicht durchgängig im Triggerereignis erscheinen. Um Ersatzinhalte hinzuzufügen, klicke auf die Option Fallback-Inhalt und füge Inhalte (z. B. Text oder ein Bild) in das Feld ein, das dann erscheint. 

Schritt 4: Wähle einen Zeilenalias

Dein Zeilenalias kann jeder beliebige Text sein (ohne Sonderzeichen oder Leerzeichen). Du wirst diesen Alias in deiner dynamischen Tabelle Block verwenden, um Variablen zu identifizieren, die aus dem oben ausgewählten Array gezogen werden sollen. Es ist hilfreich, einen einfachen, aber aussagekräftigen Alias zu wählen, damit du ihn dir leicht merken kannst. 

In diesem Beispiel wiederholt sich die dynamische Tabelle Block über eine Liste von Artikeln in einem Warenkorbabbruch, daher ist item ein guter Alias für die Verwendung. Wenn sich dein Block über eine Liste von Blogbeiträgen wiederholt, kannst du post als Alias verwenden.

Du kannst jeden Alias verwenden, den du möchtest. Achte nur darauf, dass du diesen Alias konsequent in den Variablen deines Arrays verwendest (wie in den folgenden Schritten beschrieben). 

Sobald du die Felder Row Collection und Row Alias ausgefüllt hast, kannst du mit dem Aufbau deiner Tabelle beginnen. 

Schritt 5: Dynamische Produktdetails hinzufügen

Nachdem die Datenquelle eingerichtet ist, kannst du mit Tag Text in deiner E-Mail hinzufügen. Da es sich bei dieser E-Mail um einen Warenkorbabbruch Flow handelt, ist es wichtig, den Namen des hinterlassenen Produkts sowie weitere Details wie einen Preis und einen Link zum Kauf anzugeben.

So gibst du den Produkttitel in deinen Block ein:

1. Navigiere zu einer der Spalten der Tabelle. Wenn du ein Bild in der ersten Spalte und den Text in der zweiten Spalte haben möchtest, klicke auf den Spaltenwähler auf der rechten Seite des Inhaltsbereichs des Blocks.
2. Fügen Sie die vollständige Ereignisvariable aus dem Vorschaumodal ein (z.B. {{ event.extra.line_items.0.title }}).
3. Ersetzen Sie die Zeilenkollektion innerhalb der Variablen (d.h. den Text, den Sie für die Zeilenkollektion verwendet haben) und den folgenden Punkt und die Zahl durch den im letzten Schritt ausgewählten Alias (z.B. item), wobei Sie die umgebenden Klammern beibehalten. In diesem Beispiel wird {{ event.extra.line_items.0.title }} zu {{ item.title }}.
   
4. Zeigen Sie eine Vorschau der E-Mail an, um sicherzustellen, dass der Titel angezeigt wird. Wenn es nicht erscheint, überprüfen Sie die Rechtschreibung, Großschreibung und Formatierung des Textes sowie Ihre Einstellungen auf der Registerkarte Tabelleneinstellungen, um sicherzustellen, dass keine Fehler vorliegen.

Wiederhole die gleichen Schritte, um weitere Artikeldetails hinzuzufügen. 

Hyperlink zu einem Produkttitel

So fügst du einen Hyperlink zum Produkttitel hinzu: 

1. Finde die Produkt-URL-Variable in deinen Veranstaltungsdetails.
2. Ersetze die Zeilensammlung und die Zeilennummer durch deinen Zeilennamen, wie bei der Variable oben (z. B. wird {{ event.extra.line_items.url }} zu {{ item.url }}). 
3. Markiere die vollständige Variable für den Titel des Artikels (z. B. {{ item.title }}). 
4. Klicke auf das Link-Symbol und füge deine URL-Variable in das URL-Feld ein.

Überlegungen zu Währungsvariablen

Wenn dein Artikelpreis als Zahl in den Veranstaltungsdetails angegeben wird (ohne Währungssymbol), verwende das currency_format-Tag, um die Währung zu formatieren. Um dieses Tag anzuwenden, ersetze variable_name im folgenden Code durch die vollständige Preisvariable, ohne die geschweiften Klammern der ursprünglichen Variable: 

{% currency_format variable_name %}

Deine endgültige Variable könnte also wie folgt aussehen: 

{% currency_format item.price %}

Schritt 6: Ein Bild hinzufügen

Um ein dynamisches Bild einzufügen, suche die Ereignisvariable für das Bild im Vorschaumodal. Oft wird diese Variable unter image, img oder src aufgeführt, aber das hängt von deiner Integration ab. Hier steht es unter src: {{ event.extra.line_items.0.product.images.0.src }}. Wenden Sie auf diese Variable die gleichen Anpassungen an wie in Schritt fünf beschrieben (Ersetzen von event.extra.line_items.0 mit Artikel). Dies ist ein Ereignisvariablen-Array innerhalb von event.extra.line_items, die die Bilder für diesen speziellen Artikel enthält.

1. Sobald du diese Variable hast, gehst du zu der Spalte, in der du das Bild anzeigen möchtest (in diesem Fall die linke Spalte).
2. Klicke auf Bild unter dem Zelleninhalt, wenn dieser momentan auf Text eingestellt ist.
3. Klicke auf Dynamisches Bild hinzufügen / Bild durchsuchen.
4. Auf der Registerkarte Dynamisches Bild fügen Sie Ihre Bildvariable in das Feld Dynamische Variable oder dynamische URL ein.
   
5. Geben Sie die angepasste Bild-Ereignisvariable ein, {{ item.product.images.0.src }}.
6. Klicken Sie auf Speichern.
7. Fügen Sie die Produkt-URL-Variable aus Schritt fünf in das Feld Linkadresse ein, damit das Bild anklickbar ist.
8. Lege eine maximale Breite für das Bild fest, beginne mit 250-300 und passe sie nach Bedarf an.
9. Sobald Sie die Änderungen vorgenommen haben, klicken Sie auf Fertig und sehen Sie sich Ihre E-Mail in der Vorschau an, um sicherzustellen, dass sie wie erwartet erscheint. Wenn kein Bild angezeigt wird, vergleichen Sie die Schreibweise der Variable mit der im Vorschaumodal.

Schritt 7: Vorschau deiner E-Mail

Nachdem du die oben genannten Schritte durchgeführt hast, sollte die E-Mail-Vorlage ähnlich wie die folgende aussehen.

Um zu sehen, wie das mit dynamischen Inhalten aussehen würde, und um sicherzustellen, dass die Links richtig funktionieren, klicke auf Vorschau und Testen. Wenn es Fehler gibt, überprüfe die Rechtschreibung und die Struktur deiner Variablen sowie die Registerkarte Tabelleneinstellungen. 

Du kannst dieselben Konzepte verwenden, um zusätzliche dynamische Blöcke für Flow zu erstellen, die auf der Grundlage verschiedener Metrik ausgelöst werden.

Zusammenfassung

Zur Erinnerung: Befolge diese Schritte, um einen dynamischen Tabellenblock in deiner Flow E-Mail zu erstellen:

1. Erstelle einen Metrik-getriggerten Flow.
2. Füge eine Tabelle Block hinzu und setze sie auf Dynamisch.
3. Verwende das Vorschaumodal, um deine Rowsammlung zu identifizieren. 
4. Wähle einen Zeilenalias.
5. Füge dynamische Produktdetails hinzu, indem du die Variablen anpasst.
6. Füge ein dynamisches Bild hinzu.
7. Vorschau.

Erstellen Sie einen statischen Tabellenblock für Einzelprodukt-Ereignisse 

Wenn ein Ereignis immer nur ein einziges Produkt enthalten kann, verwenden Sie einen statischen Tabellenblock. Für diese Ereignisse müssen Sie keine Row-Collection oder Row-Alias festlegen und Sie können unbearbeitete Variablen direkt aus Ihren Ereignisdaten verwenden. 

1. Navigiere zur Registerkarte " Flow" in Klaviyo.
2. Klicken Sie auf Erstellen Flow. 
3. Klicken Sie auf Von Grund auf neu erstellen. 
4. Benennen Sie Ihre Flow und klicken Sie auf Erstellen Flow. 
5. Klicken Sie unter Trigger-Einrichtung auf Metrik. 
6. Wählen Sie eine Metrik für ein einzelnes Produkt aus, z.B. Gesehenes Produkt oder In den Warenkorb gelegt. 
7. Klicke auf Fertig. 
8. Ziehe eine E-Mail-Aktion per Drag & Drop in den Flow.
9. Klicken Sie auf Vorlage auswählen, um eine Vorlage auszuwählen. 
10. Wählen Sie eine Vorlage, die Sie als Basis verwenden möchten.
11. Ziehe einen Tabellenblock in deine E-Mail.
12. Standardmäßig ist das Feld Tabellendaten unter Tabelleneinstellungen auf Statisch eingestellt; ändere diese Einstellung nicht.
    
13. Klicke auf Vorschau & test, um die verfügbaren Variablen für deine Nachricht zu sehen. Klicke auf die Bild-URL-Variable, um sie zu kopieren.
    
14. Lege mithilfe der Felder Zellenauswahl und Zelleninhalt fest, dass die linke Zelle den Zellentyp Bild verwenden soll.
    
15. Klicken Sie auf Bild auswählen. 
16. Wählen Sie Dynamisches Bild. 
17. Fügen Sie die kopierte Bild-URL-Variable in das Feld Dynamische Variable oder dynamische URL ein. 
18. Klicken Sie auf Speichern. 
19. Legen Sie fest, dass die rechte Zelle den Zellentyp Text verwenden soll. 
20. Kopiere alle Variablen, die du anzeigen möchtest (z. B. Produkttitel, Produktpreis) und füge sie in die Textzelle ein.
    
21. Fügen Sie zusätzliche Blöcke hinzu, z. B. eine CTA-Schaltfläche, um zum Warenkorb zurückzukehren, und gestalten Sie die E-Mail nach Wunsch.
22. Wenn Sie fertig sind, klicken Sie auf Beenden.

Zusätzliche Ressourcen

• Wie man einen Warenkorbabbruch Flow erstellt
• Hinweis zur Personalisierung der Nachricht
• Wie man Produkte vertikal in einer E-Mail anzeigt
• Kurs: Programmierlogikkonzepte anwenden, um personalisierte Nachrichten zu erstellen