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. 

1. Erstelle deinen Flow

Beginne damit, deinen Flow zu entwickeln:

1. Navigiere zur Registerkarte " Flow" in Klaviyo.
2. Klicke auf Flow erstellen. 
3. Klicke auf Baue dein eigenes. 
4. Benenne deinen Flow und klicke auf Flow erstellen. 
5. Klicke unter " Wähle einen Auslöser" auf " Deine Metrik". 
6. Wähle aus, von welchen Integrationen deine Trigger-Metrik gesendet wird (z.B. Shopify).
7. 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.
8. Klicke auf Fertig. 
9. Ziehe eine E-Mail-Aktion per Drag & Drop in den Flow.

2. Füge eine dynamische Tabelle zu deiner Flow E-Mail hinzu

Als nächstes fügst du eine dynamische Tabelle zu deiner Flow-E-Mail hinzu:

1. Klicke auf den E-Mail-Block, den du im letzten Abschnitt zu deinem Fluss hinzugefügt hast. 
2. Neben Vorlage klickst du auf Vorlage auswählen. 
3. Wähle eine Vorlage aus, die du als Basis verwendest.
4. Ziehe einen Tabellenblock in deine E-Mail.
5. Klicke auf Formatvorlagen > Dynamisch, um die Tabelle in einen dynamischen Block umzuwandeln. Es werden 2 Felder angezeigt: Row Collection und Row alias, die du in Schritt 3 und 4 ausfüllen wirst.
6. Klicke zurück auf die Registerkarte Inhalt, um deine Spaltentypen anzupassen.
7. In der Regel zeigt eine Warenkorbabbruch-Nachricht auf der linken Seite Bilder der verlassenen Artikel und auf der rechten Seite Details zu dem Artikel. Klicke auf den linken oder rechten Zeilenwähler und dann auf Text oder Bild, um den Zellentyp zu ändern.
   

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 & test.
2. Scrolle durch die Vorschaudaten für deine Veranstaltung, bis du ein Feld findest, das die Informationen enthält, die du brauchst. 
   Wenn noch niemand die auslösende Aktion des Flows abgeschlossen hat, gibt es keine Vorschaudaten für den Flow. Du kannst zu deiner Website navigieren, um die Aktion auszuführen (z.B. Artikel in den Warenkorb zu legen und einen Bezahlvorgang zu 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 }}

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

4. 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.

Fallback-Inhalt festlegen (optional)

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. 

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. 

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. Ersetze die Zeilensammlung innerhalb der Variablen (d.h. den Text, den du für die Zeilensammlung verwendet hast) und den folgenden Punkt und die Zahl durch den im letzten Schritt ausgewählten Alias (z.B. item), wobei die umgebenden Klammern erhalten bleiben. In diesem Beispiel wird {{ event.extra.line_items.0.title }} zu {{ item.title }}.
   
4. Sieh dir eine Vorschau der E-Mail an, um sicherzustellen, dass der Titel angezeigt wird. Wenn sie nicht erscheint, überprüfe die Rechtschreibung, Großschreibung und Formatierung des Textes sowie deine Einstellungen auf der Registerkarte Formatvorlagen, 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 %}

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 Bild auswählen.
4. Auf der Registerkarte Dynamisches Bild fügst du deine 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üge die Produkt-URL-Variable aus Schritt fünf in das Feld Link-Adresse 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.

7. Vorschau deiner E-Mail

Nachdem du die obigen Schritte ausgeführt hast, sollte die E-Mail-Vorlage in der Vorschau ähnlich aussehen wie die unten abgebildete.

Um zu sehen, wie dies mit dynamischem Inhalt aussehen würde, und um sicherzustellen, dass die Links richtig funktionieren, klicke auf Vorschau & test. Wenn es Fehler gibt, überprüfe die Rechtschreibung und die Struktur deiner Variablen sowie die Registerkarte " Stile" deines Blocks. 

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.

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. Klicke auf Flow erstellen. 
3. Klicke auf Baue dein eigenes. 
4. Benenne deinen Flow und klicke auf Flow erstellen. 
5. Klicke unter " Wähle einen Auslöser" auf " Deine 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. Neben Vorlage klickst du auf Vorlage auswä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 Daten unter Formatvorlagen 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 in den Feldern 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. Kopieren Sie alle Variablen, die Sie anzeigen möchten (z.B. Produkttitel, Produktpreis) und fügen Sie 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