Så bygger du dynamiska block i flödesmejl

Du kommer att lära dig

Lär dig hur du använder dynamiska tabellblock för att lägga till produkt- och annan händelseinformation till ditt mättal-triggade flöde. I den här artikeln får du lära dig hur du skapar ett dynamiskt block med hjälp av exemplet med en påminnelse om övergiven kundvagn som visar de produkter som lämnats kvar.

Om du använder någon av Klaviyo:s förbyggda e-handelsintegrerare (t.ex. Shopify, BigCommerce, Magento eller WooCommerce) behöver du inte bygga dessa block manuellt. Använd istället flödebiblioteket för att hitta färdigbyggd, fullt fungerande flöde e-post att använda som mall. 

Inom ett mättalutlöst flöde kan du anpassa innehållet i din e-post baserat på den händelse som utlöser flödet. Om någon till exempel startar en kassa kan du inkludera produktbilder och priser i en övergiven kundvagn för att uppmuntra mottagaren att gå tillbaka till sin kundvagn och avsluta köpet. Den dynamiska tabellen block kommer automatiskt att upprepas med den information som anges för varje artikel i varukorgen.

Innan du börjar

Innan du kan hoppa in, se till att du har event data att använda. Navigera till analys > mättal för att säkerställa att evenemanget finns i Klaviyo.

Om du inte är bekant med att använda event eller profildata i e-post, kassa vår referens för meddelandeanpassning som ett första steg. 

Det är också bra att förstå data typer i Klaviyo, särskilt lista (dvs. matriser). En array är ett sätt att lagra flera delar av data som är strukturerade på samma sätt. Till exempel är en kunds varukorgsartiklar butik som en array inom en kassa Started-händelse. Arrayen items innehåller en post per beställd artikel och varje post innehåller detaljerna för den artikeln (t.ex. artikelnamn, bild-URL, antal, storlek, färg etc.). 

Vilka typer av flöde kan använda dynamiskt bordsblock? 

Dynamiska tabellblock innehåller information om en eller flera produkter som en kund interagerat med på något sätt (t.ex. köpt eller lämnat kvar i varukorgen). Dessa tabellblock är användbara för evenemang som kan innehålla olika antal produkter, beroende på en kundåtgärd. Dynamiska tabellblock är användbara för flöde som utlöses av dessa händelser: 

• Genomförd order (orderbekräftelse flöde)
• Börjat utcheckning (avbruten utcheckning) 
• Uppfylld order (flöde för leveransbekräftelse) 
• Annullerad order (annulleringsbekräftelse) 
• Alla andra händelser som innehåller en lista med en eller flera produkter

Dynamiska tabellblock är inte användbara om ditt evenemang alltid innehåller en enda produkt. Händelserna nedan kräver istället statiskt tabellblock. 

• Lagt till i varukorgen (övergiven kassa flöde)
• Visad produkt (flöde för övergiven surfning) 

Lär dig hur du skapar en statisk tabell block för evenemang med enstaka produkter. 

1. Skapa ditt flöde

Börja med att skapa ditt flöde:

1. Navigera till fliken Flöde på Klaviyo.
2. Klicka på Skapa flöde. 
3. Klicka på Bygg din egen. 
4. Namnge ditt flöde och klicka på Skapa flöde. 
5. Under Välj en trigger klickar du på Din mättal. 
6. Välj vilken integrationer din "trigger mättal" ska skickas från (t.ex. Shopify).
7. Välj den händelse som ska utlösa ditt flöde. I det här exemplet använder vi eventet kassa Started. Detta säkerställer att vi har tillgång till den händelse data som krävs för att konstruera en övergiven kundvagn block.
8. Klicka på Klar. 
9. Dra och släpp en e-poståtgärd i flödet.

2. Lägg till en dynamisk tabell i din flöde-post

Lägg sedan till en dynamisk tabell i din flöde-post:

1. Klicka på den e-post block som du lade till i ditt flöde i förra avsnittet. 
2. Klicka på Välj köpcentrum bredvid köpcentrum. 
3. Välj en mall som du vill använda som bas.
4. Dra in en tabell block i din e-post.
5. Klicka på Styles > Dynamic för att omvandla tabellen till ett dynamiskt block. Du kommer att se 2 fält visas: Row Collection och Row alias , som du kommer att fylla i i steg 3 och 4.
6. Klicka tillbaka till fliken Innehåll för att justera dina kolumntyper.
7. I allmänhet visar ett meddelande om övergiven kundvagn bilder av de övergivna artiklarna till vänster och information om artikeln till höger. Klicka på den vänstra eller högra radväljaren och klicka sedan på Text eller Bild för att ändra celltyp.
   

3. Identifiera din radkollektion

