Så bygger du dynamiska block i flödes-e-postmeddelanden

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 i dina flöden som utlöses av mättal. I den här artikeln får du lära dig hur du skapar ett dynamiskt block med exemplet en påminnelse om övergiven kundvagn som visar produkterna som lämnades kvar.

Om du använder en av Klaviyos färdiga e-handelsintegrationer (t.ex. Shopify, BigCommerce, Magento eller WooCommerce) behöver du inte skapa dessa block manuellt. Använd i stället flödesbiblioteket för att hitta färdigbyggda, fullt fungerande flödesmejl att använda som mallar.

I ett mättalsutlöst flöde kan du anpassa innehållet i dina e-postmeddelanden baserat på händelsen som utlöser flödet. Om någon till exempel påbörjar en kassa kan du inkludera produktbilder och priser i ett e-postmeddelande om övergiven kundvagn för att uppmuntra mottagarna att återvända till sin kundvagn och slutföra köpet. Det dynamiska tabellblocket kommer automatiskt att upprepas med den information som angetts för varje artikel i kundvagnen.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Innan du börjar

Innan du sätter i gång ska du se till att du har händelsedata att använda. Gå till Analytics > Mättal för att se till att händelsen finns i Klaviyo.

Om du inte är bekant med att använda händelse- eller profildata i e-post kan du som ett första steg läsa vår referens för meddelandepersonalisering.

Det är också bra att förstå datatyper i Klaviyo, särskilt listor (dvs. arrayer). En array är ett sätt att lagra flera datapunkter som är strukturerade på samma sätt. Till exempel lagras en kunds varor i kundvagnen som en array i en Checkout Started -händelse. items -arrayen 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 osv.).

Vilka typer av flöden kan använda dynamiska tabellblock?

Dynamiska tabellblock innehåller information om en eller flera produkter som en kund interagerade med på något sätt (t.ex. köpte eller lämnade i sin kundvagn). Dessa tabellblock är användbara för händelser som kan innehålla olika antal produkter, beroende på en kundåtgärd. Dynamiska tabellblock är användbara för flöden som utlöses av de här händelserna:

• Genomförd beställning (beställningsbekräftelseflöde)
• Påbörjad kassa (flöde för övergiven kassa)
• Fullgjord beställning (flöde för leveransbekräftelse)
• Avbruten beställning (bekräftelse av avbokning)
• Alla andra händelser som innehåller en lista med en eller flera produkter

Dynamiska tabellblock är inte användbara om din händelse alltid innehåller en enda produkt. Händelserna nedan kräver i stället statiska tabellblock.

• Lade i varukorgen (flöde för övergiven kassa)
• Visade produkt (flöde för övergiven surfning)

Lär dig hur du skapar ett statiskt tabellblock för händelser med en enda produkt.

1. Skapa ditt flöde

Börja med att skapa ditt flöde:

1. Navigera till fliken Flöden i Klaviyo.
2. Klicka på Skapa flöde.
3. Klicka på Bygg ditt eget.
4. Ge ditt flöde ett namn och klicka på Skapa flöde.
5. Under Välj en utlösare klickar du på Dina mättal.
6. Välj vilken integration ditt utlösande mättal 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 händelsen Checkout Started. Detta säkerställer att vi har tillgång till de händelsedata som behövs för att skapa ett block för övergiven kundvagn.
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 ditt flödesmejl

Lägg sedan till en dynamisk tabell i ditt flödesmejl:

1. Klicka på e-postblocket som du lade till i ditt flöde i förra avsnittet.
2. Bredvid mall klickar du på Välj mall.
3. Välj en mall att använda som bas.
4. Dra ett tabellblock till ditt e-postmeddelande.
5. Klicka på Stilar > Dynamisk för att konvertera tabellen till ett dynamiskt block. Du ser att två fält visas: Row Collection och Row alias, som du fyller i i steg 3 och 4.
6. Klicka tillbaka till fliken Innehåll för att justera dina kolumntyper.
7. Vanligtvis visar ett meddelande om övergiven kundvagn bilder på de övergivna artiklarna till vänster och information om artikeln till höger. Klicka på radväljaren till vänster eller höger och klicka sedan på Text eller Bild för att ändra celltyp.
   

3. Identifiera din radsamling

I det här steget lägger du till namnet på den array som du planerar att iterera över i fältet Radsamling. Så här hittar du namnet på din array:

1. Klicka på Förhandsgranska och testa.
2. Bläddra igenom förhandsgranskningsdata för din händelse tills du hittar en matris som innehåller informationen du behöver.
3. Om ingen ännu har slutfört flödets utlösande åtgärd finns det inga förhandsgranskningsdata tillgängliga för flödet. Du kan gå till din webbplats och utföra åtgärden (t.ex. lägga till varor i varukorgen och påbörja en kassa), och då visas din händelse i Klaviyos förhandsgranskningsalternativ.
4. I det här exemplet finns det 2 matriser som lagrar artikelinformation:
5. Du bör använda den mer detaljerade matrisen, line_items, eftersom den innehåller den detaljerade information som behövs för att visa i det upprepade tabellblocket. För att hitta rätt variabel att ange i fältet Radsamling väljer du två variabler i den första delen av matrisen och kopierar dem. I det här exemplet kopierar du etiketterna för variant_price och title. Här är de två etiketterna från det här exemplet:
6. {{ event.extra.line_items.0.variant_price }}
7. {{ event.extra.line_items.0.title }}

• Objekt
  En array på högsta nivån som innehåller en enkel lista med varje objekts namn.
• line_items,
  En array som är nästlad i extra -arrayen och innehåller mer information, inklusive varje artikels titel, pris, SKU och bild-URL.
  

