Hoe voeg je gepersonaliseerde afbeeldingen toe aan Iterable?
Gebruik de Handlebars-velden die je al naar Iterable stuurt om voor elke gebruiker een naam, boekingsgegevens of saldo op een afbeelding te zetten.
Eerste publicatiedatum: Zet de gegevens die je in Iterable bewaart op de afbeeldingen die je gebruikers te zien krijgen.
Iterable-sjablonen halen al profiel- en evenementgegevens op met Handlebars. Sendtric Gepersonaliseerde Afbeeldingen gaan nog een stapje verder en zetten die waarden in een afbeelding, in jouw lettertypes en lay-out: een afbeelding in de stijl van een instapkaart met de route van de gebruiker, of een klantenkaart met het laatste saldo. De afbeelding wordt gemaakt zodra de e-mail wordt geopend.
De Drag-and-Drop-editor van Iterable heeft een dynamische afbeeldingsoptie in het afbeeldingsblok, waarmee je een afbeelding kunt laden vanaf een URL met Handlebars. In de documentatie wordt verwezen naar externe afbeeldingsdiensten om die afbeeldingen te maken. Sendtric is zo’n dienst: je ontwerpt de afbeelding en de URL bevat je Iterable-velden.
Wat je allemaal kunt doen met gepersonaliseerde afbeeldingen in Iterable
- Reis- en boekingsoverzichten: vertrekplaats, aankomstplaats en datum van een boeking, weergegeven in één reisoverzicht. Bekijk de gepersonaliseerde tekst op de afbeeldingen voor voorbeelden.
- Mijlpalen in de app: "Je hebt 30 trainingen voltooid" of "12 lessen gedaan" vanuit een aangepast profielveld, in een felicitatiemail.
- Loyaliteitsoverzichten: punten, niveau en de naam van het lid op een afbeelding van een kaart in een maandelijkse e-mail over het klanttraject.
- Eindejaarsoverzichten: verschillende statistieken uit het gebruikersprofiel op één achtergrond, een veelvoorkomende toepassing voor e-mails met een jaaroverzicht.
| Afbeeldingsfunctie | Free | Micro | Standard | Macht en ondernemerschap |
|---|---|---|---|---|
| Gepersonaliseerde tekstlagen per afbeelding | 1 | 2 | 4 | 20 |
| Je eigen afbeeldingslagen (logo, product) | No | No | Yes | Yes |
| Effen achtergrond | No | No | Yes | Yes |
| Doorzichtige achtergrond | No | No | No | Yes |
Hoe voeg je een gepersonaliseerde afbeelding toe aan Iterable?
Stap 1: Ontwerp de afbeelding
Ga in Sendtric naar Beeldpersonalisatie en klik op 'Nieuw aanmaken'. Kies een achtergrond uit de mediabibliotheek, of een effen of transparant canvas, en voeg vervolgens Dynamische tekst lagen voor elke waarde. Pas de grootte van elk tekstvak aan op de langste waarde die je verwacht, want tekst loopt wel door, maar wordt niet kleiner.
Stap 2: Vul voor elke laag het veld ‘Iterable’ in
Geef de variabele voor elke Dynamic Text-laag een kleine letter Variabelenaam en zet de Iterable Handlebars-uitdrukking in ESP-mergetag, bijvoorbeeld {{firstName}}. Velden zijn specifiek voor jouw project, dus gebruik de exacte namen die je op een gebruikersprofiel ziet, inclusief puntnotatie voor geneste velden, bijvoorbeeld {{address.city}} als je stad in een adresobject zit. Voeg Fallback-tekst voor gebruikers zonder waarde.
Stap 3: Sla de code op en kopieer hem
Sla de afbeelding op. Na de eerste keer opslaan verschijnt het codevak, waarbij elke variabele aan de URL van de afbeelding wordt toegevoegd en gevuld wordt met jouw Iterable-uitdrukking. Kies de uitlijning en klik op Code kopiëren.
Stap 4: Plak het in een HTML-blok
Open je Iterable-sjabloon en klik op Ontwerp bewerken. Sleep in de Drag-and-Drop-editor een HTML blok vanuit de Inhoud naar de juiste plek, selecteer het en plak de code in de HTML-editor. In de WYSIWYG- of Side-by-Side-editor plak je de code in de broncode.
Stap 5: Bekijk een voorbeeld met echte gebruikers
Klik Voorbeeld, voer het e-mailadres (of de gebruikers-ID) van een gebruiker in en klik op Gebruikersgegevens laden om de afbeelding met hun waarden te zien. Probeer eens een gebruiker met een lange naam en een met een leeg veld. Stuur vervolgens een proefafdruk naar jezelf, waardoor de velden worden ingevuld op basis van je eigen profiel.
Het blok ‘Afbeelding’ gebruiken in plaats van HTML
Als je liever een Image-blok wilt behouden, kopieer dan alleen het adres in de src de code van Sendtric, sleep er een Image blok, schakel Dynamische afbeelding en plak het adres in 'Dynamische URL'. Als het blok er tijdens het ontwerpen leeg uitziet, bekijk het dan in Voorbeeld met de gegevens van een gebruiker erin.
Fallbacks in Iterable of in Sendtric
Je kunt de 'Fallback Text' van Sendtric lege waarden laten afhandelen, of de helper van Iterable binnen de tag gebruiken, zoals {{defaultIfEmpty firstName 'there'}}. Gebruik enkele aanhalingstekens voor de standaardwaarde, omdat de uitdrukking binnen het adres van de afbeelding staat, dat tussen dubbele aanhalingstekens staat. Als Iterable een standaardwaarde opgeeft, wordt de fallback van Sendtric nooit weergegeven.
Veelgestelde vragen over gepersonaliseerde afbeeldingen van Iterable
Kan ik ook gebeurtenisgegevens gebruiken, en niet alleen profielvelden?
Ja. Elke Handlebars-waarde die Iterable kan ophalen bij het weergeven van de e-mail, kan in een laag worden geplaatst, inclusief velden uit de gebeurtenis die een journey of campagne heeft geactiveerd. In de documentatie van Iterable staat dat een gebeurtenisveld met dezelfde naam als een profielveld voorrang krijgt, en {{profile.fieldName}} leest de profielwaarde expliciet in.
Wat als een waarde spaties of speciale tekens bevat?
Als een veld spaties of tekens zoals & of #, zet het dan in de urlEncode block-helper, bijvoorbeeld {{#urlEncode}}{{city}}{{/urlEncode}}, zodat het adres van de afbeelding intact blijft. Controleer vervolgens het resultaat in Preview.
Wat zien gebruikers als een veld leeg is?
Als ‘fallback-tekst’ is ingesteld, zien ze alleen de fallback, dus schrijf die dan als een volledige zin. Zonder die instelling wordt de hele laag verborgen, inclusief alle woorden rondom de variabele.
Kan ik de afbeelding nog aanpassen nadat ik 'm heb verstuurd?
Ja. Als je in Sendtric opslaat, verandert de afbeelding in elke verzonden e-mail vanaf de volgende keer dat je het programma opent. De weergegeven versies worden ongeveer een uur per combinatie van waarden in de cache opgeslagen, en als je opslaat, wordt die cache geleegd.
Tellen previews mee voor mijn aantal weergaven?
Voorbeelden in de Sendtric-editor doen dat niet. Bij elke daadwerkelijke laadbeurt van de afbeelding gebeurt dit wel, ook bij Iterable-proefdrukken die je opent en bij herhaaldelijk openen.
In deze handleiding wordt één onderdeel van Sendtric’s platform voor e-mailpersonalisatie . Voor elke Gepersonaliseerde Afbeeldingen kijk je op de hoofdpagina.
Meer handleidingen van Iterable
- Countdown-Timer - Hoe voeg je countdown-timers toe aan Iterable?
- Countdown-Timer - Dynamische timers toevoegen in Iterable
- Live-enquêtes - Hoe voeg je live-enquêtes toe aan Iterable?
- Regelgebaseerde Afbeeldingen - Hoe voeg je regelgebaseerde afbeeldingen toe aan Iterable
- Dynamisch Weer - Hoe voeg je dynamisch weer toe aan Iterable?
- Kritieke waarschuwingen - Hoe voeg je kritieke waarschuwingen toe aan Iterable?
- Tellers voor sociale bewijskracht - Hoe voeg je Tellers voor sociale bewijskracht toe aan Iterable?
Gebruik je een ander platform? Kijk dan bij alle Sendtric-integraties.