I det här steget lägger du till namnet på den matris som du abonnemang för att iterera över till Row-samlingsfältet. För att hitta namnet på din matris:

1. Klicka på Förhandsgranska & test.
2. Bläddra igenom förhandsgranskningen data för ditt evenemang tills du hittar en matris som innehåller den information du behöver. 
   Om ingen har slutfört flödets utlösande åtgärd ännu, kommer det inte att finnas någon förhandsgranskning data tillgänglig för flödet. Du kan navigera till din webbplats för att vidta åtgärden (t.ex. lägga till artiklar i din kundvagn och starta en kassa), och sedan visas ditt evenemang i Klaviyo:s förhandsgranskningsalternativ.
   
   I det här exemplet finns det 2 matriser som innehåller information om butiksartiklar: 
   
   • Föremål
     En matris på högsta nivån som innehåller en enkel lista med varje objekts namn.
   • rad_artiklar,
     En array som är kapslad i extra-arrayen och som innehåller mer detaljer, inklusive varje artikels titel, pris, SKU och bild-URL.
     

   Du vill använda den mer detaljerade matrisen, line_items, eftersom den innehåller den detaljerade information som behövs för att visa i den repeterande tabellen block. För att hitta den lämpliga variabeln som ska anges i samlingsfältet Row väljer du två variabler i den första delen av matrisen och kopierar dem. I det här exemplet kopierar du etikett för variant_price och title. Här är de två etikett från detta exempel: 

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

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

3. Strunta i de snirkliga hakparenteserna och titta på variablerna inom dem. Observera att början på båda variablerna är densamma: event.extra.line_items.0. 

4. Använd allt upp till (men exklusive) punkten och numret i slutet av denna del av variabeln som din radkollektion. I det här exemplet är den lämpliga inställningen för samlingsfältet Row event.extra.line_items.

Ange reservinnehåll (valfritt)

Fallback-innehåll visas om det inte finns några data i den radsamling du väljer. Detta är endast nödvändigt när du bygger en tabell baserad på data som inte konsekvent visas inom triggerhändelsen. Om du vill lägga till reservinnehåll växlar du till alternativet Reservinnehåll och lägger till innehåll (t.ex. text eller en bild) i det fält som visas. 

4. Välj ett radalias

Ditt radalias kan vara vilken text du vill (utan specialtecken eller mellanslag). Du kommer att använda detta alias i din dynamiska tabell block för att identifiera variabler som ska hämtas från den matris som du valde ovan. Det är bra att välja ett enkelt men beskrivande alias, så att det är lätt att komma ihåg. 

I det här exemplet upprepas den dynamiska tabellen block över en lista med artiklar i en övergiven kundvagn, så item är ett bra alias att använda. Om ditt block upprepas över en lista med blogginlägg kan du använda post som alias.

Du kan använda vilket alias du vill; se bara till att konsekvent använda det aliaset i variabler från din array (enligt beskrivningen i följande steg). 

När du har fyllt i fälten Row Collection och Row Alias är du redo att börja bygga din tabell. 

5. Lägg till dynamisk produktinformation

När källan data är konfigurerad kan du använda etikett för att lägga till text i din e-post. Eftersom detta e-postmeddelande gäller en övergiven kundvagn flöde är det viktigt att visa namnet på den kvarglömda produkten, tillsammans med andra detaljer som pris och länk till köp.

För att mata in produkttiteln i ditt block:

1. Navigera till en av tabellens kolumner. Om du vill ha en bild i den första kolumnen och texten i den andra klickar du på kolumnväljaren till höger om blockavsnittet Innehåll på.
2. Klistra in den fullständiga händelsevariabeln från förhandsgranskningsmodalen (t.ex, {{ event.extra.line_items.0.title }}).
3. Ersätt radsamlingen i variabeln (dvs. den text du använde för radsamlingen) och den efterföljande punkten och siffran med det alias som valdes i det sista steget (t.ex. item) och behåll de omgivande parenteserna. För detta exempel, {{ event.extra.line_items.0.title }} blir {{ item.title }}.
   
4. Förhandsgranska e-posten för att se till att rubriken visas. Om den inte visas ska du kontrollera stavning, versaler och formatering av texten samt dina inställningar på fliken Stilar för att se till att det inte finns några fel.

Upprepa samma steg för att lägga till ytterligare artikelinformation. 

Hyperlänka till en produkttitel

Lägga till en hyperlänk till produkttiteln: 

1. Hitta produkt-URL-variabeln i dina eventdetaljer.
2. Ersätt radsamlingen och numret med ditt radalias, som med variabeln ovan (t.ex, {{ event.extra.line_items.url }} blir {{ item.url }}). 
3. Markera den fullständiga variabeln för artikelns titel (t.ex., {{ item.title }}). 
4. Klicka på länkikonen och klistra in din URL-variabel i URL-fältet.

