Så här lägger du till anpassade bilder i Iterable
Använd de Handlebars-fält som du redan skickar till Iterable för att rita ett namn, bokningsuppgifter eller saldo på en bild för varje användare.
Första publiceringsdatum: Lägg in de data som du lagrar i Iterable i de bilder som dina användare ser.
Iterable-mallar hämtar redan profil- och händelsedata med Handlebars. Sendtric personanpassade bilder tar detta ett steg längre och ritar in dessa värden på en bild, med dina typsnitt och din layout: en grafik i stil med ett boardingkort med användarens resväg, eller ett bonuskort med det senaste saldot. Bilden skapas när e-postmeddelandet öppnas.
Iterables redigeringsverktyg för dra och släpp har en dynamisk bild i bildblocket som laddar en bild från en URL som innehåller Handlebars, och i deras egen dokumentation hänvisas till externa bildtjänster för att skapa dessa bilder. Sendtric är en av dessa tjänster: du utformar bilden, och dess URL innehåller dina Iterable-fält.
Vad du kan göra med anpassade bilder i Iterable
- Res- och bokningsöversikter: avresestad, ankomststad och datum från en bokning, sammanställda i en resegrafik. Se anpassad text på bilderna för exempel.
- Milstolpar i appen: ”Du har genomfört 30 träningspass” eller ”12 lektioner avklarade” från ett anpassat profilfält, i ett gratulationsmejl.
- Lojalitetsöversikter: poäng, nivå och medlemsnamn på en kortbild i ett månatligt e-postmeddelande om resan.
- Årsavslutningssammanfattningar: flera statistikuppgifter från användarprofilen på en bakgrund, ett vanligt användningsområde för e-postmeddelanden med årsöversikt.
| Bildfunktion | Free | Micro | Standard | Makt och företagande |
|---|---|---|---|---|
| Anpassade textlager för varje bild | 1 | 2 | 4 | 20 |
| Dina egna bildlager (logotyp, produkt) | No | No | Yes | Yes |
| Enfärgad bakgrund | No | No | Yes | Yes |
| Genomskinlig bakgrund | No | No | No | Yes |
Så här lägger du till en egen bild i Iterable
Steg 1: Utforma bilden
I Sendtric går du till Bildanpassning och klicka på Skapa nytt. Välj en bakgrund från mediebiblioteket, eller en enfärgad eller transparent arbetsyta, och lägg sedan till dynamiska textlager för varje värde. Anpassa storleken på varje textruta efter det längsta värdet du förväntar dig, eftersom texten bryts men inte krymper.
Steg 2: Ange värdet i fältet ”Iterable” för varje lager
För varje lager med dynamisk text ska variabeln ges ett variabelnamn med gemener Variabelnamn och placera Handlebars-uttrycket Iterable i ESP-sammanslagningsetikett, till exempel {{firstName}}. Fälten är specifika för ditt projekt, så använd de exakta namnen som du ser i en användarprofil, inklusive punktnotation för kapslade fält, till exempel {{address.city}} om din ort ingår i ett adressobjekt. Lägg till reservtext för användare som saknar ett värde.
Steg 3: Spara och kopiera koden
Spara bilden. Kodrutan visas efter den första sparningen, där varje variabel läggs till i bildens URL och fylls i med ditt Iterable-uttryck. Välj justering och klicka på Kopiera kod.
Steg 4: Klistra in det i ett HTML-block
Öppna din Iterable-mall och klicka på Redigera design. I dra-och-släpp-redigeraren drar du en HTML -block från Innehåll till rätt plats, markera det och klistra in koden i HTML-redigeraren. I WYSIWYG- eller sida-vid-sida-redigeraren klistrar du in koden i källkoden.
Steg 5: Förhandsgranska med riktiga användare
Klicka på Förhandsgranska, ange en användares e-postadress (eller användar-ID) och klicka på Ladda användardata för att se bilden med användarens värden. Prova med en användare med ett långt namn och en med ett tomt fält. Skicka sedan en korrektur till dig själv, vilket fyller i fälten från din egen profil.
Använda bildblocket istället för HTML
Om du hellre vill behålla ett bildblock, kopiera endast adressen inuti src i Sendtrics kod, dra in ett Bild , aktivera Dynamisk bild och klistra in adressen i Dynamisk URL. Om blocket ser tomt ut medan du utformar, kontrollera det i Förhandsgranskning med en användares data laddade.
Reservlösningar i Iterable eller Sendtric
Du kan låta Sendtrics reservtext hantera tomma värden, eller använda Iterables hjälpfunktion inuti taggen, till exempel {{defaultIfEmpty firstName 'there'}}. Använd enkla citattecken för standardvärdet, eftersom uttrycket placeras inuti bildens adress som är omgiven av dubbla citattecken. Om Iterable anger ett standardvärde visas Sendtrics fallback aldrig.
Vanliga frågor om Iterable:s personanpassade bilder
Kan jag använda händelsedata, inte bara profilfält?
Ja. Alla Handlebars-värden som Iterable kan hämta när e-postmeddelandet renderas kan placeras i ett lager, inklusive fält från den händelse som utlöste en resa eller kampanj. I Iterables dokumentation anges att ett händelsefält med samma namn som ett profilfält har företräde, och {{profile.fieldName}} läser profilvärdet explicit.
Vad händer om ett värde innehåller mellanslag eller specialtecken?
Om ett fält kan innehålla mellanslag eller tecken som & eller #, ska du omsluta det med Iterables urlEncode blockhjälp, till exempel {{#urlEncode}}{{city}}{{/urlEncode}}, så att bildadressen förblir intakt. Kontrollera sedan resultatet i Förhandsgranskning.
Vad ser användare som har ett tomt fält?
Om ”Fallback Text” är inställt ser de endast reservtexten, så skriv den som en fullständig fras. Utan den döljs hela lagret, inklusive eventuella ord runt variabeln.
Kan jag uppdatera bilden efter att jag har skickat den?
Ja. När du sparar i Sendtric ändras bilden i varje skickat e-postmeddelande från och med nästa gång du öppnar programmet. De renderade versionerna lagras i cachen i ungefär en timme per värdekombination, och när du sparar rensas cachen.
Räknas förhandsvisningar som visningar?
Förhandsvisningarna i Sendtric-redigeraren gör det inte. Varje gång bilden laddas på riktigt gör det det, inklusive Iterable-korrekturutskrifter som du öppnar och vid upprepade öppningar.
Den här guiden behandlar en del av Sendtrics plattform för e-postpersonalisering . För varje alternativ för personaliserade bilder , se huvudsidan.
Fler Iterable-guider
- Nedräkningstimer - Så här lägger du till nedräkningstimer i Iterable
- Nedräkningstimer - Lägg till dynamiska timers i Iterable
- Live-omröstningar - Så här lägger du till live-omröstningar i Iterable
- Regelbaserade bilder - Så här lägger du till regelbaserade bilder i Iterable
- Dynamiskt Väder - Så här lägger du till Dynamiskt Väder i Iterable
- Kritiska varningar - Så här lägger du till kritiska varningar i Iterable
- Räknare för social bekräftelse - Så här lägger du till räknare för social bekräftelse i Iterable
Använder du en annan plattform? Se alla Sendtric-integrationer.