8. Ignorera de klammerparenteser och titta på variablerna i dem. Observera att början på båda variablerna är densamma: event.extra.line_items.0.
9. Använd allt fram till (men exklusive) punkten och siffran i slutet av den här delen av variabeln som din Radsamling. I det här exemplet är den lämpliga inställningen för fältet Radsamling event.extra.line_items.

Ställ in reservinnehåll (valfritt)

Reservinnehåll visas om det inte finns några data i den radinsamling som du väljer. Detta är bara nödvändigt när du skapar en tabell baserat på data som inte alltid finns i utlösarhändelsen. Om du vill lägga till reservinnehåll aktiverar du alternativet Reservinnehåll och lägger till innehåll (t.ex. text eller en bild) i fältet som visas.

4. Välj ett radalias

Ditt radalias kan vara vilken text som helst som du vill använda (utan specialtecken eller mellanslag). Du använder det här aliaset i ditt dynamiska tabellblock för att identifiera variabler som ska hämtas från arrayen 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 det dynamiska tabellblocket ö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 valfritt alias; se bara till att du använder det aliaset konsekvent i variabler från din array (enligt anvisningarna 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 dynamiska produktuppgifter

När datakällan är konfigurerad kan du använda etikett för att lägga till text i ditt e-postmeddelande. Eftersom det här e-postmeddelandet gäller ett flöde för övergiven kundvagn är det viktigt att visa namnet på produkten som lämnades kvar, tillsammans med andra detaljer som ett pris och en länk för att köpa.

Så här anger du 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 blockets avsnitt Innehåll.
2. Klistra in hela händelsevariabeln från förhandsgranskningsmodulen (t.ex. {{ event.extra.line_items.0.title  }}).
3. Ersätt radsamlingen i variabeln (dvs. texten du använde för Row collection) och följande punkt och siffra med aliaset som valdes i det sista steget (t.ex. item), och behåll de omgivande hakparenteserna. I det här exemplet blir {{ event.extra.line_items.0.title  }} {{ item.title }}.
   

4. Förhandsgranska e-postmeddelandet för att säkerställa att titeln visas. Om den inte visas, dubbelkolla stavning, användning av versaler och formatering av texten, samt dina inställningar på fliken Stilar, för att säkerställa att det inte finns några fel.

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

Hyperlänka en produkttitel

Så här lägger du till en hyperlänk i produkttiteln:

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

Överväganden för valutavariabler

Om ditt artikelpris skickas som ett tal i dina händelseuppgifter (utan valutasymbol) använder du etiketten currency_format för att tillämpa valutaformatering. För att tillämpa den här etiketten ersätter du variable_name i koden nedan med hela prisvariabeln, exklusive klammerparenteser från originalvariabeln:

{% 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å dina integrationer. Här finns den 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 item). Det här är en händelsevariabelmatris i event.extra.line_items som innehåller bilderna för just det här objektet.

1. När du har den här variabeln går du till kolumnen där du vill visa bilden (den vänstra kolumnen i det här fallet).
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 Dynamisk bild klistrar du in din bildvariabel i fältet Dynamisk variabel eller dynamisk URL.
5. Ange den anpassade bildhändelsevariabeln {{ item.product.images.0.src }}.
6. Klicka på Spara.
7. Lägg till produkt-URL-variabeln från steg fem i fältet Länkadress så att bilden går att klicka på.
8. Ange en maximal bredd för bilden, börja med 250–300 och justera efter behov.
9. När du är klar med ändringarna klickar du på Klart och förhandsgranskar ditt e-postmeddelande för att se till att det visas som förväntat. Om en bild inte visas kontrollerar du stavningen av variabeln mot den i förhandsgranskningsmodalen.

7. Förhandsgranska ditt e-postmeddelande

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

För att se hur det skulle se ut med dynamiskt innehåll och för att se till att länkarna fungerar som de ska klickar du på Förhandsgranska och testa. Om det finns några fel kontrollerar du stavningen och strukturen för dina variabler samt fliken Format för ditt block.

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

Skapa ett statiskt tabellblock för händelser med en enda produkt.

Om en händelse bara någonsin kan innehålla en enda produkt använder du ett statiskt tabellblock. För dessa händelser behöver du inte ange en Row collection eller Row alias, och du kan använda oredigerade variabler direkt från dina händelsedata.

1. Navigera till fliken Flöden i Klaviyo.
2. Klicka på Skapa flöde.
3. Klicka på Bygg ditt eget.
4. Ge ditt flöde ett namn och klicka på Skapa flöde.
5. Under Välj en utlösare klickar du på Dina mättal.
6. Välj ett mättal för en enskild produkt, till exempel Visade produkt eller Lade till i varukorgen.
7. Klicka på Klar.
8. Dra och släpp en E-post -åtgärd i flödet.
9. Bredvid mall klickar du på Välj mall.
10. Välj en mall att använda som bas.
11. Dra ett tabellblock till ditt e-postmeddelande.
12. Som standard är fältet Data inställt på Static under Styles; ändra inte den här inställningen.
    

13. Klicka på Förhandsgranska och testa för att se de variabler som är tillgängliga för ditt meddelande. Klicka på variabeln för bild-URL för att kopiera den.
    

14. Använd fälten Cellväljare och Cellinnehåll och ställ in den vänstra cellen så att den använder celltypen Bild.
15. Klicka på Välj bild.
16. Välj Dynamisk bild.
17. Klistra in bildens URL-variabel som du kopierade 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 de variabler du vill visa (t.ex. produkttitel, produktpris) och klistra in dem i textcellen.
    

21. Lägg till ytterligare block, som en CTA-knapp för att återgå till varukorgen, och formge e-postmeddelandet som du vill.
22. När du är klar klickar du på Avsluta.

Ytterligare resurser