Överväganden för valutavariabler

Om artikelpriset anges som ett tal i evenemangsinformationen (utan valutasymbol) kan du använda etiketten currency_format för att tillämpa valutaformatering. För att tillämpa denna etikett ersätter du variabel_namn i koden nedan med den fullständiga prisvariabeln, exklusive hakparenteser från den ursprungliga variabeln: 

{% currency_format variable_name %}

Så din slutliga variabel kan se ut så här: 

{% currency_format item.price %}

6. Lägg till en bild

Om du vill infoga en dynamisk bild hittar du händelsevariabeln för bilden i förhandsgranskningsmodalen. Ofta listas den här variabeln under image, img eller src, men det beror på din integrerare. Här är det under src: {{ event.extra.line_items.0.product.images.0.src }}. Gör samma justeringar för den här variabeln som i steg fem (ersätt event.extra.line_items.0 med föremål). Detta är en händelsevariabelarray inom event.extra.line_items, som innehåller bilderna för detta specifika objekt.

1. När du har den här variabeln går du till den kolumn där du vill visa bilden (i det här fallet den vänstra kolumnen).
2. Klicka på Bild under Cellinnehåll om det för närvarande är inställt på Text.
3. Klicka på Välj bild.
4. På fliken Dynamic Image klistrar du in din bildvariabel i fältet Dynamic variable eller dynamic URL.
5. Mata in den anpassade händelsevariabeln för bilden, {{ item.product.images.0.src }}.
6. Klicka på Spara.
7. Lägg till produktens URL-variabel från steg fem i fältet Länkadress så att bilden blir klickbar.
8. Ställ in en maxbredd för bilden, börja med 250-300 och justera efter behov.
9. När du är klar med ändringarna klickar du på Klar och förhandsgranskar din e-post för att se till att den ser ut som förväntat. Om en bild inte visas, kontrollera stavningen av variabeln mot den som finns i förhandsgranskningsmodalen.

7. Förhandsgranska din e-post

När du har slutfört stegen ovan bör e-postmallaren se ut som den nedan när den förhandsgranskas.

För att se hur detta skulle se ut med dynamiskt innehåll, och för att kontrollera att länkarna fungerar korrekt, klicka på Förhandsgranska & test. Om det finns några fel, kontrollera stavningen och strukturen i dina variabler samt fliken Styles i ditt block. 

Du kan använda samma koncept för att bygga ut ytterligare dynamiska block för flöde som utlöses baserat på olika mättal.

Skapa ett statiskt bord block för evenemang med en enda produkt 

Om ett evenemang bara kan innehålla en enda produkt, använd ett statiskt bord block. För dessa evenemang behöver du inte ange någon Row collection eller Row alias, och du kan använda oredigerade variabler direkt från ditt evenemang data. 

1. Navigera till fliken Flöde på Klaviyo.
2. Klicka på Skapa flöde. 
3. Klicka på Bygg din egen. 
4. Namnge ditt flöde och klicka på Skapa flöde. 
5. Under Välj en trigger klickar du på Din mättal. 
6. Välj en mättal för en enskild produkt, till exempel Visad produkt eller Lagt i varukorgen. 
7. Klicka på Klar. 
8. Dra och släpp en e-poståtgärd i flödet.
9. Klicka på Välj köpcentrum bredvid köpcentrum. 
10. Välj en mall som du vill använda som bas.
11. Dra in en tabell block i din e-post.
12. Som standard är datafältet inställt på Statiskt under Stilar; ändra inte denna inställning.
    
13. Klicka på Preview & test för att se vilka variabler som är tillgängliga för ditt meddelande. Klicka på bildens URL-variabel för att kopiera den.
    
14. Använd fälten Cellväljare och Cellinnehåll för att ange att den vänstra cellen ska använda celltypen Bild.
15. Klicka på Välj bild. 
16. Välj Dynamic Image. 
17. Klistra in den kopierade URL-variabeln för bilden i fältet Dynamisk variabel eller dynamisk URL. 
18. Klicka på Spara. 
19. Ställ in den högra cellen så att den använder celltypen Text. 
20. Kopiera alla variabler som du vill visa (t.ex. produkttitel, produktpris) och klistra in dem i textcellen.
    
21. Lägg till ytterligare block, till exempel en CTA-knapp för att gå tillbaka till kundvagnen, och utforma e-posten som du vill.
22. När du är klar klickar du på Avsluta.

Ytterligare resurser

• Så skapar du ett flöde för en övergiven kundvagn
• Referens för personanpassning av meddelanden
• Så här visar du produkter vertikalt i e-post
• kurs: Tillämpa logiska programmeringskoncept för att skapa mer personliga meddelanden